LINEで送る

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

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

構文としては

1
2
3
4
  <dl>
    <dt>項目  </dt>
    <dd>項目の概要</dd>
  </dl>

というようになります。

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

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

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

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

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

ゼロから作成する場合

1
html:5

として展開すると

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
 
</head>
<body>
 
</body>
</html>

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

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

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

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

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

として展開します。

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

これを展開すると

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  <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>

となります。

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

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

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

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

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

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

こちらの記事もどうぞ