【CSS】トップページのお知らせ部分をレスポンシブにする簡単な方法

ホームページ制作では、お知らせをつけることがほとんどです。
cssではよくある話なのですが、シンプルでも簡単にという場合が結構あるので、レスポンシブのお知らせを日付とタイトルの場合の記述方法を書いておきます

動作するサンプル（スマホとパソコンで表示が変わると思います）

以下の、HTMLとCSSを実装します

html

<div class=”info”>
<dl>
<dt>2020/3/1</dt>
<dd>ホームページをリニューアルしました</dd>
</dl>
<dl>
<dt>2020/2/1</dt>
<dd>営業時間変更のお知らせ</dd>
</dl>
<dl>
<dt>2020/1/1</dt>
<dd>台風による臨時休業</dd>
</dl>
</div>

css

<style>
.info dl {
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
.info dt {
padding-bottom: 6px;
}

@media screen and (min-width: 768px) {
.info dt {
clear: left;
float: left;
width: 22%;
}
.info dd {
margin-left: 16%;
}
}
</style>

dtとdlは標準だと縦に並びます。（これがスマホの縦並びになります）

PCの時は、左右が広げるので、floatにすることで右側に回り込ませるだけです

同時にclearでfloatを解除してあげます

あとは、余白の調整とよくやる線で項目を分けてあげるだけです

数値は適当なのでサイトに合わせて調整してみてください。

日付、タイトルの他にカテゴリを入れたい場合

HTML

<div class="info">
<dl>
<dt>2020/3/1<span>カテゴリ名</span></dt>
<dd>ホームページをリニューアルしました</dd>
</dl>
<dl>
<dt>2020/2/1<span>カテゴリ名カテゴリ名</span></dt>
<dd>営業時間変更のお知らせ</dd>
</dl>
<dl>
<dt>2020/1/1<span>カテゴリ名</span></dt>
<dd>台風による臨時休業</dd>
</dl>
</div>

CSS

<style>
.info dl {
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
.info dt {
padding-bottom: 6px;
}
.info dt span{
padding-left: 12px;
}

@media screen and (min-width: 768px) {
.info dt {
clear: left;
float: left;
width: 40%;
}
.info dd {
margin-left: 16%;
}
}
</style>

カテゴリ名は、spanで囲ってあげて余白を調整しただけです

もう少しレイアウトが必要な場合は、dtとddではなく、liを使ったりdivでやったりしています