今回は「HTMLのdl・dt・ddタグの使い方」について紹介します。

それでは早速見ていきましょう！

dl・dt・ddタグとは？

dl・dt・ddタグとは、説明リストや定義リストを作るために使うHTMLタグのことです。

例えば用語の説明や、ニュースリストをマークアップする際に使われます。

dlタグの中に、用語を表すdtタグと用語の説明をするddタグが入ります。

dtとddの数は複数でも大丈夫です！

<dl>
    <dt>Amazon</dt>
    <dd>ECサイトを運営している会社</dd>
</dl>

dl・dt・ddタグのマークアップ例

今回は「dl・dt・ddタグ」を使って、実際のWEBサイトでもよく使われる「ニュースリスト」をマークアップしていきましょう！

完成形はこちら！

See the Pen
Untitled by webis (@webis-co)
on CodePen.

◎HTML

<!-- ニュースリスト -->
<div class="newslist">
    <dl>
        <dt>2021.3.15</dt>
        <dd>ニュースのタイトルが入ります。ニュースのタイトルが入ります。ニュースのタイトルが入ります。</dd>
    </dl>
    <dl>
        <dt>2021.3.15</dt>
        <dd>ニュースのタイトルが入ります。ニュースのタイトルが入ります。</dd>
    </dl>
    <dl>
        <dt>2021.3.15</dt>
        <dd>ニュースのタイトルが入ります。</dd>
    </dl>
</div>

dlタグの中に、日付を表すdtタグと日付に対するニュースのタイトルを表すddタグを用意します。

◎CSS

/* ニュースリスト */
.newslist {
  max-width: 500px;
  margin: 0 auto;
}
.newslist dl {
  display: flex;
  align-items: flex-start;
  padding: 20px 0;
  line-height: 1.5;
  border-top: 2px solid black;
}
.newslist dl:last-child {
  border-bottom: 2px solid black;
}
.newslist dl dt {
  padding: 0 20px;
}

/* レスポンシブ */
@media (max-width: 600px) {
  .newslist dl {
    font-size: 12px;
  }
}

「display: flex;」で横並びにしてニュースリストを作成しました。

まとめ

以上が、「HTMLのdl・dt・ddタグの使い方」でした。