スラスラわかるHTML&CSSのきほん<勉強ログ2>

勉強

CSSがっ! わからない! 

 

 

スポンサーリンク

やったこと

created by Rinker
¥2,178 (2024/03/29 02:22:03時点 楽天市場調べ-詳細)

HTMLパートでは1時間で30ページほど進んでいましたが、CSSパートに入ってからはめっきりです。

今日も2時間やりましたが、1時間で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というのがあるらしい)

 

※私が持っているのは第1版の方なので、新しい2版の方ではfloat記述変わっているかもしれません

 

自分が0からCSSを書いていた時、「さーてfloat解除するぞー!」って思った時に、どういう理論でどの方法をチョイスすればいいかがまったくわからない。

 

 

 

今そんな感じ。

コメント

タイトルとURLをコピーしました