たかのしゅーのエンジニアへの道

ガチ初心者がウェブカツ受講すると、どうなるか。。。ってブログです。

7月10日 サイドバーとメイン要素の高さを合わせる

今さら！？と思うかもしれませんが。。。

 

現在、左にメニュー、右がメイン要素の２カラムのページを作ってます。

サイドバーは作ったんですが、ページによって長さが違うので、メイン要素の大きさによってサイズが変わる仕様にしました。

 

色々調べた結果、サイドバーにpadding-bottomとmargin-bottomを使い、それぞれの値は10000pxと-10000pxにしました。

で、サイドバーとメイン要素を囲っているdivタグにoverflow: hidden;を入れたら、あら不思議。。。

 

理屈はようわからんが、なったもんね。

すげー試行錯誤して、いいの見つけたった。

7月7日の学習記録　プロフ編集

データの入力保持について。

 

この条件分岐が全く覚えられない。。。

1a・DBにデータがある場合

　2a・エラーがある場合

　　3a・POSTに入力がある場合

　　　POST情報をリターン

　2b・エラーが無い場合

　　3b・POSTに入力があり、DBと違う場合

　　　POST情報をリターン

　　　それ以外はDB情報をリターン

1b・DBにデータが無い場合

　POST情報をリターン

 

こんな感じのはず。

で、今日勉強したのは、HTMLの表示？の仕方？・・・

inputのname属性にnameと入れた。

実際のDBのカラムはusername。

入力保持の関数の都合上、POST情報を取得するときinputのname属性を取るが、それだとDBのデータをリターンする場合に、DBでnameというカラムは存在しないから、空が返ってくる。なので、inputのname属性をusernameにすることで対応した。

 

こんな感じ。

6月28日の学習記録　スタバなう

初のスタバなうやりました。

以下、メモ。

ulには余計なものがついてた。

トップにはmarginが。

左にはpaddingがそれぞれデフォルトでついてたのかな？

思った通りのレイアウトにならなかったので、

margin: 0;

padding: 0;

で対応。

 

display: flex;なるものを使ってみた。

これが便利すぎる。

中央寄せしたい要素の親要素にdisplay: flex;とalign-items: center;を指定するだけで

上下中央寄せが完成。これはやばい。

 

あとは、サイドバー有りのレイアウトの時に、メインの要素のレイアウトをブラウザのサイズが変わってもなるべく崩れないようにするために、widthにそれぞれ％で値を設定した。これである程度大丈夫。

 

ユーザー情報を取得する関数を作ったが、意外と覚えてる、というか、どうやったらDBからユーザー情報を取得して表示するか、がイメージできたから作れた。

ユーザー情報取得するには？

・DBに接続

　SELECT文を使って、usersテーブルから情報を取得。

・必要な情報を取得

　全カラムを取得した。PDO::FETCH_ASSOCを使用して、連想配列にそれぞれのデータを格納。

・代入する

　取得した情報を用意した変数に格納。

このイメージができたので、サンプルコードを覚えていたというよりは、書き方を想像できたって感じだった。

 

ここまで３時間半。

 

外でやると意外に捗ることがわかった。

今日は平日だが、日曜日がどれくらい騒がしいかによるけど、きてみる価値は大いにある。バッテリーもこれくらいなら持つからモバイルバッテリーとか必要ないね。

 

 

6月24日の学習記録

宿題管理アプリを作ろうと思ってやってるが、DB設計にてつまづいた。

 

学習記録を保存していくのに何が必要なのか。。。

ユーザー名でしょ？学習時間、登録日時。。。

んー、、、日時を登録しておけば、学習時間を月毎に合算して表示とかできそうだし。

 

ただ、どうやって表示させようか、、、

悩むー。。。というか、できなそうーーー。。。

 

激ムズよ。。。

6月17日　バリデーション

今日は会員登録機能を実装。

 

コーディングしていく中で重要な事に気づく。

 

データベース一個も作ってねぇぇぇぇぇ。。。

 

ってことで急遽ユーザーテーブルのみ作成しました。

ここは見ながら。。。

 

その後機能の実装へ。

パスワードの再入力項目がなかったので追加。

 

一番最初のDB接続関数がよく覚えてなかったけど、ここはお決まりパターンなのでコピペ。。。でいいはず。。。

久しぶりにバリデーションやったけど、案外覚えてるもんだ。

なので、機能自体は今日だけで実装完了。

成長を感じてます。。。

明日はバイトなので、少ししか時間取れないから、、、

ログインページでも作るか。機能は後回し。

19時から21時

21時30分から23時

間の30分はドラクエウォーク。

6月16日　transition

昨日のツイートになんと、顧問から直々に引用リツイートが！！！

 

これを見て速攻transitionを調べましたよ。はい。

んで、速攻当てました！！！

 

。。。が。。。思ってたんと違う。。。

確かにふわってなるけど、なんかもう全部ふわってなるやん。。。

なんなら、widthとかpaddingとか、ボタンの形を決める前の要素からふわってボタンが成形されてくやん。。。で、その後はマウスカーソル合わせても変化なし。。。

 

んー。。。

 

ってことで散々実験した結果、:hoverにbox-shadowを当てて、その変化をtransitionでフワッとさせてみました。

少しずつですが、、、

「やべー！難しい！！ちょー楽しいーーー！！」

って感じになってきました。

この思考になったら最強だと思って、これからも闘って生き（行き）ます！！！

 

あと、この場を借りてお礼を。

アドバイス下さったちゃーさん。お時間割いていただき、ありがとうございました！

 

 

19時半から22時半