dl・dt・ddをテーブルのようなデザインにする

dl・dt・ddとは？

dl・dt・ddは以前は定義リストという形で使われていましたが、HTML5で説明リストというものになりより使いやすいタグになりました。dlが説明リスト、dtが説明する対象、ddがdtを説明する文章という使い方をします。

dl・dt・ddの使い方としては以下のような感じです。

<dl>
	<dt>サッカー</dt><dd>11人でおこなうスポーツ</dd>
	<dt>野球</dt><dd>9人でおこなうスポーツ</dd>
	<dt>バスケット</dt><dd>5人でおこなうスポーツ</dd>
</dl>

listやtableと異なる点は、単なるリストや表ではなくdtの説明をddがおこなっているという意味を持たせることができる点です。検索エンジンにも意味のあるリストとして伝えることができます。

ただ、dl・dt・ddはそのまま使うと見た目がさっぱりすぎて閲覧者には見にくいリストになってしまいます。そこでCSSでのデザイン設定が必要になってきます。

テーブルのようなデザインにする

dl・dt・ddをテーブルのようなデザインで表示させるCSSをご紹介します。

構造としては、まずdlタグを折り返し可能なflex要素にし横幅を100%にします。そしてdtとddがセットで横幅100%になるようにwidthを設定しています。dtとddには背景・枠線・余白を設定してテーブルのようなデザインにしています。

dl.class{
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;
	align-items: stretch;	
	width: 100%;
	border: 1px solid #ccc;
	border-bottom: none;
}
dl.class dt{
	background: #f5f5f5;
	padding: 5px;
	width: 150px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
dl.class dd{
	background: #fff;
	padding: 5px;
	width: calc(100% - 150px);
	border-bottom: 1px solid #ccc;
}

レスポンシブに対応する

テーブルのようなデザインだとスマートフォンなどの小さい画面で見たときに、内容によっては見づらいときがあります。そこでレスポンシブ対応をおこなうことで小さい画面でも見やすいテーブルデザインにします。

dtとddの横幅を100%にすることで縦並びのテーブルにしています。またdtに関しては右の線を消して線が重複することを防止しています。

@media only screen and (max-width: 765px) {
	dl.class dt{ 
		width: 100%;
		border-right: none;
	}
	dl.class dd{
		width: 100%; 
	}
}