[HTML]簡単!HTMLでリストを使う方法
HTMLでは、よくリストを使うことがあります。
例えば、スマホサイトでよく見かける右側に本文、
左側に写真というリストがもっともよく見かけるものでしょう。
今回は、そんなリストの作り方を解説していきます。
よく使われるリストをつくるタグとしては
ol と ul があります。
ol が自動的にリスト項目に対して番号を振り分けるのに対して
ul でリストを作成すると、番号は振り分けされません。
代わりに ul でリストを作成すると、・が先頭につきます。
構文をみると、ほぼ同じような書き方になります。
olリストの場合は
1 2 3 4 5 6 |
<ol> <li>リスト項目1</li> <li>リスト項目2</li> <li>リスト項目3</li> <li>リスト項目4</li> </ol> |
ulりすとの場合は
1 2 3 4 5 6 |
<ul> <li>リスト項目1</li> <li>リスト項目2</li> <li>リスト項目3</li> <li>リスト項目4</li> </ul> |
というように、ほぼ同じです。
どちらもリスト項目は li タグの中に書くようになります。
実際にコードを書いたほうが理解しやすいので、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 キーで展開します。
これでひな形ができたので、まずは ol リストを作成してみましょう。
簡単に記述するために Emmet で書いて展開します。
1 |
ol>li{リスト}*5 |
これを展開すると
1 2 3 4 5 6 7 |
<ol> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ol> |
となります。
入れ子にしたり、子要素として記述したい場合には > を使います。
もし、同じ階層に記述したいのなら > ではなく + で記述します。
これを ctrl +shift + h でプレビューを見ると、
リストに順番がついているのがわかります。
次に ul でのリストを作成してみましょう。
1 |
ul>li{リスト}*5 |
これを展開すると
1 2 3 4 5 6 7 |
<ul> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul> |
となります。
番号の代わりに、先頭に・がついているのがわかります。
ちなみに、ul と ol を組み合わせて使うこともできます。
レシピを載せるときなどに使うとわかりやすくなります。
少々複雑になりますが、Emmet で記述すると簡単にできます。
1 |
(ul>li{メニュー$}>ol>li{材料}*5)*5 |
メニュー$というように、$を使うと展開したときに連番になります。
*5 は繰り返し回数ですので、5つ作成します。
これを展開すると、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<ul> <li>メニュー1 <ol> <li>材料</li> <li>材料</li> <li>材料</li> <li>材料</li> <li>材料</li> </ol> </li> </ul> <ul> <li>メニュー2 <ol> <li>材料</li> <li>材料</li> <li>材料</li> <li>材料</li> <li>材料</li> </ol> </li> </ul> <ul> <li>メニュー3 <ol> <li>材料</li> <li>材料</li> <li>材料</li> <li>材料</li> <li>材料</li> </ol> </li> </ul> <ul> <li>メニュー4 <ol> <li>材料</li> <li>材料</li> <li>材料</li> <li>材料</li> <li>材料</li> </ol> </li> </ul> <ul> <li>メニュー5 <ol> <li>材料</li> <li>材料</li> <li>材料</li> <li>材料</li> <li>材料</li> </ol> </li> </ul> |
となります。
ctrl + shift + h で確認すると、ul と ol を混ぜたリストになっているのがわかります。
それでは、今回のまとめをしてみましょう。
・番号付きのリストを作成するときには ol タグを使用する。
・番号が不要の場合には ul タグを使用する。
・リストの中身は li タグを使い作成する。
・ul と ol は組み合わせて使用することが可能。
これらの要素を使うことで、自分好みのリストを作成してきましょう。