dl dt ddを横並びにする方法【CSSデザイン】

2023年12月21日

HTMLで項目と値をセットで表現するときは、説明リストの<dl> <dt> <dd>タグを使います。
例えば、ホームページのお知らせ欄、プロフィール、会社案内、よくある質問、フォームなど、項目と値で構成されるコンテンツが該当します。
デザインの見た目は、tableタグで作ったときの表テーブルと似ていますが、tableはレイアウト目的としての使用は非準拠となっています。
つまり、SEO対策の観点からも、dl dt ddを使う構成のほうが正しい表現方法です。

このようにdlタグでレイアウトする場合、dtとddをCSSで横並びにする機会が多くあります。
ここでは、dtとddを横並びにする方法を解説します。

dl dt ddのルール

まず、HTMLのdl、dt、dtの基本ルールについて、復習しておきます。

dl要素の基本ルールは、dlの中ではdt要素とdd要素のセットが1つ以上必要なことです。

dtやddだけで構成することはNGです。
そして、ddは、必ずdtより後にくるように配置します。
また、dtとddは1対1の関係のみならず、1対多の関係でも構成することができます。

ホームページによくある例として、お知らせコンテンツをイメージしてみましょう。
dl dt ddを使う場合、HTMLの基本的な構成はこのように書くことができます。

<dl>
  <dt>20xx.03.03</dt>
  <dd>企業説明会のお知らせ</dd>
  <dt>20xx.02.02</dt>
  <dd>新商品のお知らせ</dd>
  <dt>20xx.01.01</dt>
  <dd>年末年始の営業のお知らせ</dd>
</dl>

の部分に項目（日付）を、の部分に値（説明）が入ります。
dl要素の中で、dtとddが1対1の関係になっていますね。

HTMLのみの記述だと、ブラウザではこのように表示されます。

20xx.03.03: 企業説明会のお知らせ
20xx.02.02: 新商品のお知らせ
20xx.01.01: 年末年始の営業のお知らせ

dl dt ddの横並び CSS基本デザイン

次は、CSSのflexboxを使う方法で横並びにデザインしてみましょう。

ポイントは、dtとddをdiv要素でグループ化することです。
HTML5.2以降から、dl要素の直下に、divタグを配置することができるようになりましたので、このルールを活用します。

もちろん、divでグループ化しなくても、dlに直接flexboxを使うことで横並びにすることは可能ですが、もし、上下縦横の配置や、罫線など細かいレイアウトデザインを行う場合は、divで囲っておいたほうが、スタイル指定の調整が簡単です。

dl要素の中のdtとddをdivでグループ化したHTMLの例です。
例では、dlとdivに任意のクラス名を付けています。

<dl class="sample1">
  <div class="sample_list">
    <dt>20xx.03.03</dt>
    <dd>企業説明会のお知らせ</dd>
  </div>
  <div class="sample_list">
    <dt>20xx.02.02</dt>
    <dd>新商品のお知らせ</dd>
  </div>
  <div class="sample_list">
    <dt>20xx.01.01</dt>
    <dd>年末年始の営業のお知らせ</dd>
  </div>
</dl>

dt要素とdd要素を横並びにするために、div要素にCSSで、display:flexを指定します。

.sample1 .sample_list {
  display: flex;
}
.sample1 .sample_list dt,
.sample1 .sample_list dd {
  padding: 5px; /* dtとdd間のスペース */
}

ブラウザでの結果は、この通りです。

20xx.03.03: 企業説明会のお知らせ
20xx.02.02: 新商品のお知らせ
20xx.01.01: 年末年始の営業のお知らせ

日付と説明が横並びになっていますね。

dl dt ddの横並び CSS応用デザイン

dl要素内のdtとddは、1対多の関係でも構成することができます。
つまり、表のように複数列を横並びにすることが可能です。

応用的な使い方の例として、dt、ddのテキストを上下左右中央配置にして、罫線、偶数行に背景色を付けてみましょう。

<dl class="sample2">
  <div class="sample_list">
    <dt>商品A</dt>
    <dd>5,000円</dd>
    <dd>上級者向き</dd>
  </div>
  <div class="sample_list">
    <dt>商品B</dt>
    <dd>3,000円</dd>
    <dd>中級者向き</dd>
  </div>
  <div class="sample_list">
    <dt>商品C</dt>
    <dd>1,000円</dd>
    <dd>初級者向き</dd>
  </div>
</dl>

CSSは、このように書きます。

.sample2 .sample_list{
  display:flex;
  justify-content: flex-start;
  border-bottom: 1px solid #ccc;
}
.sample2 .sample_list dt {
  width: 200px;
  padding: 5px;
  text-align: center;
}
.sample2 .sample_list dd {
  padding: 5px;
  width: calc(100% - 200px / 2);
  border-left: 1px solid #ccc;
  text-align: center;
}
.sample2 .sample_list:nth-child(even){
  background: #f2f2f2;
}
.sample2 .sample_list:first-child{
  border-top: 1px solid #ccc;
}

まず、dtとddをグループ化した親要素であるdivに、display:flexを指定することで、横並びにします。

次に、dtの幅を200pxの固定幅にします。
ddの幅は、レスポンシブに対応できるようcalc()関数を使ってみます。
calc()は、CSSのプロパティ値の計算ができる便利な関数です。
calc(100% – 200px / 2)は、calc関数を使ってddの幅を計算しています。
幅100%からdtの幅分を差し引いて、余りの幅を残りの2列で等分に分ける値になります。

背景色は、疑似クラスを使って偶数だけにスタイルを指定します。
罫線は、divにborder-bottmで下に罫線を指定します。
1番最初のdivにだけは、疑似クラスを使って、border-topで上に罫線を指定します。

ブラウザでの結果は、この通りです。

商品A: 5,000円; 上級者向き
商品B: 3,000円; 中級者向き
商品C: 1,000円; 初級者向き

dl dt ddを使って表のようなデザインができました。

dl dt ddをレスポンシブ化する方法

dl dt ddを使って横並びにレイアウトした場合のレスポンシブ対応の方法を紹介します。
よく使うスタンダードなテクニックなので覚えておきましょう。

レスポンシブの方法は簡単です。
メディアクエリを使って、パソコンでは横並びに表示して、スマホでは横並びを解除します。
メディアクエリの書き方と使い方については、こちらで詳しく解説していますので参考にしてください。

HTMLは、お知らせの構成を使ってみましょう。

<dl class="sample3">
  <div class="sample_list">
    <dt>20xx.03.03</dt>
    <dd>企業説明会のお知らせ</dd>
  </div>
  <div class="sample_list">
    <dt>20xx.02.02</dt>
    <dd>新商品のお知らせ</dd>
  </div>
  <div class="sample_list">
    <dt>20xx.01.01</dt>
    <dd>年末年始の営業のお知らせ</dd>
  </div>
</dl>

基準は、モバイルファーストを想定して、スマホ時はflexboxの指定はなしとします。
メディアクエリ@media (min-width: 768px)で、768以上、つまりPCサイズのブラウザ幅のときは、flexboxで横並びになるよう指定します。

/* 画面サイズ767px以下に適用するスタイル */
.sample3 .sample_list {
  border-bottom: 1px dotted #ccc;
}

/* 画面サイズ768px以上に適用するスタイル */
@media (min-width: 768px) {
.sample3 .sample_list {
  display: flex;
  align-items: center; //　上下中央配置
}
.sample3 .sample_list dt {
    width: 100px;
    padding: 5px;
}
.sample3 .sample_list dd {
    flex: 1;
    padding: 5px;
}
}

結果は、このようになります。ブラウザの幅を伸縮させてご覧ください。
ブラウザの幅が767px以下では、dtとddは縦並びになります。
ブラウザの幅が768px以上では、dtとddは横並びになります。