お悩み一覧に戻る

お知らせなどで本文が複数行あるときに、2行目以降が日付の下に来ないように見た目を整えたい

2025.03.22

お知らせなどの情報をリスト形式で表示する際、本文が複数行にわたる場合に「2行目以降が日付の下にズレてしまう」ことがあります。この問題を解消し、見た目を整える方法を解説します。

目標

  • お知らせの日付と本文が横並びで整列する
  • 本文が複数行になっても、2行目以降が日付の下に回り込まないようにする

方法

このデザインを実現するには、次の手順で行います。

  1. HTMLの構造を見直す
  2. CSSのflexboxを使用して要素を横並びに配置する
  3. 各要素に幅を指定して整列を調整する

HTMLの構造

それぞれのお知らせ項目（<li>要素）の中に、日付と本文をそれぞれの子要素として配置します。

<ul class="news-list">
    <li>
        <p class="news-date">2023/01/15</p>
        <p class="news-text">
            <a href="#">キャンペーン第2弾スタート！<br>2/28までですのでお見逃しなく！</a>
        </p>
    </li>
    <li>
        <p class="news-date">2023/01/11</p>
        <p class="news-text">
            <a href="#">創業記念日！お得なキャンペーン！</a>
        </p>
    </li>
    <li>
        <p class="news-date">2023/01/04</p>
        <p class="news-text">
            <a href="#">2023年の営業スタート！</a>
        </p>
    </li>
    <li>
        <p class="news-date">2022/12/25</p>
        <p class="news-text">
            <a href="#">年末年始の営業のお知らせ</a>
        </p>
    </li>
</ul>
  • <ul> 要素はお知らせ全体のリストを表しています
  • <li> 要素が1件のお知らせを表します
  • 日付部分は <p class="news-date"> に記載し、本文部分は <p class="news-text"> に記載しています

CSSの設定

flexboxを活用して、日付と本文が常に横並びになるようにします。

.news-list li {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.news-date {
    width: 150px; /* 値は適宜調整してください */
}

.news-text {
    width: 500px; /* 値は適宜調整してください */
}

ポイント解説

  • .news-list li に display: flex; を指定することで、子要素が横並びになります。
  • .news-date に固定幅を指定することで、本文が複数行にわたっても2行目以降が日付の下に回り込むのを防止できます。
  • .news-text にも幅を指定して、全体のバランスを整えています。

関連したお悩み

お悩み一覧に戻る