ならべ方をあやつる

HTML の要素は、何も指定しなければ上から下へ縦に積まれていく。でも作りたい画面は、たいてい横に並んでいる。ヘッダーのロゴとメニュー、商品カードの一覧、ボタンが2つ並んだ確認画面。

この「横に並べる」を、昔の CSS はうまく扱えなかった。回り込みの指定を流用したり、表示形式を切り替えたりと、本来そのためではない機能を組み合わせてしのいでいた。当然、思ったとおりにいかないことが多かった。

Flexbox は、並べることそのもののために作られた仕組みだよ。いまのレイアウトはこれが主役だ。この章で覚えるのは、たったひとつの考え方に集約される。並べる「親」に指示を出すと、中の「子」がその通りに並ぶ。

親に「横に並べて」と書けば、中身が横一列になる。「間隔を均等に空けて」と書けば、そのように配ります。ひとつひとつの子に位置を指定して回るのではなく、まとめ役に方針を伝えるという形だ。これが Flexbox の発想の中心だよ。

できることは大きく4つある。

• 向きを決める — 横に並べるか、縦に積むか
• 主方向のそろえ方 — 左寄せ、中央、両端に散らす、均等に配る
• 交差方向のそろえ方 — 高さの違うものを上ぞろえにするか、中央にそろえるか
• 折り返し — 入りきらないときに次の行へ送るか、押しつぶすか

とくに便利なのが中央ぞろえだ。「上下左右のど真ん中に置く」は、昔の CSS では地味に面倒だった。Flexbox なら2行で済む。

折り返しはスマホ対応で効いてくる。横に3つ並べたカードが、画面が狭いときには自動で2列、1列と落ちていく。メディアクエリを書かなくても、入りきらなければ勝手に折り返してくれるからだよ。前の章で学んだ切り替えと組み合わせると、少ないコードで広い幅に対応できる。

もうひとつ、余った幅の分け方も扱う。3つ並べたうち、真ん中だけを広くしたい。そういう指定が子の側でできる。ヘッダーで「ロゴは左、メニューは右、あいだは空ける」を作るときによく使う形だよ。

要素どうしのすきまの空け方も覚えておこう。並べたものの間隔は、専用の指定でまとめて空けられる。ひとつずつ外側の余白をつけて回ると、端の要素だけ余分な余白が残ってしまう。まとめ役に「間隔はこれだけ」と伝えるほうが、ずっと素直だよ。

つまずきやすいのは、指示を出す相手をまちがえることだ。並べる指定は「並べたい要素そのもの」ではなく「それらを囲んでいる親」に書く。カードを横に並べたいなら、カードにではなく、カードを包んでいる箱に書く。効かないときは、まずどこに書いたかを確かめてみよう。

もうひとつ、縦にそろえる指定と横にそろえる指定は、向きによって入れかわる。横に並べているときは片方が左右、もう片方が上下を担当し、縦に積むと逆になる。ここは頭で覚えるより、実際に向きを切り替えて動かしてみるのが早いよ。

Flexbox が使えるようになると、レイアウトで詰まる時間が激減する。ここまでの章で覚えた余白や装飾と組み合わせれば、見たことのある形の画面はだいたい作れるようになるはずだよ。

なお、並べ方の仕組みには Flexbox のほかにもうひとつ、格子状に配置するものがある。行と列の両方をきっちりそろえたいときはそちらが向いているけれど、まずは Flexbox を手になじませよう。日々書くレイアウトの大半はこれで足りるよ。

これで HTML & CSS コースは最後の章になる。JavaScript で動きを、HTML と CSS で見た目を作れるようになったので、次は自分のパソコンで小さなアプリを作ってみる番だ。ここまでで手に入れたものは、そのまま実戦で使えるよ。