よく出くわすかもしれませんが、ul, li を使ったリストがあり、それをCSSを使って表にしたい！という場合があります。
tableプロパティを使えば簡単に表は出来ますが、横長の一行の表になってしまうんですね。
表を作る前提でリストのul, liをうまく組み分ければ２列３列の表も出来ますが、そうではなくて、プラグインが表示するリストなどを表の形にして表示したい（つまり勝手に出力されるリストを表形式にしたい）という場合にどうするか。
実はtableプロパティもちょっと工夫するだけで簡単に表を使ったようなレイアウトができますが、それでもしっかり罫線が入った表となると難しい所。
ここではまずは普通にtableプロパティを使うとどうなるか、見てみましょう。
Contents
tableプロパティを使って表のレイアウト！
サンプルリスト０
まずはリストの普通のサンプルです。
カテゴリを５つとして、各カテゴリに適当に項目を並べてます。
- カテゴリ１
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- カテゴリ２
- 項目１
- 項目２
- カテゴリ３
- 項目１
- 項目２
- 項目３
- カテゴリ４
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目６
- カテゴリ５
- 項目１
- 項目２
よく見かける感じのリストですね。^-^）
ワードプレスではプラグインがよくこのようなリスト表示をしてますが、ここで、このサンプルリストをCSSのtableプロパティを利用して、普通に横一列の表タイプ、また更に２列や３列にしてみましょう
サンプルリスト２（普通にテーブル）
普通に横一列のテーブルにするには、以下のCSSを指定します。
| 要素 | 指定するCSS | 解説 |
| 親要素のul（class="listtest1"） | display:table; | display:table を指定すると、子要素のliで、display:table-cellが利用できます |
| width:100%; | 横幅いっぱいのテーブル | |
| ul直下の子要素のli | display:table-cell; | 項目１，項目２などの li要素をテーブルのセルとして指定します |
さて、これらのCSSを指定する以下のようになります。
- カテゴリ１
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- カテゴリ２
- 項目１
- 項目２
- カテゴリ３
- 項目１
- 項目２
- 項目３
- カテゴリ４
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目６
- カテゴリ５
- 項目１
- 項目２
実際のCSSの指定は以下のとおりです。
非常にシンプルですね。^-^）
|
1 2 3 4 5 6 7 |
ul.listtest1 { display: table; width:100%; } ul.listtest1 > li { display: table-cell; } |
このように横一列では良いですが、２列、３列などの表示にしたい！というところをどうするか。
以下順次見てみましょう。
サンプルリスト２（２列のテーブル）
では、次は「２列のテーブル」にしてみます。
指定するCSSは以下のとおり。
※）上のサンプルからの違いは赤文字箇所です
| 要素 | 指定するCSS | 解説 |
| 親要素のul （class="listtest2"） | display:table; | display:table を指定すると、子要素のliで、display:table-cellが利用できます |
| width:100%; | 横幅いっぱいのテーブル | |
| ul直下の子要素のli | display:table-cell; | 項目１，項目２などの li要素をテーブルのセルとして指定します |
| width: 50%; | １つのセルの横幅を表全体の半分（50%）としておきます | |
| float:left; | ２列ごとに折り返すように、各liをfloatに指定します | |
| clear:both; | 折り返しごとにfloatを解除します（2n+1 つまり1,3,5...） |
さて、これらのCSSを指定すると、以下のように表示が変わります。
- カテゴリ１
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- カテゴリ２
- 項目１
- 項目２
- カテゴリ３
- 項目１
- 項目２
- 項目３
- カテゴリ４
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目６
- カテゴリ５
- 項目１
- 項目２
２列に並びましたね！
実際のCSSの指定は以下のとおりです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
ul.listtest2 { display: table; width:100%; } ul.listtest2 > li:nth-child(2n+1) { clear: both; } ul.listtest2 > li { display: table-cell; float: left; width: 50%; } |
では続いて３列にもしてみましょう。
サンプルリスト３（３列のテーブル）
「３列のテーブル」にするCSSは以下のとおり。
※）上のサンプルからの違いは赤文字箇所です
| 要素 | 指定するCSS | 解説 |
| 親要素のul （class="listtest3"） | display:table; | display:table を指定すると、子要素のliで、display:table-cellが利用できます |
| width:100%; | 横幅いっぱいのテーブル | |
| ul直下の子要素のli | display:table-cell; | 項目１，項目２などの li要素をテーブルのセルとして指定します |
| width: 33%; | １つのセルの横幅を表全体の3分の1（33%）としておきます | |
| float:left; | ２列ごとに折り返すように、各liをfloatに指定します | |
| clear:both; | 折り返しごとにfloatを解除します（3n+1 つまり1,4,7...） |
さて、これらのCSSを指定すると、以下のように３列の表になります。
- カテゴリ１
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- カテゴリ２
- 項目１
- 項目２
- カテゴリ３
- 項目１
- 項目２
- 項目３
- カテゴリ４
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目６
- カテゴリ５
- 項目１
- 項目２
ほっほー、３列に並びました！
実際のCSSの指定は以下のとおりです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
ul.listtest3 { display: table; width:100%; } ul.listtest3 > li:nth-child(3n+1) { clear: both; } ul.listtest3 > li { display: table-cell; float: left; width: 33%; } |
では同様に４列も見てみましょう。
サンプルリスト４（４列のテーブル）
「３列のテーブル」にするCSSは以下のとおり。
※）上のサンプルからの違いは赤文字箇所です
| 要素 | 指定するCSS | 解説 |
| 親要素のul （class="listtest4"） | display:table; | display:table を指定すると、子要素のliで、display:table-cellが利用できます |
| width:100%; | 横幅いっぱいのテーブル | |
| ul直下の子要素のli | display:table-cell; | 項目１，項目２などの li要素をテーブルのセルとして指定します |
| width: 25%; | １つのセルの横幅を表全体の4分の1（25%）としておきます | |
| float:left; | ２列ごとに折り返すように、各liをfloatに指定します | |
| clear:both; | 折り返しごとにfloatを解除します（4n+1 つまり1,5,9...） |
これらのCSSを指定すると、以下のように表示されます。
- カテゴリ１
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- カテゴリ２
- 項目１
- 項目２
- カテゴリ３
- 項目１
- 項目２
- 項目３
- カテゴリ４
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目６
- カテゴリ５
- 項目１
- 項目２
４列に並びました！
実際のCSSの指定は以下のとおり。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
ul.listtest4 { display: table; width:100%; } ul.listtest4 > li:nth-child(4n+1) { clear: both; } ul.listtest4 > li { display: table-cell; float: left; width: 25%; } |
ここまで見てきたように、リストをCSSで簡単に表のように見せることが出来ました！
それでも欠点もあるんですね。
罫線がうまく引けない
CSSのtableプロパティを使うと、テーブルのような２列、３列といったレイアウトが簡単にできるので、配置だけテーブルのようになれば良い、ということであればこれで問題ありません。
それでも「しっかりとした表を作りたい！罫線をひきたい！」となるとうまく行かないんですね。
例えば上で見た２列の場合、罫線を引くとどうなるか。
カテゴリの個数が奇数なので最後に１つ空のカテゴリーを追加して普通に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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
ul.listtest5 { display: table; width:100%; padding: 0; /* 余白０ */ } ul.listtest5 > li:nth-child(2n+1) { clear: both; } ul.listtest5 > li { display: table-cell; float: left; width: 50%; padding: 1em; /* 見栄えのためにセル内の余白追加 */ } /* ---------------------------- 以下罫線を引く ------------------------------- */ ul.listtest5 { border: 1px solid black; } ul.listtest5 > li { border-color: black; border-style: solid; box-sizing: border-box; } ul.listtest5 > li:nth-child(2n+1) { /* 左側のセルの基本 */ border-width: 0 1px 1px 0; } ul.listtest5 > li:nth-child(2n) { /* 右側のセルの基本 */ border-width: 0 0 1px 0; } ul.listtest5 > li:nth-last-child(2) { /* 左側の最後のセル */ border-width: 0 1px 0 0; } ul.listtest5 > li:nth-last-child(1) { /* 右側の最後のセル */ border-width: 0 0 0 0; } |
- 外枠を指定し、中のセルは
- 左側のセルの基本：右と下に罫線を引く
- 右側のセルの基本：下だけに罫線を引く
- 左側の最後のセル：左だけに罫線を引く
- 右側の最後のセル：罫線は何も引かない
これは各カテゴリに含まれる項目数が異なり高さが合わない、ということからこうなります。（floatを使ってるからですね）
各カテゴリの項目数がある程度固定であれば、高さを指定して固定すれば、以下のように綺麗に表になりますが（height:250pxを指定）、利用方法も限定的です。
- カテゴリ１
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- カテゴリ２
- 項目１
- 項目２
- カテゴリ３
- 項目１
- 項目２
- 項目３
- カテゴリ４
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
- 項目６
- カテゴリ５
- 項目１
- 項目２
以下は高さを追加したのみです。
|
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
ul.listtest5 { display: table; width:100%; padding: 0; /* 余白０ */ } ul.listtest5 > li:nth-child(2n+1) { clear: both; } ul.listtest5 > li { display: table-cell; float: left; width: 50%; height: 250px;/* 高さを指定 */ padding: 1em; /* 見栄えのためにセル内の余白追加 */ } /* ---------------------------- 以下罫線を引く ------------------------------- */ ul.listtest5 { border: 1px solid black; } ul.listtest5 > li { border-color: black; border-style: solid; box-sizing: border-box; } ul.listtest5 > li:nth-child(2n+1) { /* 左側のセルの基本 */ border-width: 0 1px 1px 0; } ul.listtest5 > li:nth-child(2n) { /* 右側のセルの基本 */ border-width: 0 0 1px 0; } ul.listtest5 > li:nth-last-child(2) { /* 左側の最後のセル */ border-width: 0 1px 0 0; } ul.listtest5 > li:nth-last-child(1) { /* 右側の最後のセル */ border-width: 0 0 0 0; } |
縦方向も可変でしっかりした表を作りたい！となると、flexプロパティの登場でしょうか。こちらはまた次回見てみましょう。
今回のまとめ
- tableプロパティを使えば、リストから簡単にテーブルレイアウトができる
- ただしtableプロパティの利用では、罫線を引いてしっかりした表を作りたい場合には、高さを固定する必要がある
例えば、サイトマップを簡単に表示するプラグインなどがありますが、そういったものを利用しつつここでみたtableプロパティを活用を考えれば、テーブルレイアウトでカテゴリ別の表示ができたりします。
そういった工夫して見栄えでインパクトを求めたり、より読者に分かりやすく全体把握しやすいレイアウトに変えてみる、というのが良いですね。
レイアウトの一工夫で見やすさも断然変わってきます。
もっとうまくtableプロパティの使い方がある！という方、是非教えて下さい（笑）
またネットで収入を得たい！収益に変えたい！という方は、是非以下のメルマガも見てみてくださいね。
