[HTML]簡単！HTMLで定義リスト(dl)を使う方法　

更新：2017/12/05
ライター：IBC

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

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

構文としては

  <dl>
    <dt>項目  </dt>
    <dd>項目の概要</dd>
  </dl>

<dl>

<dd>項目の概要</dd>

</dl>

というようになります。

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

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

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

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

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

ゼロから作成する場合

html:5

html:5

として展開すると

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
<body>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

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

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

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

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

  (dl>dt{質問 $ }+dd{質問 $ の回答})*5

1	(dl>dt{質問 $ }+dd{質問 $ の回答})*5

として展開します。

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

これを展開すると

  <dl>
    <dt>質問 1 </dt>
    <dd>質問 1 の回答</dd>
  </dl>
  <dl>
    <dt>質問 2 </dt>
    <dd>質問 2 の回答</dd>
  </dl>
  <dl>
    <dt>質問 3 </dt>
    <dd>質問 3 の回答</dd>
  </dl>
  <dl>
    <dt>質問 4 </dt>
    <dd>質問 4 の回答</dd>
  </dl>
  <dl>
    <dt>質問 5 </dt>
    <dd>質問 5 の回答</dd>
  </dl>