[HTML]簡単!HTMLで定義リスト(dl)を使う方法
今回は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 とすることで展開したときに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 でプレビューをみてみましょう。
dl リストの場合、自動的にインデントしてくれているのがわかります。
このため、見やすいリストを作成することができます。
それでは、今回のまとめをしてみましょう。
・定義リストを作成するときには dl タグで範囲を指定する
・dt タグには用語を書き、dd タグには、その内容を書く。
これらの要素を使うことで、自分好みのリストを作成してきましょう。