CSSの真骨頂、Flexboxでレイアウトをする方法を説明します。
Flexboxは、子要素を親要素に対してどのように並べるか指定するCSSであり、親要素に対して２つ(場合によって３つ)のプロパティを指定することで適応できます。
- Flexboxに関するCSSを理解する
- レイアウトを自在に操る
Contents
ウェブページのレイアウトについて
本題に入る前に、読みやすいレイアウトとはどんなものでしょうか？という問いから始めましょう。
ウェブページを見るユーザーの目線の動きは、主に二つに分類されます。
よって、それに合わせたレイアウトを組むと、ユーザビリティに優れた、読みやすいサイトになります。
優れたレイアウトを組むには、優れたウェブサイトを参考にするとよいでしょう。
レイアウトを組むときに考えないといけないことがあります。
- コンテンツの優先順位を考える
- 配置する順番を決定する
- コンテンツの面積を工夫する
それから、実際にCSSのFlexboxやCSSグリッドを使って配置していきましょう。
Flexboxとは
Flexbox(フレックスボックス)とは「Flexble Box Layout Module」の略で、レイアウトを組むためのCSSの機能です。
これを使えば様々なレイアウトを簡単に組むことができるようになります。
適応させる方法は簡単です。
- 親要素のCSSにdisplay: flex;を記述する
- 親要素にflexプロパティを記述する
これだけです。それでは具体的にみていきましょう。
Flexboxを適応させる
まず、Flexboxで並べたい複数の要素を一つの親要素で囲みます。
次に、親要素に対してdisplay: flex;というプロパティと値を指定します。そうすることで、子要素をFlexboxで並べることができるようになります。
しかし、それだけでは適応させることができません。親要素に対してもう一つのプロパティを指定する必要があります。以下の5つのプロパティから一つ選んで追加指定します。
- flex-directionプロパティ
- flex-wrapプロパティ
- justify-contentプロパティ
- align-itemsプロパティ
- align-contentプロパティ
flex-directionでは、子要素を縦か横に並べてい時に指定します。
flex-wrapプロパティでは、子要素を一行、もしくは複数行で並べる時に指定します。
justify-contentは親要素に空きがあった場合、水平方向にどのように並べるのかを指定します。
align-itemsプロパティは親要素に空きスペースがあった場合、子要素を垂直方向にどのように並べるのかを指定します。
align-contentプロパティはflex-wrapで子要素が複数行になった場合、垂直の方向にどのように並べるのかを指定します。
flex-directionプロパティ
子要素を、縦一列、もしくは横一列で並べたいとき、flex-directionを指定します。(directionとは方向の意味)
まずは例を見てみましょう。
See the Pen GRZLLxx by M2RnRT (@m2rnrt) on CodePen.
親要素にcontainerというクラスを付与したdiv要素を設定しました。CSSを見てもらえばわかりますが、display: flex;とflex-direction: column;の二つのプロパティを指定しています。columnだと子要素を縦にまっすぐ並べます。ほかに3つの指定できる値があります。
| 値 | 効果 |
|---|---|
| row(デフォルト) | 子要素を左から右に並べる |
| row-reverse | 子要素を右から左に並べる |
| column | 子要素を上から下に並べる |
| column-reverse | 子要素を下から上に並べる |
| 値 | 効果 |
|---|---|
| nowrap(デフォルト) | 折り返しはしない |
| wrap | 左上から順に並べて、親要素をはみ出るところで折り返す |
| wrap-reverse | 左下から並べて、上側に折り返す（wrapの逆） |
nowrapという値を指定すれば、一列の中に納まるように配備されます。
wrapかwrap-reverseを指定すれば、ちょうどよいところで折り返しをしてくれます。
justify-contentプロパティ
子要素を水平方向一列で並べた時に、親要素に空きスペースがあった場合に使用します。
例を見てみましょう。
See the Pen gOrJzQe by M2RnRT (@m2rnrt) on CodePen.
この例では、justify-contentプロパティに対して、space-betweenという値を指定しています。これは、最初と最後の子要素を両端に配置し、残りの要素の配置はその間に均等間隔にします。ほかにも指定できる値があるので、以下に紹介します。
| 値 | 効果 |
|---|---|
| flex-start(デフォルト) | 左側に揃えて配置 |
| flex-end | 右側に揃えて配置 |
| center | 中央に揃えて配置 |
| space-between | 右端と左端の子要素を両端に配置して、残りは等間隔でその間に配置する |
| space-around | 全ての子要素を等間隔で配置する |
align-itemsプロパティ
親要素に空きスペースがあった場合、縦方向のどの位置に配置するかをalign-itemsプロパティで指定します。
まず、以下の例を見てください。
See the Pen YzqbRLz by M2RnRT (@m2rnrt) on CodePen.
align-itemプロパティに対して、centerという値が指定されています。これは、親要素の高さに対して、真ん中の位置に子要素を並べるということを指定しているのです。
このほかにも指定できる値があるので、以下に紹介します。
| 値 | 効果 |
|---|---|
| stretch(デフォルト) | 親要素の高さに合わせて広げて配置 |
| flex-start | 親要素の上の部分から配置 |
| flex-end | 親要素の下の部分から開始 |
| center | 親要素に対して真ん中の位置に配置 |
| baseline | ベースラインでそろえる |
align-contentプロパティ
さいごに、子要素が複数行になった時の配置プロパティであるalign-contentについて紹介します。
子要素が多く、複数行になった時に縦のスペースをどのように使うのかに関するプロパティです。まずは例をご覧ください。
See the Pen BaKeMzv by M2RnRT (@m2rnrt) on CodePen.
align-contentプロパティに対して、space-aroundという値が設定されています。そうすると、縦のラインで均等に空間が埋まるように配置されます。他に適応できる値は以下の通りです。
| 値 | 効果 |
|---|---|
| stretch(デフォルト) | 親要素の高さに合わせて広がる |
| flex-start | 上から下にそろうように配置 |
| flex-end | 下から上にそろうように配置 |
| center | 中央に配置 |
| space-between | 最初と最後の行を上下の端に配置し、残りは均等間隔で配置 |
| space-around | 均等に間隔をあけて配置 |
さいごに
いかがだったでしょうか？Flexboxの便利さが伝わりましたでしょうか。
実は、以前はfloatというプロパティで、子要素の並びは指定されていました。しかし、圧倒的に高機能なFlexboxが現在は主流になっています。
子要素を並べるFlexboxですが、「並ぶ」と聞くと中学生の頃を思い出します。中1の時は背の順で最前列でした。しかし3年間で30センチ伸びて、一気に後ろまで下がったことを覚えています。
そんな感じで、プログラミングも精進していきたいものです。
