【CSS】レスポンシブな「dl dt dd」を作る

PCで表示する時は横並びで、スマホで表示する時は上下に変わる、レスポンシブな「dl dt dd」定義リストです。

新着情報を例にしたデモページです。

ブラウザの横幅を狭めてみてください。

◆html

<div class="topics">
<dl>
<dt>20180101</dt>
<dd>新着情報の内容が入ります。</dd>
</dl>
<dl>
<dt>20180101</dt>
<dd>新着情報の内容が入ります。</dd>
</dl>
<dl>
<dt>20180101</dt>
<dd>新着情報の内容が入ります。</dd>
</dl>
</div>

◆css

.topics dl {
padding: 15px 0;
border-bottom: 1px solid #ccc;
}

.topics dt {
padding-bottom: 5px;
}

@media screen and (min-width: 768px) {
.topics dt {
clear: left;
float: left;
width: 10%;
}
.topics dd {
margin-left: 11%;
}
}

「html」は特に難しいこともなく、通常の定義リストです。

「css」の方は、先にスマホで表示する時の記述をし、次にメディアクエリでPCで表示した時の記述をします。

PCの方は横並びになるような記述となります。