インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

CSSでリストから表を作る方法!2列、3列、4列のレイアウトはこうすれば良いけど罫線が問題

  2016/07/27   あとで読む

約 5 分で読めます

2016-07-16_202109

よく出くわすかもしれませんが、ul, li を使ったリストがあり、それをCSSを使って表にしたい!という場合があります。

tableプロパティを使えば簡単に表は出来ますが、横長の一行の表になってしまうんですね。

表を作る前提でリストのul, liをうまく組み分ければ2列3列の表も出来ますが、そうではなくて、プラグインが表示するリストなどを表の形にして表示したい(つまり勝手に出力されるリストを表形式にしたい)という場合にどうするか。

実はtableプロパティもちょっと工夫するだけで簡単に表を使ったようなレイアウトができますが、それでもしっかり罫線が入った表となると難しい所。

ここではまずは普通にtableプロパティを使うとどうなるか、見てみましょう。

tableプロパティを使って表のレイアウト!

サンプルリスト0

まずはリストの普通のサンプルです。
カテゴリを5つとして、各カテゴリに適当に項目を並べてます。

  •  カテゴリ1
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
  • カテゴリ2
    • 項目1
    • 項目2
  • カテゴリ3
    • 項目1
    • 項目2
    • 項目3
  • カテゴリ4
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
    • 項目6
  • カテゴリ5
    • 項目1
    • 項目2

よく見かける感じのリストですね。^-^)

ワードプレスではプラグインがよくこのようなリスト表示をしてますが、ここで、このサンプルリストをCSSのtableプロパティを利用して、普通に横一列の表タイプ、また更に2列や3列にしてみましょう

サンプルリスト2(普通にテーブル)

普通に横一列のテーブルにするには、以下のCSSを指定します。

要素 指定するCSS 解説
親要素のul(class=”listtest1″) display:table; display:table を指定すると、子要素のliで、display:table-cellが利用できます
width:100%; 横幅いっぱいのテーブル
ul直下の子要素のli display:table-cell; 項目1,項目2などの li要素をテーブルのセルとして指定します

さて、これらのCSSを指定する以下のようになります。

  • カテゴリ1
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
  • カテゴリ2
    • 項目1
    • 項目2
  • カテゴリ3
    • 項目1
    • 項目2
    • 項目3
  • カテゴリ4
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
    • 項目6
  • カテゴリ5
    • 項目1
    • 項目2

実際のCSSの指定は以下のとおりです。
非常にシンプルですね。^-^)

このように横一列では良いですが、2列、3列などの表示にしたい!というところをどうするか。

以下順次見てみましょう。

サンプルリスト2(2列のテーブル)

では、次は「2列のテーブル」にしてみます。
指定するCSSは以下のとおり。

※)上のサンプルからの違いは赤文字箇所です

要素 指定するCSS 解説
親要素のul (class=”listtest2“) display:table; display:table を指定すると、子要素のliで、display:table-cellが利用できます
width:100%; 横幅いっぱいのテーブル
ul直下の子要素のli display:table-cell; 項目1,項目2などの li要素をテーブルのセルとして指定します
width: 50%; 1つのセルの横幅を表全体の半分(50%)としておきます
float:left; 2列ごとに折り返すように、各liをfloatに指定します
clear:both; 折り返しごとにfloatを解除します(2n+1 つまり1,3,5…)

さて、これらのCSSを指定すると、以下のように表示が変わります。

  • カテゴリ1
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
  • カテゴリ2
    • 項目1
    • 項目2
  • カテゴリ3
    • 項目1
    • 項目2
    • 項目3
  • カテゴリ4
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
    • 項目6
  • カテゴリ5
    • 項目1
    • 項目2

2列に並びましたね!
実際のCSSの指定は以下のとおりです。

では続いて3列にもしてみましょう。

サンプルリスト3(3列のテーブル)

「3列のテーブル」にするCSSは以下のとおり。

※)上のサンプルからの違いは赤文字箇所です

要素 指定するCSS 解説
親要素のul (class=”listtest3“) display:table; display:table を指定すると、子要素のliで、display:table-cellが利用できます
width:100%; 横幅いっぱいのテーブル
ul直下の子要素のli display:table-cell; 項目1,項目2などの li要素をテーブルのセルとして指定します
width: 33%; 1つのセルの横幅を表全体の3分の1(33%)としておきます
float:left; 2列ごとに折り返すように、各liをfloatに指定します
clear:both; 折り返しごとにfloatを解除します(3n+1 つまり1,4,7…)

さて、これらのCSSを指定すると、以下のように3列の表になります。

  •  カテゴリ1
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
  • カテゴリ2
    • 項目1
    • 項目2
  • カテゴリ3
    • 項目1
    • 項目2
    • 項目3
  • カテゴリ4
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
    • 項目6
  • カテゴリ5
    • 項目1
    • 項目2

ほっほー、3列に並びました!
実際のCSSの指定は以下のとおりです。

では同様に4列も見てみましょう。

サンプルリスト4(4列のテーブル)

「3列のテーブル」にするCSSは以下のとおり。

※)上のサンプルからの違いは赤文字箇所です

要素 指定するCSS 解説
親要素のul (class=”listtest4“) display:table; display:table を指定すると、子要素のliで、display:table-cellが利用できます
width:100%; 横幅いっぱいのテーブル
ul直下の子要素のli display:table-cell; 項目1,項目2などの li要素をテーブルのセルとして指定します
width: 25%; 1つのセルの横幅を表全体の4分の1(25%)としておきます
float:left; 2列ごとに折り返すように、各liをfloatに指定します
clear:both; 折り返しごとにfloatを解除します(4n+1 つまり1,5,9…)

これらのCSSを指定すると、以下のように表示されます。

  •  カテゴリ1
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
  • カテゴリ2
    • 項目1
    • 項目2
  • カテゴリ3
    • 項目1
    • 項目2
    • 項目3
  • カテゴリ4
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
    • 項目6
  • カテゴリ5
    • 項目1
    • 項目2

4列に並びました!
実際のCSSの指定は以下のとおり。

ここまで見てきたように、リストをCSSで簡単に表のように見せることが出来ました!

それでも欠点もあるんですね。

罫線がうまく引けない

CSSのtableプロパティを使うと、テーブルのような2列、3列といったレイアウトが簡単にできるので、配置だけテーブルのようになれば良い、ということであればこれで問題ありません。

それでも「しっかりとした表を作りたい!罫線をひきたい!」となるとうまく行かないんですね。

例えば上で見た2列の場合、罫線を引くとどうなるか。
カテゴリの個数が奇数なので最後に1つ空のカテゴリーを追加して普通にCSSを指定すると、

  •  カテゴリ1
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
  • カテゴリ2
    • 項目1
    • 項目2
  • カテゴリ3
    • 項目1
    • 項目2
    • 項目3
  • カテゴリ4
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
    • 項目6
  • カテゴリ5
    • 項目1
    • 項目2

うまく罫線が引けてません。(。>﹏<。)
実際指定したCSSは以下のとおりです。

  • 外枠を指定し、中のセルは
    • 左側のセルの基本:右と下に罫線を引く
    • 右側のセルの基本:下だけに罫線を引く
    • 左側の最後のセル:左だけに罫線を引く
    • 右側の最後のセル:罫線は何も引かない

これは各カテゴリに含まれる項目数が異なり高さが合わない、ということからこうなります。(floatを使ってるからですね)

各カテゴリの項目数がある程度固定であれば、高さを指定して固定すれば、以下のように綺麗に表になりますが(height:250pxを指定)、利用方法も限定的です。

  •  カテゴリ1
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
  • カテゴリ2
    • 項目1
    • 項目2
  • カテゴリ3
    • 項目1
    • 項目2
    • 項目3
  • カテゴリ4
    • 項目1
    • 項目2
    • 項目3
    • 項目4
    • 項目5
    • 項目6
  • カテゴリ5
    • 項目1
    • 項目2

以下は高さを追加したのみです。

縦方向も可変でしっかりした表を作りたい!となると、flexプロパティの登場でしょうか。こちらはまた次回見てみましょう。

CSSでリストから表を作る方法!flexプロパティを使えば2列、3列、4列のレイアウトは簡単過ぎる!

今回のまとめ

  • tableプロパティを使えば、リストから簡単にテーブルレイアウトができる
  • ただしtableプロパティの利用では、罫線を引いてしっかりした表を作りたい場合には、高さを固定する必要がある

例えば、サイトマップを簡単に表示するプラグインなどがありますが、そういったものを利用しつつここでみたtableプロパティを活用を考えれば、テーブルレイアウトでカテゴリ別の表示ができたりします。

そういった工夫して見栄えでインパクトを求めたり、より読者に分かりやすく全体把握しやすいレイアウトに変えてみる、というのが良いですね。

レイアウトの一工夫で見やすさも断然変わってきます。
もっとうまくtableプロパティの使い方がある!という方、是非教えて下さい(笑)

またネットで収入を得たい!収益に変えたい!という方は、是非以下のメルマガも見てみてくださいね。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね

この記事を読んだ人はこんな記事も読んでます

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です