CSSレイアウト実践：FlexboxとGridでナビゲーションとカードを配置する
Flexboxでナビゲーション、Gridでカードを配置。gap、minmax、auto-fitを比較し、HTMLの読み順を保ったレイアウトを作ります。
第6回では、縦に並ぶページへ横方向の配置を導入します。ナビゲーションにはFlexbox、学習カードにはGridを使います。どちらか一方で全体を作ろうとせず、並べたい内容と揃え方から選べるようになることが目標です。
FlexboxとGridの得意分野
1方向に並べるFlexbox
Flexboxは、行または列という主軸を中心に、要素を並べたり余白を分配したりします。サイト名とナビゲーションのような、サイズの異なる要素を1方向に並べる用途に向いています。display: flexを指定した要素の直接の子がflexアイテムになります。
justify-contentは主軸方向、align-itemsは交差軸方向の揃え方です。flex-directionを変えると軸も変わるため、常に「前者は横、後者は縦」と覚えないようにします。flex-wrap: wrapは1行に入りきらない項目の折り返しを許可します。
行と列を作るGrid
Gridは列と行を定義して配置します。今回は3枚のカードの列幅を揃えたいので、grid-template-columnsを使います。gapで列・行間の余白を指定できるため、各カードに左右のmarginを付けて調整する必要はありません。
repeat(3, minmax(0, 1fr))は、余白を除いた利用可能な幅を3列へ配分します。最小幅を0にすることで内容由来の最小幅に引っ張られにくくなりますが、長いURLなどの内容自体が折り返されなければ、別途対策が必要です。
ページにレイアウトを適用する
追加するCSS
第5回までのstyles.cssの末尾に次を追加します。HTMLは第3回から共通のものを使います。
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
nav { display: flex; flex-wrap: wrap; gap: 20px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card + .card { margin-top: 0; }
.hero-grid, .about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }古い余白の指定を調整する
前回は.card + .cardで2枚目以降に上のmarginを付けていました。Gridのgapへ役割を移すため、この回ではそのmarginを0にしています。この変更がないと、2枚目以降だけ位置がずれます。「配置方法を変えたら、前の方法で作った余白も点検する」という習慣を付けてください。
内容の順番を保ちながら配置する
HTMLの順序を先に整える
GridやFlexboxを使うと視覚上の順序を変更できますが、キーボードで移動する順序や読み上げ順まで同じように変わるとは限りません。今回はHTMLの順序をそのまま左から右、上から下へ表示します。見た目だけを都合よく並べ替える前に、文書の順序が適切か見直しましょう。
positionは用途を絞る
ページ全体をposition: absoluteと座標で配置すると、文章が増えたときや画面幅が変わったときに重なりやすくなります。通常の流れで並べられる内容はFlexbox/Gridを使い、絶対配置はアイコンの重ね合わせなど、基準が明確な部分に限定します。
応用：内容に応じた列数を考える
auto-fitとminmaxの例
列数を固定せず、入る数だけカードを並べたい場合は次のような設計もできます。比較用に.cardsの列指定を置き換えて確認し、連載を続けるときはこの回の完成コードへ戻してください。
.cards {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}この例では各列を原則16rem以上にし、親がそれより狭いときは100%まで縮めます。カードの内容が長い場合や文字を拡大した場合も確認します。列数を自動化しても、読みやすい文字サイズや余白の設計は必要です。
確認と練習
広い画面で確認する
この回の完成版は、広い画面で3列のカードと2列の紹介部分になることを目標にしています。小さな画面では3列が狭くなるため、次回にモバイル向けの1列配置と切り替え条件を導入します。
カードを4枚に増やす
HTMLのカードを1枚複製し、題名を変えて表示を確認します。3列指定なら4枚目が次の行へ回ります。gapを16pxと32pxで比較し、カード間の距離と文字の読みやすさを観察してください。列数だけでなく、内容が増えても崩れないかを考えます。
参考資料
この回の完成版と学習の続き
第6回の見本をブラウザーで開く · 第6回の完成コードをダウンロード
ZIPを展開してindex.htmlを開けば、この回の完成時点から試せます。コードを変更する場合は、ZIP内のファイルをテキストエディターで編集して保存してください。