2016-07-16_202109

ブログでデザインカスタマイズでは、ul, li を使ったリストに対してCSSを使って2列、3列などの表形式で表示したい!という場合がよくあります。

tableプロパティを使えば簡単に表は出来ますが、floatを使って2列、3列といったレイアウトなどにした場合に隣同士の高さが揃わず、罫線を引くとちぐはぐは表になってしまって結構苦労したりします。(floatを使うので縦方向の高さが揃わないんですね)

ということで、ここで満を持して大活躍するのが「flexプロパティ」です。これさえマスターしておけば、もうレイアウトも自由自在!

ここではブログによくある ul li を使ったリストをflexプロパティーを利用して簡単に2列、3列、4列といった形にしてみましょう。

もう驚くほど簡単ですよ。^-^)

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

サンプルリスト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

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

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

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

要素 指定するCSS 解説
親要素のul display:flex; display:flex を指定すると、子要素のliが縦幅、横幅とも同じ幅で揃います
width:100%; 横幅いっぱいのテーブル
ul直下の子要素のli flex-grow: 1; 横方向に等幅に並べる
list-style: none; 先頭の●印は非表示にしておきます
(見やすさのため)
background: lightblue; 分かりやすいように、背景色指定
border: 1px solid white; 分かりやすいように、罫線(白色)を指定
box-sizing: border-box; 罫線の幅が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

普通にtableプロパティーを使っても同じことが出来ますが、横幅、高さも全て同じに揃いましたね!

実際のCSSの指定は以下のとおりです。

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

横一列ではなく折り返しとなるように指定し、liの横幅を決めるだけです。以下順次見てみましょう。

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

うえで見たリストを「2列のテーブル」にしてみます。
指定するCSSは以下のとおり。

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

要素 指定するCSS 解説
親要素のul display:flex; display:flex を指定すると、子要素のliが縦幅、横幅とも同じ幅で揃います
flex-wrap:wrap; 折り返すように指定(flex-grow: 1;は削除)
width:100%; 横幅いっぱいのテーブル
ul直下の子要素のli width:50%; 2列にするために、1つ1つの要素の横幅を全体の横幅の半分(50%)に指定
list-style: none; 先頭の●印は非表示にしておきます(見やすさのため)
background: lightblue; 分かりやすいように、背景色指定
border: 1px solid white; 分かりやすいように、罫線(白色)を指定
box-sizing: border-box; 罫線の幅が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

2列に並びましたね!(嬉しい ^-^)

実際のCSSの指定は以下のとおりです。

後は同様で、3列であれば、liのwidthを33%、4列では25%、5列では20%と指定すれば、自動的に変わります。

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

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

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

要素 指定するCSS 解説
親要素のul display:flex; display:flex を指定すると、子要素のliが縦幅、横幅とも同じ幅で揃います
flex-wrap:wrap; 折り返すように指定(flex-grow: 1;は削除)
width:100%; 横幅いっぱいのテーブル
ul直下の子要素のli width:33%; 3列にするために、1つ1つの要素の横幅を全体の横幅の3分の1(33%)に指定
list-style: none; 先頭の●印は非表示にしておきます(見やすさのため)
background: lightblue; 分かりやすいように、背景色指定
border: 1px solid white; 分かりやすいように、罫線(白色)を指定
box-sizing: border-box; 罫線の幅がliの横幅に影響しないように、横幅は罫線の太さを含めるようにしておく

さて、これらの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列のテーブル)

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

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

要素 指定するCSS 解説
親要素のul display:flex; display:flex を指定すると、子要素のliが縦幅、横幅とも同じ幅で揃います
flex-wrap:wrap; 折り返すように指定(flex-grow: 1;は削除)
width:100%; 横幅いっぱいのテーブル
ul直下の子要素のli width:25%; 4列にするために、1つ1つの要素の横幅を全体の横幅の4分の1(25%)に指定
list-style: none; 先頭の●印は非表示にしておきます(見やすさのため)
background: lightblue; 分かりやすいように、背景色指定
border: 1px solid white; 分かりやすいように、罫線(白色)を指定
box-sizing: border-box; 罫線の幅が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

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

ここまで見てきたように、flexプロパティを使えばレイアウトも自由自在。

最後は私もよく使う2列のレイアウトに対して罫線をしっかり引いて表みたいにしてみましょう。

2列の罫線を引く - その1

1つ目は間隔を空けない表を作ってみます。
罫線を例えば以下のように引けばよいですね。

  • 基本:右と下に罫線を引く
  • 最初の一行だけ:上にも罫線を引く
  • 更に最初の1つ目だけ:左にも罫線を引く
  •  カテゴリ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列の罫線を引く - その2

表が簡単にできたところで、表から各項目ごとに分離した2列を作ってみます。

こちらは表のように罫線の隅の場合を考える必要なく、罫線はli要素に対して普通に指定すれば良くて簡単です。実際に良く利用するパターンになると思います。

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

しっかり高さが揃ってるところが嬉しいですね。

実際指定したCSSは以下のとおりです。

flexプロパティ、とても重宝しますね。^-^)

今回のまとめ

  • flexプロパティを使えば、リストから簡単にテーブルレイアウトができる
  • tableプロパティとは異なり、縦横の幅を合わせるのも楽々
  • 罫線を上手に指定すれば表も簡単にできる

別記事のtableプロパティを利用する場合でも同じですが、例えば、サイトマップを簡単に表示するプラグインなどで単に一覧表示をするところを、このflexプロパティーで2列や3列の表のレイアウトにしてみても面白いですね。

身近なところでは、新着表示や人気記事表示を、少し変化を加えて2列にしてみたい、などといった場合に簡単に実現できて便利です。

是非色々と使ってみて、見た目の楽しさもジャンジャン読者に提供しちゃいましょう!

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

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

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

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

~ 最短で月収10万円稼げるようになる方法 ~

お名前(全角文字)

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

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

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

自らの手で未来を変える力を手に入れる!