HTML/CSSを勉強していて、個人的にかなり混乱したのが「真ん中寄せ」です。
サイトを作っていると、
- 文字を真ん中にしたい
- 箱そのものを真ん中にしたい
- Flexboxで要素を真ん中にしたい
など、いろいろな場面が出てきます。
そして調べてみると、
text-align: center;
margin: 0 auto;
justify-content: center;
align-items: center;
など、似たような「center」がたくさん出てきます。
最初は違いがよく分からず、とりあえずいろいろ試して、真ん中に寄れば「できた！」という感じでした。
今回は、実際に架空サイトを作る中でつまずいた経験をもとに、それぞれの違いを整理してみます。
① text-align: center
まずは、
text-align: center;
です。
これは、要素の中にある文字などを中央に揃えるための指定です。
例えば、
p {
text-align: center;
}
とすると、p要素そのものが移動するのではなく、pの中にある文字が中央に揃います。
イメージとしては、
┌────────────────────────┐
│ こんにちは！ │
└────────────────────────┘
という感じです。
ここで最初に私は、
「pタグを真ん中に寄せるもの」
だと思っていました。
でも、正確にはpタグの中身を中央に揃えるものでした。
しかも私はpタグをインライン要素だと間違って覚えており・・・
p要素はもともとブロック要素なのに
「inline要素だからtext-alignが効かないのでblockにしよう～」
とかやってました。分かっているようで分かっていなかった部分です。
ポイント
text-align: center
→ 中の文字などを中央に揃える
と覚えておくと分かりやすそうです。
② margin: 0 auto
次は、
margin: 0 auto;
です。
例えば、
.box {
width: 500px;
margin: 0 auto;
}
とします。
これは、横幅500pxの.boxそのものを左右中央に配置するイメージです。
0 autoって何？
marginは、要素の外側の余白を指定するプロパティです。
margin: 0 auto;
の場合、
上：0
右：auto
下：0
左：auto
という指定になります。
autoにすることで、左右に余っているスペースをブラウザが調整して、左右が均等になるため、結果として中央に配置されます。
イメージすると、
← 余白 → [ 500pxの箱 ] ← 余白 →
という状態です。
ポイント
margin: 0 auto;
→ 要素そのものを左右中央に配置する
と考えると分かりやすいです。
③ justify-content: center
次はFlexboxです。
.container {
display: flex;
justify-content: center;
}
justify-contentは、Flexboxの主軸方向に子要素を配置するための指定です。
ここが最初は少し難しかったところです。
display: flex;にすると、初期状態では、
flex-direction: row;
になっています。
つまり、主軸は横方向です。
主軸 → → → → →
そのため、
justify-content: center;
とすると、主軸である横方向の中央に子要素が配置されます。
┌────────────────────────────┐
│ [ BOX ] │
└────────────────────────────┘
flex-direction: columnにすると？
ここが重要です。
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
columnにすると、Flexboxの主軸が縦方向になります。
主軸
↓
↓
↓
そのため、
justify-content: center;
は、今度は縦方向の中央に要素を配置します。
つまり、
row
→ justify-content = 横方向
column
→ justify-content = 縦方向
となります。
ポイント
justify-content
→ Flexboxの主軸方向に揃える
これが一番大事なポイントです。
④ align-items: center
もう一つ、Flexboxでよく使うのが、
align-items: center;
です。
これもFlexboxの配置に関係していますが、justify-contentとは見る方向が違います。
align-itemsは、Flexboxの交差軸方向に子要素を揃える指定です。
例えば、初期状態のrowでは、
主軸 → → → → →
交差軸
↓
↓
となります。
そのため、
.container {
display: flex;
align-items: center;
}
とすると、縦方向の中央に揃えることができます。
rowとcolumnで整理してみる
ここは最初かなり混乱したので、表にしてみました。
flex-direction | 主軸 | justify-content | align-items |
|---|---|---|---|
row | 横方向 | 横方向 | 縦方向 |
column | 縦方向 | 縦方向 | 横方向 |
つまり、
rowの場合
flex-direction: row;
justify-content: center;
→ 横方向の中央
align-items: center;
→ 縦方向の中央
columnの場合
flex-direction: column;
justify-content: center;
→ 縦方向の中央
align-items: center;
→ 横方向の中央
4つを比較してみる
ここまでをまとめると、
| CSS | 何を中央にする？ |
|---|---|
text-align: center | 中の文字などを中央に揃える |
margin: 0 auto | 要素そのものを左右中央に配置する |
justify-content: center | Flexboxの主軸方向の中央に配置する |
align-items: center | Flexboxの交差軸方向の中央に揃える |
「全部centerだから、とりあえず使えばいい」というわけではなく、何を中央にしたいのかを考えることが大切だと分かりました。
実際のサイト制作でつまずいたこと
架空サイトを作っているとき、何度も「真ん中に寄せたいのに寄らない！」ということがありました。
最初の頃は、
「centerにすれば真ん中になるはずなのに……」
と思って、いろいろな指定を試していました。
例えば、
text-align: center;
を使ってみたり、
margin: 0 auto;
にしてみたり、
justify-content: center;
を追加してみたり。
でも、思ったように動かないことも多かったです。
今振り返ると、そもそも「何を中央にしたいのか」や「その要素がFlexboxの子要素なのか」などを考えずに、指定を試していたことが原因でした。
作って終わりではなく、振り返って整理する
今回の勉強で感じたことがあります。
最初は、
display: block;
や
display: flex;
の意味もよく分からず、とにかくコードを書いて、うまく中央に寄れば「成功」という感じでした。
でも、実際にサイトを作っていると、
「これってどういう意味なんだろう？」
「似たような指定がいっぱいあるけど、何が違うんだろう？」
という疑問が出てきます。
そこで、実際に自分がつまずいたところを思い出して、もう一度調べて整理してみる。
そうすると、ただコードを書いていたときよりも、少しずつ意味が分かるようになってきました。
作って終わりではなく、分からなかったことを思い出してまとめる。
この作業そのものが、理解を深める勉強になるんだなと感じています。
まとめ
今回は、HTML/CSSでよく使う「真ん中寄せ」の方法を整理しました。
text-align: center→ 中の文字などを中央に揃えるmargin: 0 auto→ 要素そのものを左右中央に配置するjustify-content: center→ Flexboxの主軸方向に中央配置するalign-items: center→ Flexboxの交差軸方向に中央配置する
特にFlexboxでは、rowとcolumnによって主軸の方向が変わるため、justify-contentとalign-itemsの動きも変わります。
以前は「真ん中にしたいからcenter！」という感じでしたが、これからは、
「何を中央にしたい？」
「どの要素に指定している？」
「Flexboxなら主軸はどっち？」
と考えてからCSSを書くようにしたいと思います。
次は、架空サイト制作でもよく使ったpositionについて整理していきます。
