LINEで送る
このエントリーをはてなブックマークに追加

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

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

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

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

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

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

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

olリストの場合は

1
2
3
4
5
6
<ol>
<li>リスト項目１</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
<li>リスト項目4</li>
</ol>

ulりすとの場合は

1
2
3
4
5
6
<ul>
<li>リスト項目１</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 でプレビューを見ると、
リストに順番がついているのがわかります。

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

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

1
  ul>li{リスト}*5

これを展開すると

1
2
3
4
5
6
7
  <ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ul>

となります。

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

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

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

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

1
  (ul>li{メニュー$}>ol>li{材料}*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 を混ぜたリストになっているのがわかります。

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

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

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

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

こちらの記事もどうぞ