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>:説明リスト要素
コトダマウェブ
