リストから表を作る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;
}

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

横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;

}

flexプロパティを使えばレイアウトも自由自在。

実際に4列、5列など、試してみてくださいね。

今回のまとめ

横1列 flex-wrap: nowrap;
2列 flex-wrap: wrap; width: calc(100% / 2);
3列 flex-wrap: wrap; width: calc(100% / 3);
x列 flex-wrap: wrap; width: calc(100% / x);
複数の列では flex-wrap: wrap; を使って折り返し、 width を調整すること！

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

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

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

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

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

無料メールマガジンの詳しい内容を見る！