Tweet

Pocket

【こちらの記事は、約5分程でお読みいただけます。】

こんにちは。

2月までは「クリエイター育成協会ブログ」の水曜日はデザイン関連の話題をお送りしてきましたが、3月からは初心者向けのhtmlやCSSなどのコーディングの技術等について書いていく事になりました。

本日は、HTMLの中でも、基礎となる「ul」タグと「ol」タグの違いについて、順序付きマーカーの数値の指定のやり方を解説していきます。是非ご覧ください。

htmlのリストタグについて

皆さん、リストタグは使っていますか？関連する項目をグルーピングするのに使うタグになります。
<ul>や<ol>で囲んだ<li>タグは全て関連する項目です。という意味を表します。

<ul>は順序のないリストを表示する時に使います。以下の例などでは<ul>が使われます。

• 好きな動物リスト
• ナビゲーション
• メニューリスト、等

グローバルナビなどによく使われますが、これらは一つ一つ関連した項目ではありますが順番なんて存在しませんよね。こういった順序のない一つのグループには、<ul>タグで囲むのが適切になります。

逆に順序があるリストを表示する際には、<ol>タグを使うのが適切とされています。

• お店の売れ筋ランキング
• 料理の作り方、等

<ul>や<ol>はリストを形成するタグで、各項目は<li>タグを使って記述します。

例えば、お店の売り物一覧を表示するときには、順番のないリストなので<ul>を使います。

<figure>
<figcaption>花屋の売り物</figcaption>
<ul>
    <li>ばら</li>
    <li>チューリップ</li>
    <li>すみれ</li>
</ul>
</figure>

グローバルナビゲーションを表示する時にも<ul>をよく使います。（これは一例で、別のタグでナビゲーションを表現する時もあります）

• top
• about
• contents
• contact
• link

<ul class="global_navigation">
    <li><a href="#">top</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contents</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">link</a></li>
</ul>

お店の売れ筋のランキングを表す時は、順番があるので<ol>が適切になります。

<figure>
<figcaption>花屋の売れ筋ランキング</figcaption>
<ul>
    <li>ばら</li>
    <li>チューリップ</li>
    <li>すみれ</li>
</ul>
</figure>

作り方の手順なども、順序が決まっているので<ol>が適切です。

カレーの作り方

1. 野菜を切る
2. 肉を炒める
3. 野菜を炒める
4. アクを取る
5. ルーを入れる

<h5>カレーの作り方</h5>
<ol>
    <li>野菜を切る</li>
    <li>肉を炒める</li>
    <li>野菜を炒める</li>
    <li>アクを取る</li>
    <li>ルーを入れる</li>
</ol>

このように<ol><ul>タグでマークアップするとリストに応じたマーカーが付きます。
デフォルトでは、<ol>は数字。<ul>では、黒点になります。

<ol>タグの数字を変更する

<ol>タグでは、数字を変更させることが出来ます。これらはCSSでは、代替出来るプロパディがないので必要に応じて使用することなります。

reversed・・・olタグを降順リストで表示させます。

1. リスト項目1
2. リスト項目2
3. リスト項目3
4. リスト項目4
5. リスト項目5

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

<ol>の後に半角スペースを空けて、reversedを記入すると降順リストで表示するようになります。

start・・・olタグの順序の開始値を指定します。

4. リスト項目1
5. リスト項目2
6. リスト項目3
7. リスト項目4
8. リスト項目5

<ol start="4">
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
    <li>リスト項目4</li>
    <li>リスト項目5</li>
</ol>

>ol<の後に半角スペースを空けて、stertを記入しさらに”n”に任意の数字を入れるとその番号からスタートする降順リストになります。

2つとも記入するとこのようになります。

4. リスト項目1
5. リスト項目2
6. リスト項目3
7. リスト項目4
8. リスト項目5

<ol reversed start="4">
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
    <li>リスト項目4</li>
    <li>リスト項目5</li>
</ol>

<li>タグでリスト途中からの数字を変更する

listの途中からでも数値を変更することが出来ます。

value・・・そのリストに表示される数値を途中から変更することが出来ます。続くリストの番号は指定した値から継承されます。

1. リスト項目1
2. リスト項目2
3. リスト項目3
8. リスト項目4
9. リスト項目5

<ol>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
    <li value="8">リスト項目4</li>
    <li>リスト項目5</li>
</ol>

<li>タグに半角スペースを空けて、value。さらに””の間に任意の数字を入れるとvalueのリスト項目の数値が変更されます。

reversedを付けて、リスト項目にvalueを記入するとこのようになります。

1. リスト項目1
2. リスト項目2
6. リスト項目3
7. リスト項目4
8. リスト項目5

<ol reversed>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li value="6">リスト項目3</li>
    <li>リスト項目4</li>
    <li>リスト項目5</li>
</ol>

終わりに

他にもリストマークの文頭に付くマークを変更するtype属性がありますが、html5では、CSSのlist-style-typeで代入するのが推奨されています。

このreversedやstartなどは、あまり使われる事がない機能ですが、頭の片隅にでも留めておくと役に立つ時がくるかもしれません。

Tweet

Pocket

Related posts:

テキストの意味を理解してタグを使おう インプットタグのタイプを知ろう Boostrapを使ってレスポンシブのグリッドシステムを扱ってみましょう 擬似クラスで作る動きのあるデザイン