CSSがっ！ わからない！
やったこと
HTMLパートでは１時間で30ページほど進んでいましたが、CSSパートに入ってからはめっきりです。
今日も２時間やりましたが、１時間で10ページほどしか進んでいない……。
でも、一応サイトを形作るところまでは終わりました！
目に見えて形になるのを見ると楽しいですね～。
つまづいたところ
displayプロパティ
display: inline; でインラインレベル要素として表示させる。
display: block; でブロックレベル要素として表示させる。
解説を読むとわかったような。わからないような。ふーんなるほど。ふーん。うん。 ん？
ってなります。なんでわかっていないかわかっていない模様。
なんかブロックとボックスがごっちゃになるんだよねー。
floatプロパティ
予期せぬ方向に飛ぶボックス
ふむふむ。floatはこういう働きをするのね。float: left; で左上に、float: right;で右上にいくのね。
ならここをこう、あっちをこう書いたらこんな風になるはず……と色々書き換えてみるのですが、予期していたところとは別のところにボックスはふっ飛びます。
ついで割り込んでくるその次の要素とか。
お前っっ！ なんでこっちくるのっ！！
全然手に負えない。扱えてない。
floatの解除がわからない
floatの解除の方法はいくつかあり、テキストではoverflowかclearで解除するとあります。
いくつかあるのの使い分けがまだピンときていません。
どういう時ならoverflowでこういう時ならclearとかあるんでしょうか。
「overflowが親ボックス、clearが次のボックス」と自分でメモっているけどもはやなんでそう思ったかも謎。
overflowプロパティは、はみでた要素を非表示にさせるプロパティってあるのに、なんでそれがfloatの解除に繋がるのかわかりません。
zoomの説明とかも、本来の目的の使い方じゃないけど、ここにこう書くと解除されるから書いてるよ！ みたく記述があって。どういうことだ。
ネットで調べるとそもそもfloatはもう古いとかもあって、じゃぁボックスを横並びにしたい時はどうしたらいいのよと。（flexboxというのがあるらしい）
※私が持っているのは第１版の方なので、新しい２版の方ではfloat記述変わっているかもしれません
自分が０からCSSを書いていた時、「さーてfloat解除するぞー！」って思った時に、どういう理論でどの方法をチョイスすればいいかがまったくわからない。
今そんな感じ。
コメント