Flexboxによる横並び
今回のテーマ
CSSで横並びにする方法は、前回紹介したfloat以外にもあります。今回はFlexboxを用いて以下の図を目標物として作成していきます。
Flexbox適用前
親要素にcontentsクラスを指定し、子要素にそれぞれleft、center、rightの3つのクラスを指定しました。
<html> <head> <meta charset="utf-8"> <title>flex-box</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="contents"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> </body> </html>
html, body { height: 100%; margin: 0; padding: 0; } .contents { background-color: lightgrey; height: 100%; width: 100%; font-size: 30px; color: white; text-align: center; } .left { background-color: blue; height: 50%; width: 25%; } .center { background-color: red; height: 50%; width: 25%; } .right { background-color: green; height: 50%; width: 25%; }
子要素のheightを50%に指定してるのでrightが画面外になっていますが、きちんと存在しています。
Flexbox適用
子要素を横並びにするために、displayプロパティ、値はflexとして親要素に適用します。floatは横並びにしたいものに対して適用していましたが、Flexboxではその親要素にdisplayプロパティを適用するのが注意点です。この横並びにする機能の総称をFlexboxと呼びます。
以降は親要素のみのCSSを記載します。
.contents { background-color: lightgrey; height: 100%; width: 100%; font-size: 30px; color: white; text-align: center; display: flex; }
上図のように横並びにすることができました!しかし各要素がくっついており、目標物とは少し違います。そこで次に横並びの種類を指定します。
横並びの種類
こちらも親要素に対して、justify-contentプロパティ、値はspace-aroundを適用します。
.contents { background-color: lightgrey; height: 100%; width: 100%; font-size: 30px; color: white; text-align: center; display: flex; justify-content: space-around; }
目標物と同じになりました!
今回用いたspace-aroundは、両端の隙間:各要素間の隙間=1:2にレイアウトを変えてくれます。他には、左寄せのflex-start、右寄せのflex-end、中央寄せのcenter、また今回の目標物の両端を空けずに各要素を等間隔にするspace-betweenなどがあります。
以上、Flexboxについての説明でした!
floatプロパティで要素を横並びにした際にデザインが崩れる現象について
初めまして
初めまして、DKと申します!
プログラミング初学者ですがアウトプットの一つとして、学んだことを当ブログにて投稿していきたいと思います。
間違いやアドバイス等がありましたらご指摘いただけると幸いです。
よろしくお願いします!
今回のテーマ
今回はCSSのfloatプロパティで要素を横並びにした際に、デザインが崩れる現象の解決方法についてです。HTML/CSSの初学者が初めて直面する、イメージ通りにならない場面かと思います。
以下のデザインを目標に作成します。
1. float適用前
HTMLのソースコードは以下の通りです。横並びにする要素をそれぞれ、left-contentクラスとright-contentクラスとし、その親要素をcontentsクラスとします。(bodyタグ内のみの記述)
<body> <header></header> <main> <div class="contents"> <div class="left-content"> </div> <div class="right-content"> </div> </div> </main> <footer></footer> </body>
その後、CSSにheaderとfooter及びmainタグ内のクラスに適当に色付けをし、以下のデザインにしました。
2. float適用後
CSSにfloatプロパティを適用します。(floatプロパティのみ記述)
.left-content { float: left; } .right-content { float: right; }
するとこうなります。イメージと違いますよね?left-contentとright-contentは横並びになりましたが、それらの親要素であるcontentsが消えてしまいました。さらに、footerはheaderの真下にまでせり上がってきています。一体全体どういうことでしょう。
これは、floatという英語を日本語にすると理解しやすくなると思います。floatは日本語だと"浮く"という意味になります。CSSでは単純に横並びにするプロパティとして学習するかもしれませんが、実際は、浮くから横並びになるのです。
もう一度先ほどの結果を見てみましょう。この現象について順を辿るとこうなります。
- left-contentとright-contentがfloatプロパティによって浮き、左右に分かれた後にheaderにぶつかる。
- 親要素のcontentsは子要素が浮いたことにより高さを失い縮んでしまう。
- contentsが縮んだことにより、その下のfooterが上がってくる。
というイメージになります。
地球に住む私たちは、下方向(地面)に重力がありますが、HTML上には左上に重力のようなものがあると思ってください。その為に自分の上にあった要素が無くなるとせり上がってきてしまうのです。
clearfixの適用
この問題を解決するにはclearfixを適用します。デザインを固定したいものに適用するので、今回は親要素のcontentsに対して用います。ちなみに、fixには"固定する"という意味があるのでこれも覚えておくと記憶に定着しやすいですね。
まず、HTMLファイルのcontentsにclearfixクラスを付与します。
<body> <header></header> <main> <div class="contents clearfix"> <div class="left-content"> </div> <div class="right-content"> </div> </div> </main> <footer></footer> </body>
次にCSSファイルにclearfixセレクタを追加して、以下のようにプロパティを記述します。
.left-content { float: left; } .right-content { float: right; } .clearfix::after { content: ""; clear: both; display: block; }
すると、完成系と同じになりました!
それぞれの意味についてですが、
- ::after
clearfixのクラス名を付けた要素の直後に擬似要素を追加
- content: "";
その擬似要素に任意の文字などを挿入できるが、今回は空に
- clear: both;
floatによって消えてしまう高さを正常に
bothとすることが一般的
- display: block;
追加された擬似要素をブロック要素に
個人的な理解の仕方としては、
”親要素contentsの直後に(::after)、ブロック要素の擬似要素を追加することで(display: block;)、下のfooterが上がってくるのを防いでいる。親要素contents自身はclear: both;によって正常な高さを維持している。”
と覚えています。content: "";はいらないのではと思うかもしれませんが、記述が無いデザインは修正されません。.clearfix::afterのafter部分にはbeforeとも記述できますが、この場合も修正されません。contentsの前に擬似要素を入れても意味がないからだと思います。
おわりに
今回の説明は以上になります!
初めての投稿どうだったでしょうか。頭の中では理解していたつもりでも、文字に起こすことで理解度が中途半端なものだなと感じることができました。週末にはこのような形でアウトプットを積極的に行なっていきたいと思います!!