- <ここからリスト項目> これは１番目のリスト項目です。 <ここまでリスト項目>
- <ここからリスト項目> これは２番目のリスト項目です。 <ここまでリスト項目>
<ここまで順序つきリスト>
<ここから順序なしリスト>
- <ここからリスト項目> これは順序のないリスト項目です。 <ここまでリスト項目>
- <ここからリスト項目> これも順序のないリスト項目です。 <ここまでリスト項目>
ここまで順序なしリスト
順序つきリスト「ol要素」とリスト項目「li要素」
よく、「１．～～～」「２・～～～」「３．～～～」となっている箇条書きをよく見ませんか？
HTMLでこのような箇条書きをするためには、順序つきリスト「ol要素」を使って表します。
<ol>と</ol>で囲んだ範囲が順序つきリストになります。
また、そのリストの項目は、「li要素」を使って表します。
<li>と</li>で囲んだ範囲がリストの項目になります。
この「ol要素」を使う上での注意点として、「ol要素」の直下には「li要素」しか入れることができません。
「li要素」を使わずに、直接文字を記述したり、「b要素」などを使ったりすることはできないのです。
ちなみに、「ol要素」の「ol」はordered listの略で整理されたリストいう意味です。
「li要素」の「li」はlist itemの略で、リスト項目やリスト条項といった意味があります。
順番の始まりを変える「start属性」
「ol要素」は通常１から始まりますが、その始まりの番号を変えることができます。
始まりの番号を変えるには、「start属性」を使います。
「start属性」に"10"を指定すれば10から始まりますし、"-1"を指定すれば-1から始まります。
「ol要素」の「start属性」に「5」を指定した場合、以下のようになります。
順番の形式を変える「type属性」
「ol要素」は、順序の形式を変えることができます。順序の形式を変えるには「type属性」を使います。
例えば、「type属性」に'A'を指定するとアルファベット大文字で、'a'を指定するとアルファベット小文字になります。
また、'I'を指定すると大文字のローマ数字になり、'i'を指定すると小文字のローマ数字になります。
なお、'1'を指定した場合、「type属性」を指定しなかった時と同じように、1から始まる順序つきリストになります
「ol要素」の「type属性」に「A」を指定した場合、以下のようになります。
順序なしリスト「ul要素」
箇条書きといえば、数字などの順序がある箇条書きだけではなく、「・」を使った順序のない箇条書きもあります。
HTMLで「・」を使った箇条書きをするためには、順序なしリスト「ul要素」を使って表します。
<ul>と</ul>で囲んだ範囲が順序なしリストということになります。
使い方は「ol要素」と同じで、リスト項目を「li要素」で表します。
また、「ul要素」の直下には「li要素」しか入れることができないというのも、「ol要素」と同じです。
ちなみに、「ul要素」の「ul」はunordered listの略で整理されていないリストいう意味です。
「ol要素」「ul要素」の中にさらに「ol要素」「ul要素」を入れる
ここまで説明してきました、「ol要素」「ul要素」は、「li要素」の中に入れることができます。
つまり、「ol要素」の中にある「li要素」の中に、さらに「ol要素」「ul要素」を入れることができるということです。
これは、「ul要素」でも同じで、「li要素」の中に「ol要素」「ul要素」を入れることができます。
このようにすることで、「ol要素」「ul要素」「li要素」で、階層構造を表したりすることができるようになります。
サンプル
今回説明した、「ol要素」「ul要素」「li要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。
サンプルソースコード
<p> 太陽系の主要天体 </p> <ol start = "0"> <li><strong>太陽</strong></li> <li>水星</li> <li>金星</li> <li>地球 <ol type = 'I'> <li>月</li> </ol> </li> <li>火星 <ol type = 'I'> <li>フォボス</li> <li>ダイモス</li> </ol> </li> <li>木星 <ol type = 'I'> <li>イオ</li> <li>エウロパ</li> <li>ガニメデ</li> <li>カリスト</li> </ol> </li> <li>土星 <ol type = 'I'> <li>タイタン</li> </ol> </li> <li>天王星</li> <li>海王星</li> </ol> <p> 生物の分類 </p> <ul> <li>動物 <ul> <li>脊椎動物 <ul> <li>魚類</li> <li>両生類</li> <li>爬虫類</li> <li>鳥類</li> <li>哺乳類 <ul> <li>食肉目</li> <li>げっ歯目</li> <li>霊長目 <ul> <li>メガネザル科</li> <li>オナガザル科</li> <li>ヒト科 <ul> <li>ゴリラ</li> <li>オランウータン</li> <li>チンパンジー</li> <li>ヒト <ul> <li>ホモサピエンス</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </li> <li>無脊椎動物</li> </ul> </ul> </li> <li>植物</li> </ul>
表示結果
太陽系の主要天体
- 太陽
- 水星
- 金星
- 地球
- 月
- 火星
- フォボス
- ダイモス
- 木星
- イオ
- エウロパ
- ガニメデ
- カリスト
- 土星
- タイタン
- 天王星
- 海王星
生物の分類
- 動物
- 脊椎動物
- 魚類
- 両生類
- 爬虫類
- 鳥類
- 哺乳類
- 食肉目
- げっ歯目
- 霊長目
- メガネザル科
- オナガザル科
- ヒト科
- ゴリラ
- オランウータン
- チンパンジー
- ヒト
- ホモサピエンス
- 無脊椎動物
- 脊椎動物
「ol要素」「ul要素」「li要素」のまとめと次回記事について
今回説明した「ol要素」「ul要素」「li要素」はいかがでしたでしょうか。
今までの要素とは少し違う使い方でクセがあるかと思います。
しかし、箇条書きは見やすい文を作るのにとても有効です。
この要素も使い方によってはとても使える要素ですので、ぜひ覚えておいてください。
次回は、説明リストを表示する「dl要素」「dt要素」「dd要素」の説明をします。
以上、当サイト管理人のAsterismでした。