本サイトはアフィリエイト広告を利用しています

説明リスト（dl）を横並びに表示する方法【HTML＆CSS】

2022.10.02
－ スポンサーリンク －

HTMLのdl要素は、定義（説明）リストを作成できます。

ulとの使い分けに悩むこともありますが、ulのほうは「項目を見やすく表示する」のに対し、dlには「定義リスト」という役割が与えられています。

HTML5になってから「説明リスト」と変わったため、柔軟に解釈されて多様な使い方ができるようになっています。

どんな場面で使われているかを探してみると、従来のように用語の説明に使われるのはもちろん、「Q&A」だったり、レシピの材料表示だったり、かなり多様な使われ方をしているのを見かけます。

Q: 料金はいくらですか？
A: 毎月5,000円です。
Q: 途中解約できますか？
A: 可能です。
Q: 定休日は？
A: 毎週水曜日にお休みします。

かなり便利なので個人的に良く使いたくなる要素ですが、場合によっては横並びに表示したいものがあります。

CSSを使えば横並び表示も可能ですが、わりとコツのいる要素で、毎回使用するたびに悩みます。

そこで、いくつかのサンプルを作ってみることにしました。

このレイアウトは、CSSのフレックスボックスを理解するのにも役立ちます。

「dl」の使い方

dl要素の中には、dt（用語）とdd（用語説明）をそれぞれ1個以上挟んで記述します。

  • dl要素は「definition list」の略。（definition=定義)
  • dt要素は「definition term」の略。（term=用語)
  • dd要素は「definition description」の略。(description=説明）

dlを使うときは

dl、dt、ddをセットで使う！と覚えましょう。

用語の解説をする場面で、改行やインデントを使って見やすく表示することもできますが、dlを使うことで検索エンジンが「この部分は説明リストだ」と理解しやすくなるメリットがあります。

基本の記述

<dl>は「ここからここまでは、説明リストです」ということを示しています。

基本的には、<dt>と<dd>が対になり、それを<dl>で挟みます。

<dl><dt>用語</dt><dd>用語の説明</dd></dl>

デフォルトの表示ではdtとddに改行が入り、縦に並んで表示されます。

<dl>
  <dt>Word</dt>
  <dd>文章作成ソフトです。</dd>

  <dt>Excel</dt>
  <dd>表計算ソフトです。</dd>

  <dt>PowerPoint</dt>
  <dd>プレゼンテーションソフトです。</dd>
</dl>

－ □ ×

Word
文章作成ソフトです。
Excel
表計算ソフトです。
PowerPoint
プレゼンテーションソフトです。

また、定義リストとして利用する場合はdfnで囲むことで、その言葉が定義語であることを明確にできます。

<dl>
  <dt><dfn>Word</dfn></dt>
  <dd>文章作成ソフトです。</dd>

  <dt><dfn>Excel</dfn></dt>
  <dd>表計算ソフトです。</dd>

  <dt><dfn>PowerPoint</dfn></dt>
  <dd>プレゼンテーションソフトです。</dd>
</dl>

－ □ ×

Word
文章作成ソフトです。
Excel
表計算ソフトです。
PowerPoint
プレゼンテーションソフトです。

「flex」を使って横並びにする

HTML要素を横並びにする場合、CSSにはfloat:leftを使う方法と、display:flexを使う方法があります。

以前はfloatが使われることがほとんどでしたが、CSS3でFlexboxが導入されてからは、レスポンシブ対応が容易だという理由で、Flexboxを利用したレイアウト作りが主流になっています。

Flexboxの正式名称は「Flexible Box Layout Module」です。

『フレキシブル』

つまりフレックスボックスは『柔軟にレイアウトするための箱』というわけです。

Flexboxは、親要素にdisplay:flexを指定するだけです。そして、入れ子として記述した子要素をどのように配置するか、の設定ができます。

dlで作った説明リストを横並びで表示するために、このFlexboxを使います。

2.1. 基本形

親要素dlをFlexboxにすることで、中のdtとdd要素の配置を横並びにできます。

サンプル1

<dl class="soft">
  <dt>Word</dt>
  <dd>文章作成ソフトです。</dd>

  <dt>Excel</dt>
  <dd>表計算ソフトです。</dd>

  <dt>PowerPoint</dt>
  <dd>プレゼンテーションソフトです。</dd>
</dl>
.soft{
  display:flex; /*横並び*/
  flex-wrap: wrap; /*折り返し*/
  width: 350px
 }
.soft dt {
  width: 100px;
}
.soft dd {
  margin-left: 0; /*初期値リセット*/
  width: 250px;
}

－ □ ×

Word
文章作成ソフトです。
Excel
表計算ソフトです。
PowerPoint
プレゼンテーションソフトです。
  • 親要素にdisplay:flexを指定します。
  • 複数行に対応するため、親要素にflex-wrap:wrapで折り返し指定しています。
  • flex-wrpa:wrapを指定してあるので、dt幅とdd幅を合わせた幅が親要素と同じ、もしくは親要素より小さくする必要があります。
    （横並びにならなくなる！）
  • ddには、デフォルトでmargin-left（左余白）が設定されています。この余白分を「0」指定してリセットするか、ddの幅から余白分を差し引くなどして調整が必要です。

サンプル2

<dl class="company">
  <dt>会社名</dt>
  <dd>〇〇〇〇株式会社</dd>

  <dt>所在地</dt>
  <dd>千代田区大手町1丁目〇番地<br>第三〇〇ビル12階</dd>

  <dt>電話番号</dt>
  <dd>03-9999-××××</dd>
</dl>
.company{
  display:flex; /*横並び*/
  flex-wrap: wrap; /*折り返し*/
 }
.company dt,
.company dd{
  padding: 6px;
}
.company dt {
  width: 25%;
}
.company dd {
  margin-left: 0; /*初期値リセット*/
  width: 75%;
}

－ □ ×

会社名
〇〇〇〇株式会社
所在地
千代田区大手町1丁目〇番地
第三〇〇ビル12階
電話番号
03-9999-××××

要素の幅は「％」で指定することもできます。

  • Flexbox(親要素)の幅を100％として、dtとddの幅の割合を指定しています。
  • 親要素の幅 ≧ dt＋dd
  • ddのデフォルト左余白が必要ないためリセットします。

2.2. calc()関数を使って幅を指定する

calc()関数を使うと、CSSで計算結果の数値をプロパティの値として指定できます。

calc()関数の使い方は簡単で、「()」カッコの中に計算式を入れるだけです。（四則演算）

<dl class="glossary">
  <dt>word</dt>
  <dd>ワープロソフト</dd>
  <dt>Excel</dt>
  <dd>表計算ソフト</dd>
  <dt>Power Point</dt>
  <dd>プレゼンテーションソフト</dd>
</dl>
.glossary{
   display: flex;
   flex-wrap:wrap;
}
.glossary dt,
.glossary dd {
   padding: 6px;
}
.glossary dt{
   flex-basis: 120px; /*幅*/
}
.glossary dd {
   margin-left: 0; /*初期値リセット*/
   flex-basis: calc(100% - 120px); /*幅*/
}

－ □ ×

word
ワープロソフト
Excel
表計算ソフト
Power Point
プレゼンテーションソフト
  • Flexbox内の要素の幅は、widthではなくflex-basisを使っています。
  • flex-basisプロパティは、フレックスアイテム（Frexbox内の要素）の基本幅を指定します。

【flex-basisについて】

flex-basisを使う時は、親要素にdisplay:flexが指定されている必要があります。

flex-basisは、widthと同様に要素の幅を指定するプロパティです。

widthが純粋に横幅を指定するのに対し、flex-basisは主軸方向に対して幅を指定します。

flex-flow:rowの時には横幅を表しますが、flex-flow: columnを指定して主軸が縦方向になる場合は縦方向の幅を表します。

2.3. 表形式で表示する

<dl class="glossary_table">
  <dt>word</dt>
  <dd>ワープロソフト</dd>
  <dt>Excel</dt>
  <dd>表計算ソフト</dd>
  <dt>Power Point</dt>
  <dd>プレゼンテーションソフト</dd>
</dl>
.glossary_table{
  display: flex;
  flex-wrap: wrap;
  background-color: #FFF;
  border-top: 1px solid #E4E4E4;
  border-left: 1px solid #E4E4E4;
}
.glossary_table dt{
  flex-basis: 120px;
  background-color: #FBFBFB;
  font-weight: bold;
}
.glossary_table dd {
   margin-left: 0; /*初期値リセット*/
   flex-basis: calc(100% - 120px);
}
.glossary_table dt,
.glossary_table dd{
  padding: 6px;
  box-sizing: border-box;
  border-right:  1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
}

－ □ ×

word
ワープロソフト
Excel
表計算ソフト
Power Point
プレゼンテーションソフト

tableタグを使わずに、見た目を表形式にしています。

「dt」と「dd」を「div」で挟む

HTML 5.2 以降は、dlの中にdivを配置できるようになりました。
divが使えると、行ごとに下線を設定するのが楽になるなど、スタイルの幅が広がります。

項目ごとに下線を引く

dtとddをdivで挟み、そのdivに下線を表示するよう指定します。

<dl class="description">
 <div>
   <dt>word</dt>
   <dd>ワープロソフト</dd>
 </div>
 <div>
   <dt>Excel</dt>
   <dd>表計算ソフト</dd>
 </div>
 <div>
   <dt>Power Point</dt>
   <dd>プレゼンテーションソフト</dd>
 </div>
</dl>

.description div{
  display:flex;
  justify-content: flex-start;
  padding: 6px;
  border-bottom: 1px dotted #c7c7c7;
}
 .description dt {
  width: 120px;
}
.description dd {
  margin-left: 0;
  width: calc(100% - 120px);
}

－ □ ×

word
ワープロソフト
Excel
表計算ソフト
Power Point
プレゼンテーションソフト　テストテストテストテスト

border-bottomで下線を指定しています。線の太さ、種類、色はお好みで変更できます。

【参考】　線の種類

点線
dotted
破線
dashed
実線
solid
  • divの中にdtとddを挟むことでflex-wrapの指定がなくてもdiv内で折り返されるようになります。

横並び応用編

疑似要素を使ってリストマーカーを付ける

<div class="company-ico">
<dl>
<div><dt>会社名</dt><dd>〇〇〇〇株式会社</dd></div>
<div><dt>所在地</dt>
<dd>東京都千代田区大手町1丁目〇番地 ××ビル12階</dd></div>
<div><dt>電話番号</dt><dd>03-9999-××××</dd></div>
<div><dt>代表者</dt><dd>▲▲ △△△</dd>
</div>
<div><dt>営業時間</dt><dd>9：00～17：00<br>毎週水曜日休業</dd></div>
</dl>
</div>
.company-ico div{
  display: flex;
  justify-content:flex-start;
  border-bottom: 1px dashed #c7c7c7;
}
.company-ico div::before{
  content: "■";
  color: #00897b;
}
.company-ico dt {
  flex-basis: 80px;
  font-weight: 900;
}
.company-ico dd {
  margin-left: 0;
  flex-basis: calc(100% - 80px);
}
.company-ico div::before,
.company-ico dt,
.company-ico dd{
  padding: 3px 4px;
}

－ □ ×

会社名
〇〇〇〇株式会社
所在地
東京都千代田区大手町1丁目〇番地 ××ビル12階
電話番号
03-9999-××××
代表者
▲▲ △△△
営業時間
9：00～17：00
毎週水曜日休業
  • contentには、マーカーとして使う任意の文字列を「”」（ダブルクォーテーション）で囲って指定します。

【参考】

  • ●（黒丸印）
  • ○（白丸印）
  • ■（四角）
  • □（四角）
  • ★（黒星）
  • ☆（白星）
  • ※（こめ印）
  • 文字列を使うためcolorで色の指定ができます。

疑似要素で Font Awesome を使う

テーマCocoonでは、Webアイコンフォントの Font Awesom を使用することができるので、疑似要素を使ってリストマーカーに指定してみます。

<div class="company-fa">
<dl>
<div><dt>会社名</dt><dd>〇〇〇〇株式会社</dd></div>
<div><dt>所在地</dt>
<dd>東京都千代田区大手町1丁目〇番地 ××ビル12階</dd></div>
<div><dt>電話番号</dt><dd>03-9999-××××</dd></div>
<div><dt>代表者</dt><dd>▲▲ △△△</dd>
</div>
<div><dt>営業時間</dt><dd>9：00～17：00<br>毎週水曜日休業</dd></div>
</dl>
</div>
.company-fa div{
  display: flex;
  justify-content:flex-start;
  border-bottom: 1px dashed #c7c7c7;
}
.company-fa dt,
.company-fa dd {
  padding: 3px 4px;
}
.company-fa dt {
  flex-basis: 100px;
  font-weight: 900;
}
.company-fa dd {
  margin-left: 0;
  flex-basis: calc(100% - 100px);
}
.company-fa dt::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f4d8";
  color: #8bc34a;
  padding-right: 6px;
}

－ □ ×

会社名
〇〇〇〇株式会社
所在地
東京都千代田区大手町1丁目〇番地 ××ビル12階
電話番号
03-9999-××××
代表者
▲▲ △△△
営業時間
9：00～17：00
毎週水曜日休業

FontAwesomeをCSSで使う際の注意点。

  • font-familyプロパティでスタイルを指定します。無料版のVer.5を使う場合は"Font Awesome 5 Free"と記述します。この指定を忘れると、アイコンが表示されない場合があります。
  • font-weightプロパティを記述します。無料版のVer.5を使う場合はfont-weight:900と指定します。この指定を忘れると、アイコンが表示されない場合があります。
  • contentにはアイコンフォントのUnicodeを指定します。

現在Cocoonで利用できるFont Awesomeの
バージョンは「4」もしくは「5」です。

料理レシピの材料表示（dd要素を「右揃え」で表示する）

<dl class="recipe">
 <div>
   <dt>コーヒー</dt><dd>400ml</dd>
 </div>
 <div>
   <dt>砂糖</dt>
   <dd>50g</dd>
 </div>
 <div>
   <dt>粉ゼラチン</dt>
   <dd>10ｇ</dd>
 </div>
</dl>
.recipe div {
  display:flex;
  justify-content:flex-start;
  border-bottom: 1px dashed #c7c7c7;
}
.recipe dt,
.recipe dd{
  padding: 3px 10px;
}
.recipe dt {
  flex-basis: 10em;
}
.recipe dd {
  margin-left: auto; /*要素を右寄せ*/
  padding-right: 1em;
}
.recipe div dt::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f14a";
  padding-right: 8px;
}

－ □ ×

コーヒー
400ml
砂糖
50g
粉ゼラチン
10g

Flexbox内でブロック要素を右寄せにするため、ddにmargin-left:autoを指定しています。

その他、デザインサンプル

タグ風

コース名
初級コース
レッスン
水曜日／17:00～19:00
会費
3,000円/月
<dl class="course">
  <div><dt>コース名</dt><dd>初級コース</dd></div>
  <div><dt>レッスン</dt><dd>水曜日／17:00～19:00</dd></div>
  <div><dt>会費</dt><dd>3,000円/月</dd></div>
</dl>
.course div{
   display: flex;
   justify-content:flex-start;
   background: #26a69a;
   border-radius: 30px 8px 8px 30px ;
   padding: 6px;
   margin-bottom: 5px;
   color: #fff;
   width: 400px;
}
.course dt{
   flex-basis: 120px;
   position:relative;
   padding-left: 10px;
 }
.course dt::before{
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 1em;
    height: 1em;
    background: #e0f2f1;
    border-radius: 50%;
    margin-right: 8px;
}
.course dd{
   flex-basis: calc(100% - 120px);
   margin-left: 0;
}
.course dd::before{
   content: ":　"; /*右側は全角スペースで余白*/
}

表形式＆1行ごとに背景色を変える

word
ワープロソフト
Excel
表計算ソフト
Power Point
プレゼンテーションソフト
Outlook
メール管理ソフト
<dl class="design-table">
  <div><dt>word</dt><dd>ワープロソフト</dd></div>
  <div><dt>Excel</dt><dd>表計算ソフト</dd></div>
  <div><dt>Power Point</dt><dd>プレゼンテーションソフト</dd></div>
  <div><dt>Outlook</dt><dd>メール管理ソフト</dd></div>
</dl>
.design-table {
  border-top: 1px solid #E4E4E4;
  width: 400px;
}
.design-table div{
  display: flex;
  background-color: #FFF;
  border-left: 1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
}
.design-table div:nth-child(even){
  background-color: #FBFBFB;
}
.design-table dt{
  flex-basis: 140px;
  font-weight: bold;
}
.design-table dd {
   margin-left: 0; /*初期値リセット*/
   flex-basis: calc(100% - 140px);
}
.design-table dt,
.design-table dd{
  padding: 6px;
  box-sizing: border-box;
  border-right:  1px solid #E4E4E4;
}

疑似クラスを使って、奇数行か偶数行かを指定できます。

【疑似クラス】

奇数行
:nth-child(odd)
偶数行
:nth-child(even)


HTML＆CSS
CSS箇条書き逆引き
Share
さやびー
－ スポンサーリンク －
タイトルとURLをコピーしました