リストから表を作るCSS！flexで2列3列4列nのレイアウトを作る方法

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

table や gridプロパティを使えば簡単に表は出来ますが、
ここでは flexを使って簡単に2列、3列、4列といった形にしてみましょう。

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

gridを使う場合は以下を見てみてください。

Contents

flexプロパティを使って表のレイアウト！
今回のまとめ

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

サンプルリスト０

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

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

ワードプレスではグローバルメニューや新着表示、記事下のページネーションなどで、このようなリスト表示をすることも多いと思います。

ここで、flexプロパティを利用して、
普通に横一列の表タイプから更に２列や３列などにしてみましょう

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

要素	指定するCSS	解説
親要素のul	display: flex;	flex で横並び
	flex-wrap: nowrap;	折り返さない（折り返して良い場合にはwrapを指定して）
	gap: 0;	要素間に隙間を入れない場合は省略OK。ここでは例として明示しているだけ。（いれる場合は10pxなどを指定）
ul直下の子要素 li	list-style: none;	先頭の●印は非表示にしておく（見やすさのため）
	background: AliceBlue;	背景色指定（分かりやすいように）
	box-sizing: border-box;	罫線の幅がliの横幅に影響しないように、横幅は罫線の太さを含めるようにしておく
	padding: .5em;	内側余白を少し入れておく
	margin: 0;	要素間の隙間をなくす
	border: 1px solid slategray;	罫線
ul直下の子要素 li 直下の ul	padding-left:1.5em;	liの先頭●印をなくしたのでその分左に寄せてバランスをとる

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

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

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

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

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

/* ------------------------------------
横1列 
------------------------------------ */
/* テーブルにするCSSはこれだけ */
.listtest1 {
display: flex;		/* flex で 横並び */
flex-wrap: nowrap;	/* 折り返さない */
gap:0;				/* 要素同士の隙間はなくしておく */
}
/* 見かけの調整 */
.listtest1 > li {
list-style: none;
background: AliceBlue;
box-sizing: border-box;
padding:.5em;
margin:0!important;
}
.listtest1 > li > ul{
padding-left:1.5em;	/* 左に寄せてバランスをとる */
}
/* 罫線を付けておく */
.listtest1 > li {
border: 1px solid slategray;
}
.listtest1 > li:not(:last-child) {
border-right: none;	/* 左右の罫線の重なりをなくして綺麗に */
}

/* ------------------------------------

横1列

------------------------------------ */

/* テーブルにするCSSはこれだけ */

.listtest1 {

display: flex; /* flex で横並び */

flex-wrap: nowrap; /* 折り返さない */

gap:0; /* 要素同士の隙間はなくしておく */

}

/* 見かけの調整 */

.listtest1 > li {

list-style: none;

background: AliceBlue;

box-sizing: border-box;

padding:.5em;

margin:0!important;

}

.listtest1 > li > ul{

padding-left:1.5em; /* 左に寄せてバランスをとる */

}

/* 罫線を付けておく */

.listtest1 > li {

border: 1px solid slategray;

}

.listtest1 > li:not(:last-child) {

border-right: none; /* 左右の罫線の重なりをなくして綺麗に */

}

横一列は親要素（ul）に display:flex;を設定すれば良いのだけなので簡単ですね。

（折り返しを考える場合には、flex-wrap: nowrap;も設定する）

これを２列、３列にするには、
横一列ではなく折り返しとなるように指定し、liの横幅を決めるだけ。

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

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

では上で見たリストを「２列のテーブル」にしてみます。

2列の場合には、flex-wrap: wrap; （折り返しをする）を設定します。

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

要素	指定するCSS	解説
親要素のul	display: flex;	flex で横並び
	flex-wrap: wrap;	折り返しを指定
	gap: 0;	要素間に隙間を入れる場合は10pxなどを指定
ul直下の子要素 li	width: calc(100% / 2);	2列なので 100% を2分割
	list-style: none;	先頭の●印は非表示にしておく（見やすさのため）
	background: AliceBlue;	背景色指定（分かりやすいように）
	box-sizing: border-box;	罫線の幅がliの横幅に影響しないように、横幅は罫線の太さを含めるようにしておく
	padding: .5em;	内側余白を少し入れておく
	margin: 0;	要素間の隙間をなくす
	border: 1px solid slategray;	罫線
ul直下の子要素 li 直下の ul	padding-left:1.5em;	liの先頭●印をなくしたのでその分左に寄せてバランスをとる

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

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

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

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

/* ------------------------------------
横2列 
------------------------------------ */
/* テーブルにするCSSはこれだけ */
.listtest2 {
display: flex;		/* flex で 横並び */
flex-wrap: wrap;	/* 折り返しを指定 */
gap:0;				/* 要素同士の隙間はなくしておく */
}
.listtest2 > li {
width: calc(100% / 2);	/* 2列なので 100% を2分割 */
}
/* 見かけの調整 */
.listtest2 > li {
list-style: none;
background: AliceBlue;
box-sizing: border-box;
padding:.5em;
margin:0!important;
}
.listtest2 > li > ul{
padding-left:1.5em;	/* 左に寄せてバランスをとる */
}
/* 罫線を付けてみる */
ul.listtest2 > li {
border: 1px solid slategray;
}
ul.listtest2 > li:nth-child(n+3){
border-top: none;	/* 上下の罫線の重なりをなくして綺麗に */
}
ul.listtest2 > li:nth-child(2n){
border-left: none;	/* 左右の罫線の重なりをなくして綺麗に */
}

/* ------------------------------------

横2列

------------------------------------ */

/* テーブルにするCSSはこれだけ */

.listtest2 {

display: flex; /* flex で横並び */

flex-wrap: wrap; /* 折り返しを指定 */

gap:0; /* 要素同士の隙間はなくしておく */

}

.listtest2 > li {

width: calc(100% / 2); /* 2列なので 100% を2分割 */

}

/* 見かけの調整 */

.listtest2 > li {

list-style: none;

background: AliceBlue;

box-sizing: border-box;

padding:.5em;

margin:0!important;

}

.listtest2 > li > ul{

padding-left:1.5em; /* 左に寄せてバランスをとる */

}

/* 罫線を付けてみる */

ul.listtest2 > li {

border: 1px solid slategray;

}

ul.listtest2 > li:nth-child(n+3){

border-top: none; /* 上下の罫線の重なりをなくして綺麗に */

}

ul.listtest2 > li:nth-child(2n){

border-left: none; /* 左右の罫線の重なりをなくして綺麗に */

}

width: calc(100% / 2);がポイントで、

3列：width: calc(100% / 3);
4列：width: calc(100% / 4);
5列：width: calc(100% / 5);

と指定すれば、自動的に変わります。

（枠として線を付ける場合には、綺麗に見えるように設定する必要はあります）

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

ためしに「３列のテーブル」を見ておきましょう。

width: calc(100% / 2);をwidth: calc(100% / 3);に変えると以下になります。

※）罫線の表示は綺麗に見えるように少し変えてます

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

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

/* ------------------------------------
横3列 
------------------------------------ */
/* テーブルにするCSSはこれだけ */
.listtest3 {
display: flex;		/* flex で 横並び */
flex-wrap: wrap;	/* 折り返しを指定 */
gap:0;				/* 要素同士の隙間はなくしておく */
}
.listtest3 > li {
width: calc(100% / 3);	/* 2列なので 100% を2分割 */
}
/* 見かけの調整 */
.listtest3 > li {
list-style: none;
background: AliceBlue;
box-sizing: border-box;
padding:.5em;
margin:0!important;
}
.listtest3 > li > ul{
padding-left:1.5em;	/* 左に寄せてバランスをとる */
}
/* 罫線を付けてみる */
ul.listtest3 > li {
border: 1px solid slategray;
}
/* 上下の罫線の重なりをなくして綺麗に */
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;
}