こんにちは！ あますた(@amaguristar)です。

• 「お知らせを日にちと説明でリスト表示したいけどどうすれば良いんだろう？」

ってことありませんか？ cssを設定して簡単に解決できます。

　

定義リスト(<dl>)リストを使うのが一番簡単

具体的に何をしたいかと言うと、

お知らせ
2020-07-01　　てすとてすとてすと
2020-07-10　　テストテストテスト
2020-07-20　　てすとテストてすと

という表示。

ローテクで書いても良いのでしょうがせっかくタグという便利なものがあるので今回は利用。

とりあえず何も考えないでサクッと答えをだすと一番手取り早いのが定義リストを使用する方法。

定義リストを具体的に言うと<dl>・<dt>・<dd>タグのこと。それらを使用して簡単にHTMLを書くと。

<dl>
    <dt>2020-07-01</dt><dd>てすとてすとてすと</dd>
    <dt>2020-07-10</dt><dd>テストテストテスト</dd>
    <dt>2020-07-20</dt><dd>てすとテストてすと</dd>
</dl>

ここまでは簡単ですが、これを表示すると

2020-07-01

てすとてすとてすと

2020-07-10

テストテストテスト

2020-07-20

てすとテストてすと

と、改行されてしまいます。

そこでcssを下記のように設定。

dl.sample {
    overflow: hidden;
    padding: 10px;
}

dl.sample dt {
    float: left;
    font-weight: bold;
    width: 7em;
}

dl.sample dd {
    padding-left: 7em;
    margin-left: 0;
}

上記cssを先ほどの定義リストに適用すると、

2020-07-01

てすとてすとてすと

2020-07-10

テストテストテスト

2020-07-20

てすとテストてすと

よく見るお知らせリストのように表示されます。

簡単にポイントを説明すると下記3点。

1. <dt>に「float: left;」を設定
2. <dd>の左のmarginを「0」に設定
3. <dl>に「overflow: hidden;」を適用してfloatを解除

基本的にこの3つが出来てればあとは好みで調整すれば問題ないと思います。