HTMLリファレンス:説明リスト<dl>タグの使い方を徹底解説!

HTMLの要素に、任意の説明リストを作成できるタグがあるのをご存じですか?

定義リストを作成する方法とは?

今回は、dlタグの

・基本的な使い方
・定義リストの詳しい作り方

・定義リストの装飾方法(CSS)

について説明します。さらに実際に説明リストを作成できるように、サンプルコードも記載!CSSでの装飾方法も解説していきます。

dlタグとは

 

dlタグの読み方

<dl>タグはそのまま「ディーエルタグ」と読みます。“definition list”=定義リストの頭文字をとっています。

dlタグの説明

<dl>タグで囲われた部分は、任意の定義リストを表します。<dl>タグ内では、<dt>タグで任意の用語を定義し、<dd>タグでその用語を説明します。

dlタグで利用できる属性

dlタグではグローバル属性のみが使用可能です。ここでは汎用的なグローバル属性のみを記載しています。

属性 説明
accesskey属性 アクセスキーを指定する
autocapitalize属性 キーボード入力時の自動大文字化の任意指定
class属性 任意のクラス名を与える(複数要素で同クラス名使用可能)
 contenteditable属性 要素内の編集を許可する
 dir属性 文字の書字方向を指定する
 draggable属性 要素をドラッグ可能にする
 hidden属性 要素が無関係であることを指定する
 id属性 任意のIDを与える(一つのHTML文書内で同一のidはひとつだけ:一意)
 lang属性 要素内の言語を指定する
 style属性 スタイルシートを適用する
 translate属性 要素内の翻訳を許可する

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 12
Firefox  1
nternet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  4
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

dlタグの基本的な使い方

dlタグ使い方

dlタグは<dl></dl>でリストを作成し、その中に定義語を表す<dt>タグと、その定義語を説明する<dd>タグを書きます。

dlタグはこの2つの要素とセットで使ってこそ効果を発揮するので、dlタグだけでなくdtタグとddタグも覚えてしまいましょう。

See the Pen
OJXwGPE
by rabbittyu (@rabbittyu)
on CodePen.

上記のコードでは「偉人リスト」というリストを作成しました。dtタグで偉人の名前を明示し、ddタグでその偉人の職業を説明しています。ここでは定義リストは用語集としての働きをしています。

dtとddは複数ずつ対応付けて、説明リストを作成することもできます。

dtタグを複数書く

dtタグを複数書き、その複数の定義語に対して一つの説明をしています。

See the Pen
PozdzqG
by rabbittyu (@rabbittyu)
on CodePen.

ddタグを複数書く

逆にdtタグ1つに対し、複数のddタグを書くこともできます。要は一つの定義語に対して、複数の説明を行っているのです。

See the Pen
xxOaOOe
by rabbittyu (@rabbittyu)
on CodePen.

dlタグの応用的な使い方


実は<dl>タグは用語集としての使い方だけではなく、Q&A内や、フォーム内でも使用されています。ここではHTML文書で作成したQ&Aに、CSSで彩を加えました。実際に定義リストを導入する際の参考にしてみてください。

See the Pen
wvWEzKx
by rabbittyu (@rabbittyu)
on CodePen.

まとめ


今回は<dl>タグの使い方を解説しました。

  • <dl>タグは説明リストを作成する
  • <dl>タグは説明リストだけでなく、Q&Aやフォームにも使用されている
  • <dl>タグの中には<dt>タグと<dd>タグを入れ、セットで使う
  • <dl>タグと<dd>タグは複数記載できる

以上が<dl>タグのポイントになります。dlタグをHTMLで書くだけでは少し物足りないので、CSSを使って彩を加えられるようになればベストです!

参考文献:
MDN web docs <dl>:説明リスト要素
コトダマウェブ

プログラミング学習に迷ったら相談してみよう!
無料でカウンセリングを受けてみる
※売り込みは一切致しません プログラミングスクール無料カウンセリング