【色々便利】シンプルな表を簡単作成!説明リストタグ【dl・dt・dd】を使いこなそう

スポンサーリンク

こんにちは、Webプログラマーのトムです。

さて今回は説明リストタグ【dl・dt・dd】の使い方について解説していきます。何らかの言葉や用語を説明する時に利用するのが基本ですが、従来はtableタグで書いていたようなシーンで、この説明リストタグを使うとより簡単便利に書けたりします。そのあたりにも触れていきます。

今回のポイント・・・簡単な表形式のデザインであれば、tableタグよりレスポンシブ対応が簡単にできる説明リストタグがお勧め。罫線のデザインも柔軟に対応できる

スポンサーリンク

説明リストタグの意味

  • dl(description list)・・・説明リスト
  • dt(description term)・・・説明する言葉/用語
  • dd(description / definition)・・・説明文/定義

という意味になります。以前は「定義リスト」という名前で利用されていましたが、HTML5以降は「説明リスト」という名前に変更されました。要は言葉、用語を説明したい時に使うタグということですね。コードにおいての基本的な流れは以下の通りです。

  • dlタグで「定義リスト」の記述であることを宣言
  • dtタグで囲まれた言葉・用語を、ddタグで囲まれた部分で説明・定義する

では実際のコードで使い方を確認していきましょう。

スポンサーリンク

使用例:用語と説明が”1対1″

HTML

<dl>
    <dt>犬</dt>
    <dd>ネコ目(食肉目)- イヌ科- イヌ属に分類される哺乳類の一種</dd>
    <dt>猿</dt>
    <dd>霊長目のうちヒト科を除いた哺乳類の総称</dd>
    <dt>雉(キジ)</dt>
    <dd>キジ目キジ科の鳥</dd>
</dl>

実行結果

See the Pen dl_01 by トム@株&不動産投資・Webプログラマー (@roby_tom) on CodePen.

基本的な使い方は上記の通り、一つの用語に対し一つの説明文を記述します。動作で重要な点としては、デフォルトの動作ではdtとddの間に改行が入ります。改行を入れたくない場合はCSSで制御する必要があります。そのやり方は後述します

使用例:用語と説明が”複数対1”、もしくは”1対複数”

先の例はdt(用語)とdd(説明)が1対1の記述でしたが、複数対1および、1対複数の記述も可能です。

HTML

<dl>
    <dt>福原 遥</dt>
    <dd>日本の女優、声優、歌手、ファッションモデル、元子役。</dd>
    <dd>埼玉県出身</dd>
    <dd>現世に現れた女性の形をした天使</dd>
    <dd>まいんちゃん</dd>

    <dt>ぶどう</dt>
    <dt>なし</dt>
    <dt>イチジク</dt>
    <dd>秋が食べ頃の果物</dd>
</dl>

実行結果

See the Pen dl_02 by トム@株&不動産投資・Webプログラマー (@roby_tom) on CodePen.

dtとdtの間、ddとddの間にも改行が入っていることが分かります。次は説明リストタグを使った応用例について解説します。

応用例1・・・新着ニュースの見出し

まずはWebサイトでまま見かける、新着ニュースの日付と見出しを1列のセットにして、ニュースを縦積みに書いて罫線を引くコードです。どんなデザインかは実行結果を見て頂ければわかると思います。※なおこれ以降の例ではリセットCSSを使用しています。

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>説明リストタグのテスト</title>
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <h2>新着ニュース</h2>
  <dl class="wrapper">
    <dt>2021.9.XX</dt>
    <dd>雑誌「XXXXX Vol.32」に後楽園大会の詳細をレポートして頂きました</dd>
    <dt>2021.9.XX</dt>
    <dd>【ダイナマイトツアー Vol.4】大田区民ホール大会のチケット発売について</dd>
    <dt>2021.8.XX</dt>
    <dd>【地域貢献】YY小学校への表敬訪問の詳細をレポート</dd>
    <dt>2021.8.XX</dt>
    <dd>【IR情報】2021年度第2四半期の決算情報を開示</dd>
    <dt>2021.7.XX</dt>
    <dd>【テレビ出演】マスター・トム選手がテレビXX系バラエティ「食レポバンザイ」に出演</dd>
  </dl>
</body>

</html>

CSS

.wrapper {
  max-width: 700px;
  margin: 0 auto;
}

h2 {
  text-align: center;
  margin: 30px;
}

dl {
  display: flex;
  flex-wrap: wrap;
}

dt {
  width: 20%;
  padding: 15px 0;
  border-top: 1px solid #bbbbbb;
}

dd {
  width: 80%;
  padding: 15px 0;
  border-top: 1px solid #bbbbbb;
}

dt:last-of-type {
  border-bottom: 1px solid #bbbbbb;
}

dd:last-of-type {
  border-bottom: 1px solid #bbbbbb;
}

実行結果

See the Pen dl_03 by トム@株&不動産投資・Webプログラマー (@roby_tom) on CodePen.

コードの主なポイントとしては以下の通りです。

  • dlに”display:flex”と”flex-wrap:wrap”を指定し、dtとddの間が改行されないようにする
  • dtの幅を全体の20%、ddの幅を全体の80%(合計で100%)とする
  • dt、ddの上部に罫線を引く(border-top)
  • dt、ddの最後の要素(last-of-type)の下部にも罫線を引く(border-bottom) ※ぱっと観だと線が見えないかもしれませんが、右上の”Edit on Codepen”をクリックして下さい

このデザインはtableタグを使っても実現可能ですが、私の感覚ではtableタグはそもそもtr,th,tdといったタグの数が多くて若干ややこしく、説明リストタグの方がシンプルで見やすく感じます。

応用例2・・・応用例1のレスポンシブ対応

説明リストタグを使う大きなメリットの1つは、レスポンシブ対応が楽にできることです。ここが動作の点でtableタグに対して説明リストタグのアドバンテージと言えます。

例えば応用例1をスマホアクセスの場合に、新着ニュースの日付(dt部分)と見出し部分(dd部分)を縦積みにしてみましょう。

CSS(追記部分のみ)

/* スマホ向けレイアウト */
@media(max-width: 500px) {
  dl {
    flex-direction: column;
  }
  dt, dd {
    width: 100%;
  }
}

実行結果

See the Pen dl_04 by トム@株&不動産投資・Webプログラマー (@roby_tom) on CodePen.

応用例1のコードでflexboxを使っていますので、レスポンシブ対応は楽ちんです。実際にブラウザのサイズを細くして頂くと、日付と見出しが縦積みになることが分かります。

応用例3・・・料理店のランチメニュー表示

See the Pen dl_05 by トム@株&不動産投資・Webプログラマー (@roby_tom) on CodePen.

料理店サイトのランチメニューの表示をイメージしてみました。料理名を示すdlタグの部分だけに点線の罫線を入れています。このデザインはtableタグですとちょっと難しいかもしれませんが、説明リストタグであればこのようなデザインも簡単に実現できます。

以上、説明リストタグのdl、dt、ddの使い方について解説しました!

タイトルとURLをコピーしました