HTMLには本当に様々なタグがありますよね。そんな中で自分で言葉を定義し、説明することができるタグをご存じですか？
HTMLで任意の言葉を説明するタグとは？
今回は、ddタグの
・基本的な使い方
・定義リストの作成方法(dtタグ・dlタグとセットでddタグを使う)
について解説します。また説明を定義するddタグとセットで使う、dlタグ、dtタグも併せて紹介しているので、ぜひ参考にしてみてくださいね。
目次
ddタグとは
ddタグの読み方
ddタグはそのまま「ディーディータグ」と読みます。ddとは、”definition description”=定義の説明という意味を持つ英語の、頭文字をとっています。
ddタグの説明
ddタグの略前の英語を見ればわかる通り、ddタグはdtタグ（詳しくは後述）で定義した単語の説明を行うことができるタグです。<dd></dd>で囲った言葉は、直前で定義された言葉を説明していることになるのです。
ddタグで利用できる属性
ddタグでは、グローバル属性のみが使用可能です。ここでは汎用的なグローバル属性のみを記載しています。
| 属性 | 説明 |
|---|---|
| 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 | 完全対応 |
ddタグの基本的な使い方
ddタグの使い方
定義された言葉を説明するには、<dd></dd>で任意の言葉を囲います。このタグに囲まれた部分のみが、直前で定義された言葉の説明となります。
See the Pen
abZjYEb by rabbittyu (@rabbittyu)
on CodePen.
実はddタグだけでは、言葉を説明することはできません。説明する言葉が定義されていないからです。上のコードを見てもらえれば分かると思いますが、見た目は<p>タグと全く同じddタグは先頭にスペースがあるのみで、文字だけではpタグと区別がつきませんよね。
定義リストの使い方(dtタグ・dlタグとセットでddタグを使う)
ではここでddタグとセットで使う、dtタグ、dlタグについて簡単に解説します。ここで初めてddタグが効力を発揮するので、実際の使い方はここで習得しましょう！
See the Pen
yLJqKmd by rabbittyu (@rabbittyu)
on CodePen.
まずは各タグについて説明します。まずは先頭の<dl>タグ。これは「定義リスト」を意味するタグで、<dl>から</dl>までを、リストとして保持しています。
そして<dd>タグの上にあるのが、<dt>タグ。これは「定義語」を表すタグで、任意の単語を定義することができます。これを説明するのが<dd>タグの役割なのです。
<dt>タグ・・・定義語を作成する
実行結果を見てみると、ddタグで定義された説明部分のみインデントされており、単語→単語の説明という構図が、明確にわかりますよね。この定義リストは、単に辞書としての単語登録機能だけでなく、サイト内ではQ&Aやお問い合わせフォーム内でも使われています。
まとめ
今回は定義された言葉を説明する<dd>タグについてご紹介しました。
- <dl>タグ：定義リストを作成する
- <dt>タグ：任意の定義語を指定する
- <dd>タグ：指定された定義語を説明する
ddタグは、<dl>タグ、<dt>タグとセットで使わなければ、その効力を発揮できないのでこの3つはセットで覚えてしまいましょう！
