HTML4以前では「定義リスト」と呼ばれており、HTML5からは「記述リスト」と呼ばれる「dl」「dt」「dd」タグの使い方について、HTML初心者の方にはあまり馴染みがないのではないでしょうか。
本記事では、プログラマーとして上手く活用したいHTML5での「dl」「dt」「dd」タグの使い方についてご紹介していきたいと思います。
目次
HTML5の記述リスト dl・dt・ddタグって何？
HTML5では「記述リスト」と定義されたタグの組み合わせがあり、「dl」「dt」「dd」タグを使用して言葉や文章の「定義」または「説明」を記述することが可能です。
それぞれのタグの定義について確認しておきましょう。
dlタグ
HTML5では、dlタグを使用して「記述リスト」を作成します。
これから説明する言葉や文章の枠組みを作るためのタグです。
dlタグの中に1つ以上のdtタグとddタグを組み合わせて、記述リストを作成していきます。
dtタグ
dtタグの役割として「ddタグで説明する対象の”文言”または”文章”」を記します。
dlタグで作成した「記述リスト」の中で説明する「言葉」または「文章」を宣言する意味合いです。
dtタグの言葉に対して後述するddタグで具体的な内容を説明していきます。
ddタグ
ddタグの役割として「dtタグで宣言した言葉や文章の意味を定義(説明)する」役目を果たします。
dtタグで宣言した言葉に対して2つ以上の説明がある場合、ddタグを複数定義することも可能です。
また反対に、ddタグ1つで複数のdtタグの説明を一括して行うことも可能です。
HTML5でのdl・dt・ddタグの使い方をサンプルコードで確認しよう
では実際にサンプルコードを掲載しながらdl・dt・ddタグの使い方について解説していきたいと思います。
HTML5記述リストの基本構成
HTML5で記述リストを作成する最も基本的な構成としてdl・dt・ddタグを1つずつ記述したサンプルコードが下記となります。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>dd Sample</title>
</head>
<body>
<dl>
<dt>iPhone</dt>
<dd>スマートフォンです。</dd>
</dl>
</body>
</html>
「iPhone」という言葉を「スマートフォンです。」と説明しているシンプルな記述リストです。
サンプルコードをブラウザで表示した結果は下記のようになります。
1つのdtタグに対して複数のddタグを設定する
次に1つのdtタグで定義した言葉に対し、複数の説明をddタグで記述してみましょう。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>dd Sample</title>
</head>
<body>
<dl>
<dt>iPad</dt>
<dd>タブレットです。</dd>
<dd>Apple社の製品です。</dd>
</dl>
</body>
</html>
iPadという言葉に対し、ddタグで2種類の説明を記述しています。
2つ以上のdtタグに対して1つのddタグで説明する
2つ以上のdtタグで定義した言葉に対し、1つのddタグで説明出来るケースでは下記のように記載します。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>dd Sample</title>
</head>
<body>
<dl>
<dt>マニラ</dt>
<dt>セブ</dt>
<dd>フィリピンの都市です。</dd>
</dl>
</body>
</html>
サンプルでは「マニラ」「セブ」をまとめて、「フィリピンの都市です。」と説明している記述リストです。
複数のdt・ddタグを組み合わせたパターンを確認しよう
次に複数のdt・ddタグを組み合わせたパターンを確認してみましょう。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>dd Sample</title>
</head>
<body>
<dl>
<dt>名前</dt>
<dd>山田 太郎</dd>
<dt>職業</dt>
<dd>プログラマー</dd>
<dd>Webデザイナー</dd>
<dt>休日何をして過ごしていますか？</dt>
<dd>一日中ゲームをしています。</dd>
</dl>
</body>
</html>
サンプルでは人物のプロフィールのような形で記述リストを作成してみました。
dt・ddタグはいくつでも記述することが可能で、サンプルのように言葉や文章を組み合わせた記述リストの作成も可能です。
HTML5の記述リストdl・dt・ddタグの見た目を整えよう
HTMLで記述リストはデフォルトではサンプルで添付してきた画像のように言葉や文章と説明文が改行した状態で表示されています。
CSSでの横並び定義サンプルコード
実際にサンプルコードでCSSでの横並び定義を確認してみましょう。
index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>dd Sample</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<dl>
<dt>名前</dt>
<dd>山田 太郎</dd>
<dt>職業</dt>
<dd>プログラマー</dd>
<dd>Webデザイナー</dd>
</dl>
</body>
</html>
style.css
dt {
float: left;
width: 50px;
}
dt::after {
content: ":";
}
dd {
margin-left: 50px;
}
サンプルコードを実際にブラウザに表示すると下記のようになります。
まず要素を横並びに設定するため、dtタグに対して「float:left」を指定しています。
「width：50px」に関してはddタグの頭を揃えるためで、dtタグで定義された文字列の長さに関わらず同じ幅を確保するように設定しています。
ddタグに関しても頭文字を揃えるために、「margin-left」でdtタグに指定した横幅と同じ値を設定する必要があります。
「dt::after」に関しては、言葉と説明文の境目を分かりやすくするために、dtタグの後ろに「:」を必ず設定するよう記述しました。
さいごに： HTML5の記述リストdl・dt・ddタグの使い方を覚えて他のプログラマーに差を付けよう
本記事では、HTML5から記述リストと定義されたdl・dt・ddタグの使い方についてご紹介してきました。
記述リストに関しては、現場で働くプログラマーの方でも機会が少なく、使い方を知らなかったという方も多くいらっしゃいます。
ulタグを使用して無理やり記述リストのように記載している方や、なんでもtableタグで作成してしまう方もいらっしゃいますが、より適切なHTMLコーティングが出来るように、dl・dt・ddタグを使用した記述リストの使い方を理解しておきましょう。
HTML4では「compact属性」を利用することで、dtタグとddタグを横並びにすることが出来たのですが、HTML5では「compact属性」が廃止されたため、CSSで横並びを定義する必要があります。