HTML、CSSのカスタマイズを多少でもする人はよく出くわすと思いますが、ul, li を使ったリストがあり、それをCSSを使って表形式にしたい場合が結構あります。
tableプロパティでも実現できますが、
今では grid や flex を使うと物凄く簡単にできますね。
ここでは grid を使った場合の例をご紹介。
grid を使って表のレイアウト！
サンプルリスト０
まずは元となるリストの普通のサンプルです。
カテゴリを５つとして、各カテゴリに適当に項目を並べてます。
- カテゴリ１
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- カテゴリ２
- 項目１
- 項目２
- カテゴリ３
- 項目１
- 項目２
- 項目３
- カテゴリ４
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目６
- カテゴリ５
- 項目１
- 項目２
ワードプレスではプラグインがよくこのようなリスト表示をしてますが、ここで、このサンプルリストをCSSのgridプロパティを利用して、普通に横一列の表タイプ、また更に２列や３列にしてみましょう
サンプルリスト１（横1列のテーブル）
まずはテーブルの基本形ということで、
普通に横一列のテーブルにするには、以下のCSSを指定します。
| 要素 | 指定するCSS | 解説 |
| 親要素のul（class="listtest1"） | display: grid; | Gridレイアウトを使う。 |
| grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); | 1fr：1列表示に。 auto-fit：画面幅に出来るだけ列を入れる（画面幅が狭いと折り返す） 最小100pxとして、余ったスペースを均等に分配。 | |
| gap: 0; | 要素同士の隙間はなくしておく | |
| ul直下の子要素のli | border: 1px solid #ccc; | 分かりやすいよう枠線を付けておく。（なしでもOK） |
| margin:0; | 表らしく隙間をなくしてみる | |
| padding: .5em; | 内側の余白は少しいれておく |
さて、これらのCSSを指定する以下のようになります。
- カテゴリ１
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- カテゴリ２
- 項目１
- 項目２
- カテゴリ３
- 項目１
- 項目２
- 項目３
- カテゴリ４
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目６
- カテゴリ５
- 項目１
- 項目２
実際のCSSの指定は以下のとおりです。
表にしてる部分は２～６行目の個所だけ。かなりシンプルですね。^-^）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /* 表にするCSSはこれだけ */ ul.listtest1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0; /* 要素間の大きさ：表に見えるように0にしておく */ } /* 見かけの調整 */ ul.listtest1 > li { margin:0; /* 隙間をなくす */ padding:.5em; /* 内側余白を少し入れておく */ } /* 罫線を付けてみる：なしでもOK */ ul.listtest1 > li { border: 1px solid #ccc; /* 罫線 */ } ul.listtest1 > li:not(:last-child) { border-right: none; /* 左右の罫線の重なりをなくして綺麗に */ } |
repeat(auto-fit, minmax(100px, 1fr)) では、画面幅に応じて折り返しにもなりますが、折り返しにしたくない場合にはwhite-space: nowrap;を指定しておけば良さそうです。
1 2 3 4 5 6 7 | /* 表にするCSSはこれだけ */ ul.listtest1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0; /* 要素間の大きさ：表に見えるように0にしておく */ white-space: nowrap; /* テキストを折り返さない */ } |
続いて２列、３列などの例を見てみましょう。
同様に簡単にできますね。
サンプルリスト２（２列のテーブル）
次は「２列のテーブル」にしてみます。
指定するCSSは以下のとおり。
※）上のサンプルからの違いは赤文字箇所です
| 要素 | 指定するCSS | 解説 |
| 親要素のul（class="listtest2"） | display: grid; | Gridレイアウトを使う。 |
| grid-template-columns: repeat(2, 1fr); | 2列表示に。 auto-fitに変えて数字で列指定。 | |
| gap: 0; | 要素同士の隙間はなくしておく | |
| ul直下の子要素のli | border: 1px solid #ccc; | 分かりやすいよう枠線を付けておく。（なしでもOK） |
| margin:0; | 表らしく隙間をなくしてみる | |
| padding: .5em; | 内側の余白は少しいれておく |
さて、これらのCSSを指定すると、以下のように表示が変わります。
- カテゴリ１
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- カテゴリ２
- 項目１
- 項目２
- カテゴリ３
- 項目１
- 項目２
- 項目３
- カテゴリ４
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目６
- カテゴリ５
- 項目１
- 項目２
２列に並びましたね！
実際のCSSの指定は以下のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | /* 表にするCSSはこれだけ */ ul.listtest2 { display: grid; grid-template-columns: repeat(2, 1fr); /* repeat(2, 1fr)が異なる */ gap: 0; } /* 見かけの調整 */ ul.listtest2 > li { margin:0; /* 隙間をなくす */ padding:.5em; /* 内側余白を少し入れておく */ } /* 罫線を付けてみる */ ul.listtest2 > li { border: 1px solid #ccc; /* 罫線 */ } ul.listtest2 > li:nth-child(n+3){ border-top: none; /* 上下の罫線の重なりをなくして綺麗に */ } ul.listtest2 > li:nth-child(2n){ border-left: none; /* 左右の罫線の重なりをなくして綺麗に */ } |
サンプルリスト３（３列のテーブル）
では続いて３列ですが、数字を変えるだけ。
| 要素 | 指定するCSS | 解説 |
| 親要素のul（class="listtest3"） | display: grid; | Gridレイアウトを使う。 |
| grid-template-columns: repeat(3, 1fr); | 3列表示に。 2から3に変更。 | |
| gap: 0; | 要素同士の隙間はなくしておく | |
| ul直下の子要素のli | border: 1px solid #ccc; | 分かりやすいよう枠線を付けておく。（なしでもOK） |
| margin:0; | 表らしく隙間をなくしてみる | |
| padding: .5em; | 内側の余白は少しいれておく |
さて、これらのCSSを指定すると、以下のように３列の表になります。
- カテゴリ１
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- カテゴリ２
- 項目１
- 項目２
- カテゴリ３
- 項目１
- 項目２
- 項目３
- カテゴリ４
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目６
- カテゴリ５
- 項目１
- 項目２
ほっほー、３列に並びました！
実際のCSSの指定は以下のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /* 表にするCSSはこれだけ */ ul.listtest3 { display: grid; grid-template-columns: repeat(3, 1fr); /* repeatを2⇒3に変えただけ */ gap: 0; } /* 見かけの調整 */ ul.listtest3 > li { margin:0; /* 隙間をなくす */ padding:.5em; /* 内側余白を少し入れておく */ } /* 罫線を付けてみる */ ul.listtest3 > li { border: 1px solid #ccc; /* 罫線 */ } /* 上下の罫線の重なりをなくして綺麗に */ ul.listtest3 > li:nth-child(n+4){ border-top: none; } /* 左右の罫線の重なりをなくして綺麗に */ ul.listtest3 li:nth-child(3n+2), ul.listtest3 li:nth-child(3n+3){ border-left:none; } |
サンプルリスト４（４列のテーブル）
４列も見てみますが、後は数値を変えるだけ。
※）上のサンプルからの違いは赤文字箇所です
| 要素 | 指定するCSS | 解説 |
| 親要素のul（class="listtest4"） | display: grid; | Gridレイアウトを使う。 |
| grid-template-columns: repeat(4, 1fr); | 4列表示に。 3から4に変更。 | |
| gap: 0; | 要素同士の隙間はなくしておく | |
| ul直下の子要素のli | border: 1px solid #ccc; | 分かりやすいよう枠線を付けておく。（なしでもOK） |
| margin:0; | 表らしく隙間をなくしてみる | |
| padding: .5em; | 内側の余白は少しいれておく |
これらのCSSを指定すると、以下のように表示されます。
- カテゴリ１
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- カテゴリ２
- 項目１
- 項目２
- カテゴリ３
- 項目１
- 項目２
- 項目３
- カテゴリ４
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目６
- カテゴリ５
- 項目１
- 項目２
４列に並びました！
実際のCSSの指定は以下のとおり。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | /* 表にするCSSはこれだけ */ ul.listtest4 { display: grid; grid-template-columns: repeat(4, 1fr); /* repeatを3⇒4に変えただけ */ gap: 0; } /* 見かけの調整 */ ul.listtest4 > li { margin:0; /* 隙間をなくす */ padding:.5em; /* 内側余白を少し入れておく */ } /* 罫線を付けてみる */ ul.listtest4 > li { border: 1px solid #ccc; /* 罫線 */ } /* 上下の罫線の重なりをなくして綺麗に */ ul.listtest4 > li:nth-child(n+5){ border-top: none; } /* 左右の罫線の重なりをなくして綺麗に */ ul.listtest4 li:nth-child(4n+2), ul.listtest4 li:nth-child(4n+3), ul.listtest4 li:nth-child(4n+4){ border-left:none; } |
ここまで見てきたように、ul li のリストを
gidを使えば簡単に表のように見せることが出来ますね！
flexプロパティを使っても簡単にできますね。
以下も参照してみてください。
今回のまとめ
- gridプロパティを使えば、リストから簡単にテーブルレイアウトができる
- 横一列：repeat(auto-fit, minmax(100px, 1fr)) を使う
（画面幅に応じて、横一列 or 自動折り返し になる） - 2列以上：repeat(xx, 1fr) を使う（xx:2, 3, 4, … ）
ちょっと前までは tableプロパティを使って、少しややこしい感じのCSSでリストを表にしてたりしましたが、今では gidで凄く簡単にできますね。
こうした便利なプロパティを活用して個性を出していくと、
他に比べて魅力ある個性的なサイトになっていくと思います。
またネットで収入を得たい！収益に変えたい！という方は、
以下のメルマガも見てみてくださいね。
コメント