リストを「ただ並べる」のは卒業！CSS Gridで美しく整列させる魔法のテクニック
Webサイトを作っていると、必ずと言っていいほどお世話になるのが「リスト（`ul`, `ol`, `li`）」です。メニューを作ったり、商品一覧を並べたり。
でも、こんな悩みはありませんか？
「リストを横に並べたいけど、`float`は古いって聞くし、`flexbox`だと改行した時の調整がちょっと面倒……」
そんなあなたにこそ試してほしいのが、CSS Gridという強力な助っ人です。今日は、リストをきれいにグリッド状に並べるための「ちょっとしたコツ」を、初心者の方にも分かりやすくお話ししますね。
—
なぜ「リスト」と「Grid」の相性がいいの？
想像してみてください。あなたは今、スーパーの陳列棚を整理しています。
`ul`や`ol`といったリストタグは、いわば「商品が入ったカゴ」のようなもの。その中に並んでいる`li`は「商品そのもの」ですね。
これまでは、このカゴの中身を横に並べるのに苦労していましたが、CSS Gridを使えば「棚のマス目（グリッド）」を先に決めて、そこにポンポンと商品を置いていくだけで済むんです。これ、すごく直感的だと思いませんか？
—
実際にやってみよう！基本のグリッド配置
まずは、3列のきれいなグリッドを作ってみましょう。ここでのポイントは、親要素（`ul`）に「ここをグリッドにします！」と宣言することです。
.item-list {
/ リストの黒点（マーカー）を消して、余白をリセットします /
list-style: none;
padding: 0;
/ これが魔法の呪文！親要素をグリッド化します /
display: grid;
/ 3列のグリッドを作ります。「1fr」は「空きスペースを均等に分ける」という意味です /
grid-template-columns: repeat(3, 1fr);
/ アイテム同士の隙間を16px空けます。これだけで見た目がグッとプロっぽくなります /
gap: 16px;
}
たったこれだけです。`flexbox`のように「要素同士の余白をどう計算しよう……」と悩む必要はありません。`gap`プロパティを使えば、隙間はCSSにお任せです！
—
つまずきポイント：「マーカー」はどうする？
初心者の皆さんがよく困るのが「`ul`の黒い点（マーカー）が残っちゃう！」という問題です。
先ほどのコードで `list-style: none;` を入れたのはそのためなのですが、「せっかくのリストだから、アイコンを可愛く表示したいな」という場合もありますよね。
そんな時は、`li`の疑似要素（`::before`）を使うのが、今のWeb制作のトレンドです。
.item-list li {
position: relative;
padding-left: 20px; / アイコン用のスペースを確保 /
}
.item-list li::before {
content: “★”; / ここに好きなアイコンや数字を入れられます /
position: absolute;
left: 0;
color: #ff9900;
}
こうすることで、グリッドの配置を崩さずに、自分好みのマーカーを自由自在にデザインできるんですよ。
—
レスポンシブ対応も「一行」で解決！
スマホで見ると3列じゃ狭すぎる……そんな時も、CSS Gridなら怖くありません。メディアクエリを使って、画面幅に応じて列数を変えてみましょう。
/ 画面幅が600px以下になったら、1列にする /
@media (max-width: 600px) {
.item-list {
grid-template-columns: 1fr;
}
}
ね？ 「列数を変える」というイメージだけで、レイアウトの切り替えが完了してしまいます。
—
最後に：完璧を目指さなくて大丈夫
CSS Gridはとても高機能なので、最初は「`repeat`？ `1fr`？ よく分からない！」となってしまうかもしれません。でも、それで全く問題ありません。
まずは「とりあえず`display: grid;`を書いて、`gap`で余白を作る」ということから始めてみてください。それだけで、あなたのWebサイトのクオリティは一段階レベルアップします。
分からなくなったら、またこのページに戻ってきてくださいね。一緒に少しずつ、理想のサイトを作っていきましょう！
もし、「ここがうまく動かないよ！」ということがあれば、ぜひコメントで教えてください。一緒に解決策を探しましょう。応援しています！
コメント