CSSでメニュー表や目次のデザインを作る方法

CSSで、「項目は左側、内容は右側、その2つを点線でつなぐ」といったメニュー表や目次によくあるデザインの作り方をご紹介します。

この表現は“項目と内容”で構成されたレイアウトなので、次のような場面で使うことが多いでしょう

ちょうどAdobeのIllustratorにある「タブルーラー機能」のような表現方法ですね。

デザインサンプル

こちらにサンプルを用意しました。

See the Pen MenuDesign by YusukeHatanaka (@yusuke_code) on CodePen.

文字数や画面幅を変えても、点線の部分だけが伸縮する構造になっています。

HTMLの記述

“項目と内容”で構成されているので、dl,dt,ddを使うのが適切ですね。

レイアウトのためのdivを1つ加えて次のようなHTMLにします。

<dl class="menu">

<div>
<dt>項目1</dt>
<dd>内容1</dd>
</div>

<div>
<dt>項目2</dt>
<dd>内容2</dd>
</div>

</dl>

dl,dt,ddの途中にdivを入れるのは間違った記述ではなく正式に認められたものです。

CSSの記述

CSSでレイアウトするポイントは次の通りです。

CSSに説明を付けていくとこのようになります。

dl.menu{
	width:100%;
	font-size: 1rem;
	}
/* divにflexをかけdtとddを左右に配置しつつ
   position:relativeで点線配置の準備をする */
dl.menu div{
	position: relative;
	display: flex;
	justify-content: space-between;
	margin: 5px 0;
	padding: 5px 0;
	}
/* 疑似要素でオブジェクトを生成、positionでdivの上下中央に配置し
   borderで点線を表現する */
dl.menu div::after{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	z-index: 1;
	width: 100%;
	border-bottom: dotted 1px #000;
	}
/* dtとddはz-indexで点線よりも手前にし、なおかつ背景色を付けて点線を隠す */
dl.menu dt{
	margin:0;
	padding: 0 5px 0 0;
	background-color: #ffffff;
	z-index: 2;
	text-align: left;
	}
dl.menu dd{
	margin:0;
	padding: 0 0 0 5px;
	background-color: #ffffff;
	z-index: 2;
	text-align: right;
	}

●応用
点線のデザインをdottedではなくdashedなどにしても良いと思います。

●注意点
背景色をエリアの色に合わせる必要があります。

あとは色やフォントなどをそれぞれのデザインに合わせていくだけです。
様々な場面で使えると思いますのでぜひ使ってみてください。