CSSでの要素の中央寄せ
HTMLコーディングにおいて、要素を中央寄せにしたい場面はよくあります。
モーダルを画面の中央に配置したり、ヘッダーのロゴを左右中央寄せに配置したり、、、。
これまでは、positionやmarginを工夫して使ったり、Flexboxを使って中央寄せにしたりすることが多かったと思います。
実は、Gridレイアウトを使うことによって、より少ないCSSの記述で簡単に要素を中央寄せにすることができます。
Gridレイアウトで要素を中央寄せにする
Gridレイアウトで要素を中央寄せにするとき、中央寄せにする要素が1つか複数かによってCSSの記述が少し違います。
中央寄せにする要素が1つの場合
Gridレイアウトで中央寄せにする要素が1つの場合、2行のCSSで中央寄せにすることができます。
< HTML >
<div class="wrapper">
<p>中央寄せにする要素</p>
</div>< CSS >
.wrapper {
display: grid;
place-content: center;
/* 上下の中央寄せのため、親要素の高さを定義する */
height: 500px;
}中央寄せにする要素が複数の場合
Gridレイアウトで複数の要素中央寄せにする場合は、3行のCSSを記述します。
< HTML >
<div class="wrapper">
<p>中央寄せにする要素1</p>
<p>中央寄せにする要素2</p>
</div>< CSS >
.wrapper {
display: grid;
place-content: center;
place-items: center;
/* 上下の中央寄せのため、親要素の高さを定義する */
height: 500px;
}また、Gridディスプレイは、元々表のような配置を実現するのに適したものでもあります。
そのため、3つ以上の要素を直線ではなくより複雑に配置することも容易です。
例として、2×2の4マスの要素を中央寄せする方法を見てみましょう。
< HTML >
<div class="wrapper">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>< CSS >
.wrapper {
display: grid;
place-content: center;
place-items: center;
/* 1マスを100×100pxとする、2×2の表を表現する。 */
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px;
/* 上下の中央寄せのため、親要素の高さを定義する */
height: 500px;
}Gridレイアウトでの中央寄せを、Flexboxと比較してみる
positionやmarginを駆使して中央寄せにする方法は抜きにしても、Flexboxを使えば比較的少ないCSSの記述で要素を中央寄せに配置することができます。
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}では、使い慣れたFlexboxではなくGridレイアウトを使うべき理由はあるのでしょうか。
Gridレイアウトでの中央寄せとFlexboxでの中央寄せ、それぞれ比較してみましょう。
1つの要素を中央寄せにする場合
1つの要素を中央寄せにする場合には、Gridレイアウトの方が少ないCSSで実装することができるため便利です。
.grid-center {
display: grid;
place-content: center;
}Flexboxの場合、3行のCSSを記述する必要があります。
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}複数の要素を直線的な並びで中央寄せにする場合
複数の要素を直線的な並びで中央寄せにする場合、Gridレイアウト、Flexboxともに3行の記述が必要になります。
比較すると、Gridディスプレイの方が要素の柔軟な並び替えに対応できますが、縦横の変更や逆順への変更についてはFlexboxで簡単に調整することができます。
基本的なHTMLコーディングであれば、Flexboxの方が扱いやすいでしょう。
/* 縦横の変更 */
flex-direction: row;
flex-direction: column;
/* 逆順への変更 */
flex-direction: row-reverse;
flex-direction: column-reverse;複数の要素をより複雑な配置で中央寄せにする場合
直線的ではない、より複雑な配置で中央寄せにしたい場合には、Gridレイアウトが便利です。
Flexboxの場合でも、divのラッパー要素を追加したりすることで再現可能なことが多いですが、デザインの調整のためだけにHTML要素を追加することは好ましくありません。
Gridレイアウトは、最初こそ扱いが難しく感じるかもしれませんが、慣れればとても便利にになるので繰り返し使って身につけましょう。
結論：基本的にはGridレイアウト、直線的並びにはFlexbox
基本的には、中央寄せにはGridレイアウトを使う方が便利なことが多いです。
ナビゲーションなどの直線的な並びの要素を中央寄せにする場合のみ、Flexboxを使うようにすると良いでしょう。
コメント