HTMLでは、よくリストを使うことがあります。

例えば、スマホサイトでよく見かける右側に本文、
左側に写真というリストがもっともよく見かけるものでしょう。

今回は、そんなリストの作り方を解説していきます。

よく使われるリストをつくるタグとしては
ol と ul があります。

ol が自動的にリスト項目に対して番号を振り分けるのに対して
ul でリストを作成すると、番号は振り分けされません。

代わりに ul でリストを作成すると、・が先頭につきます。

構文をみると、ほぼ同じような書き方になります。

olリストの場合は

ulりすとの場合は

というように、ほぼ同じです。

どちらもリスト項目は li タグの中に書くようになります。

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

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

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

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

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

ゼロから作成する場合

として展開すると

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

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

これでひな形ができたので、まずは ol リストを作成してみましょう。

簡単に記述するために Emmet で書いて展開します。

これを展開すると

となります。

入れ子にしたり、子要素として記述したい場合には > を使います。
もし、同じ階層に記述したいのなら > ではなく + で記述します。

これを ctrl +shift + h でプレビューを見ると、
リストに順番がついているのがわかります。

Screenshot from 2016-06-04 08:51:18

次に ul でのリストを作成してみましょう。

これを展開すると

となります。

番号の代わりに、先頭に・がついているのがわかります。

Screenshot from 2016-06-04 08:56:15

ちなみに、ul と ol を組み合わせて使うこともできます。
レシピを載せるときなどに使うとわかりやすくなります。

少々複雑になりますが、Emmet で記述すると簡単にできます。

メニュー$というように、$を使うと展開したときに連番になります。
*5 は繰り返し回数ですので、5つ作成します。

これを展開すると、

となります。

ctrl + shift + h で確認すると、ul と ol を混ぜたリストになっているのがわかります。

Screenshot from 2016-06-04 09:04:05

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

・番号付きのリストを作成するときには ol タグを使用する。
・番号が不要の場合には ul タグを使用する。
・リストの中身は li タグを使い作成する。
・ul と ol は組み合わせて使用することが可能。

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