6月12日の学習記録
初のアウトプットをTwitterで披露し、色んな方々からコメントを頂きました。
ありがとうございました。
で、その中で、今回のはフルスクラッチで作ったわけですが、当の本人、それを理解しておらず、顧問に突っ込まれてしまいました。
いや、教えてるじゃん、、
— かずきち@ブロガーエンジニア (@kazukichi_it) 2022年6月12日
何を見ていたんだい、、 https://t.co/PwnQPc5V7t
顧問、すいませんでした。
この程度をスクラッチで作ったとは言えないと思っておりました。
さて、本日から2個目のアウトプット。
ほぼ見ずにやってやろうかと思ってますが、かなり時間かかりそう。
まず恒例（？）のCSSでつまずく。。。
ヘッダーメニューを作る時、必ずやる、、、。
タイトルをh1で作って、ulでメニューを作る。
タイトルは左寄せ。メニューは右寄せ。
これが上手くいかない！！
で、結局、h1にdisplay: block;とposition: absolute;を入れたらできた。
入れないと、h1の要素が横幅いっぱいになってしまって、メニューを横並びにできなかった。
次の問題はulタグに謎のmarginが・・・
よくみたらliタグにfloat使ってた。だから、ulタグにoverflow: hidden;いれないとダメなのに気づけた。
その後、marginが無事に上下に割り振られたので、０にして消した。
そしてようやく、その親要素にline-heightを設定して、中央にした。
あとは、最初から切り出せるものは切り出しておく。ヘッダーとか。
サンプルを見ずにやるのは難しいけど、これが一番力つくのが良くわかる。
そして、何がわからなくて、どうしたらできるようになったのかをこうしてメモするのも良い。絶対忘れる。それを今まさに実感してる。
今日はここまで。
結局ヘッダー部分しかできんかった。。。
21時から23時
