久しぶりのブログ更新

今隙間時間なので久々にブログ更新

お正月には備忘録もう少しまとめる予定。

今やってることとはだいぶ違うけど、備忘録の最初の方を消化したいのでまたHTMLについて。

float は三次元で考える。並び順も同時指定している。ってとこは前と同じなんだけど、css側の記述について補足しとく。

clearfix: :after{

content: "";

display: block;

clear: both;

}

まぁだいぶ前になっちゃってうろ覚えなんだけど

まず: :は擬似要素の時に出てくるもんだったと思う。afterっていう場所がもともとあるわけで無くて、なんかがあって初めてafterがあるわけだから擬似的な要素だよねっと

そしてcontent:""; display:block;だけど空のブロックの要素を作ってるわけなんだけど、なんでわざわざこんな事してるかっていうと、clear:left;ならそこより前の部分にfloat:left;がないか探して解除するっていうことだから、clearfix宣言したところの直後に空の要素作って、それより前の部分のfloatをclearする(からclearfix宣言してた部分の子要素の回り込み解除できる)、みたいな回りくどいしてるって事だったと思う。

まぁ、素直に子要素は横並べねって言ってくれる上にCSSで完結するdisplay:flex; justify-content:;の方が使いやすいっていう結論は変わらないけど、分かってないよりかは分かった方がいいので。ちなみにdisplay:flex;の初期値はrow。row-reverseやらcolumnやらで並び順も変えられるし、画面に応じてフレキシブルに大きさを変えてくれるところも良いところ。

 

ちなみにfloatのclearの話に戻るけど、解除する場所によっては並び順だけ解除とかにもなったりするけど、それは割愛、あんまりfloat使う気ないし