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

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

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

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

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

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

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

サンプルリスト０

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

•  カテゴリ１
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
• カテゴリ２
  • 項目１
  • 項目２
• カテゴリ３
  • 項目１
  • 項目２
  • 項目３
• カテゴリ４
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
  • 項目６
• カテゴリ５
  • 項目１
  • 項目２

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

サンプルリスト１（普通にテーブル）

普通に横一列のテーブルにするには、以下の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を指定する以下のようになります。

• カテゴリ１
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
• カテゴリ２
  • 項目１
  • 項目２
• カテゴリ３
  • 項目１
  • 項目２
  • 項目３
• カテゴリ４
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
  • 項目６
• カテゴリ５
  • 項目１
  • 項目２

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

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

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

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

サンプルリスト２（２列のテーブル）

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

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

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

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

• カテゴリ１
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
• カテゴリ２
  • 項目１
  • 項目２
• カテゴリ３
  • 項目１
  • 項目２
  • 項目３
• カテゴリ４
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
  • 項目６
• カテゴリ５
  • 項目１
  • 項目２

２列に並びましたね！（嬉しい ^-^））

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

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

サンプルリスト３（３列のテーブル）

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

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

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

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

•  カテゴリ１
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
• カテゴリ２
  • 項目１
  • 項目２
• カテゴリ３
  • 項目１
  • 項目２
  • 項目３
• カテゴリ４
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
  • 項目６
• カテゴリ５
  • 項目１
  • 項目２

いとも簡単に３列に並びました！
実際のCSSの指定は以下のとおりです。

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

サンプルリスト４（４列のテーブル）

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

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

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

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

•  カテゴリ１
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
• カテゴリ２
  • 項目１
  • 項目２
• カテゴリ３
  • 項目１
  • 項目２
  • 項目３
• カテゴリ４
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
  • 項目６
• カテゴリ５
  • 項目１
  • 項目２

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

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

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

２列の罫線を引く - その１

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

• 基本：右と下に罫線を引く
• 最初の一行だけ：上にも罫線を引く
• 更に最初の１つ目だけ：左にも罫線を引く

•  カテゴリ１
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
• カテゴリ２
  • 項目１
  • 項目２
• カテゴリ３
  • 項目１
  • 項目２
  • 項目３
• カテゴリ４
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
  • 項目６
• カテゴリ５
  • 項目１
  • 項目２

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

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

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

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

•  カテゴリ１
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
• カテゴリ２
  • 項目１
  • 項目２
• カテゴリ３
  • 項目１
  • 項目２
  • 項目３
• カテゴリ４
  • 項目１
  • 項目２
  • 項目３
  • 項目４
  • 項目５
  • 項目６
• カテゴリ５
  • 項目１
  • 項目２

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

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

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

今回のまとめ

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

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

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

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

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

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