今回はHTMLで定義リストの使い方を解説します。

定義リストの使い道としては、
質問とその回答や、用語とその解説文、というように
セットにして使います。

構文としては

というようになります。

実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。
なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

として展開すると

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

それでは、今回はQ&Aのようなものを作成してみます。

今回もEmmet で記述し、展開するようにします。

として展開します。

Emmet で $ を使うことで、連番を作成することができます。
また *5 とすることで展開したときに5つ作成することができます。
子要素に指定するときには > を。同一階層の場合は + で書きます。
{} の中にはタグの中身を記述します。

これを展開すると

となります。

ctrl + shift + h でプレビューをみてみましょう。

Screenshot from 2016-06-04 09:56:31

dl リストの場合、自動的にインデントしてくれているのがわかります。
このため、見やすいリストを作成することができます。

それでは、今回のまとめをしてみましょう。

・定義リストを作成するときには dl タグで範囲を指定する
・dt タグには用語を書き、dd タグには、その内容を書く。

これらの要素を使うことで、自分好みのリストを作成してきましょう。