floatでdivを横並びにする方法などを理解した話！
昨日よくわからなくなってしまっていたfloatのことが理解できたので、図にしてみた。
雲に乗ると、2つの性質が現れる。
①浮いているので、左右に自由に動けるようになる
②元いた場所（地面？）は空白になるので、その分後ろの要素が詰めてこようとする。
それを踏まえて、Bの状態を作るにはどんなコードになるのかというと…
▼HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>091702</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>▼CSS
@charset "UTF-8";
.box1 {
width: 100px;
height: 100px;
background-color: #F7DDDB;
}
.box2 {
float: right;
width: 100px;
height: 100px;
background-color: #B7D8E5;
}
.box3 {
width: 100px;
height: 100px;
background-color: #FEB144;
}▼こうなる。
で、ややこしいのが、この黄色のbox3に詰めてこないでほしいときにどうすればいいかってことなんだけど、それを表したのが最初の画像のCの状態。
水色の「clearfixバリア」っていうのをつくる。
説明はあとにして、バリアを作るコードを書いてみる。
▼HTML
<body>
<div class="box1">box1</div>
<div class="clearfix">
<div class="box2">box2</div>
</div>
<div class="box3">box3</div>
</body>▼CSS
@charset "UTF-8";
.clearfix::after {
content: "";
display: block;
clear: both;
}
.box1 {
width: 100px;
height: 100px;
background-color: #F7DDDB;
}
.box2 {
float: right;
width: 100px;
height: 100px;
background-color: #B7D8E5;
}
.box3 {
width: 100px;
height: 100px;
background-color: #FEB144;
}▼こうなる。
…ひとつずつ説明しよう。
まず「？」ってなるのは、CSSのここだよね多分。
.clearfix::after {
content: "";
display: block;
clear: both;
}「.clearfix::after」は「classfixというクラス名のところの後に、こんな性質をつけてください。」という意味。
ちなみに「::after」は疑似要素と呼ばれるもの。調べてみて。個人的には「疑似」なんてネーミングは、実際の性質にマッチしてなくて理解しづらくしてる要因だなと思う。けどまあ、そういう名前だから仕方ない。
次に「content: "";」は「この条件の時に空欄をつくってください」ってこと。例えば「content:”★”」ってすると、「この条件の時に★マークをつけてください」って意味になる。今回はそこが空欄になっているので、「空欄をつくってください」ってこと。
それから「display: block;」は「これをブロック要素にしてください」ってこと。
要素には大きく2種類「ブロック要素」と「インライン要素」がある。ブロック要素は、高さとかも指定できる結構自由のきく要素。インライン要素は、高さなんかは指定できない、あまり自由のきかない要素。
まあそのあたりは他のサイトを参考にしてみてください。
まあだからつまり、「display: block;」は「これを自由のきく形にしてください」って意味だと思っておけば、とりあえずはOK。
で、最後「clear: both;」は「すべての回り込みを解除してください」ってこと。
回り込みって何かというと、あの、黄色のbox3が詰めてこようとするあの現象。あの詰めてくるやつを、みんなは「回り込み」っていう。
これらを総合してみると、
.clearfix::after {
content: "";
display: block;
clear: both;
}っていうのはつまり
「clearfixというクラス名のところの後に、空欄を作ってください。空欄は事由のきくブロック要素にしてください。空欄のあとは、回り込みを全部解除してください」
となる。
で、やっとHTMLの出番。
<body>
<div class="box1">box1</div>
<div class="clearfix">
<div class="box2">box2</div>
</div>
<div class="box3">box3</div>
</body>その「clearfix」ってので、box2が囲まれている。
これは要するに「box2の後に、clearfixバリアをつくってください！」ということだ。
これでCの状態が完成するんだけど…この説明でわかるかな。
いやわかるかなっていうのは、私自身が見返したときにわかるかなってことなんだけど。
うーん、やっぱり物の説明が苦手だなあ。
ちなみに、ここまで説明しておいてなんなんだけど、floatっていうのは横並びの方法として今はあまりメジャーじゃないみたい。昔はよく使ってたみたいだけど。
回り込みとかが複雑すぎて、よくわかんないものね。レイアウト崩れやミスの原因になりがちだから、あまり使わないようにしているんだって。
かわりに登場したのが「display: flex;」ってやつ。こっちの方が便利でわかりやすいから、私たちがサイトを作るときはこっちを使った方が良い。
「じゃあなんのために私たちはこれを勉強してるんですか。いつ使ったらいいんですか」って訓練校の先生に聞いたら、
「昔のサイトにはfloatはよく使われていたからね。君たちが働くようになって、過去に誰かが作ったサイトの修正を任されたときに、floatができてないと修正もできないでしょう」って。
なるほどね。
確かにSEの友達からも「言語はどんどん新しくなるから、勉強が大変」ときいていたけど、こういうことなのね。
新しいことも勉強しなきゃいけないけど、昔のやり方も知っておかなきゃいけない。
大変だなあ。
がんばろう。
この記事が気に入ったらサポートをしてみませんか？