HTMLのli要素を解説！ul・olの違いを理解して使いこなそう

Webサイトなどを閲覧していると、箇条書き（リスト）を頻繁に見かけることと思います。その正体は、HTMLのli要素をベースとするul・ol要素なのです。こちらの記事では、箇条書きを作成するときに欠かせないli要素をメインとして、リスト作成の話をしていきます。

箇条書き（リスト）に関わる要素

箇条書きを作成するときに使用する要素は、以下の3点です。

この3点が理解できれば、HTMLで箇条書きを作成することがとても簡単になるでしょう。それぞれについて、以下に説明をしていきます。

ul要素：番号なしの箇条書き

「・（黒点）」の箇条書きを作成するときに使用するのが、ul要素です。ul要素は「Unordered List」の略で、意味はそのまま「順番がないリスト」ということになります。

ul要素を使った箇条書き作成は以下のように書くことができます。

• • フランクリン「自伝」

 

• • ジェファソン「ヴァジニア覚書」

 

• • バーク「フランス革命についての省察」

 

• • マルサス「人口論」

 

• • コント「社会再組織に必要な科学的作業のプラン」

 

• • ラスキン「この最後の者にも」

 

• • プルードン「十九世紀における革命の一般理念」

 

 

ご覧の通り、li要素自体をul要素で囲ってしまうというコーディング方法になります。これで、以下のように番号なしの箇条書きを作ることができました。

• フランクリン「自伝」
• ジェファソン「ヴァジニア覚書」
• バーク「フランス革命についての省察」
• マルサス「人口論」
• コント「社会再組織に必要な科学的作業のプラン」
• ラスキン「この最後の者にも」
• プルードン「十九世紀における革命の一般理念」

実際にテキストエディタなどを使用して、ul要素を用いた箇条書きに挑戦してみましょう。ちなみにli要素については後ほど詳しくご説明します。

ol要素：番号ありの箇条書き

数字付きの箇条書きを作成するときに使用するのが、ol要素です。ol要素は「Ordered List」の略で、意味は「順番ありのリスト」ということになります。

ol要素を使った箇条書き作成は以下のように書くことができます。

1. 1. フランクリン「自伝」

 

1. 1. ジェファソン「ヴァジニア覚書」

 

1. 1. バーク「フランス革命についての省察」

 

1. 1. マルサス「人口論」

 

1. 1. コント「社会再組織に必要な科学的作業のプラン」

 

1. 1. ラスキン「この最後の者にも」

 

1. 1. プルードン「十九世紀における革命の一般理念」

 

 

先ほどのulと同様に、li要素自体をol要素で囲うことで、以下のように番号ありの箇条書きを作ることができます。

1. フランクリン「自伝」
2. ジェファソン「ヴァジニア覚書」
3. バーク「フランス革命についての省察」
4. マルサス「人口論」
5. コント「社会再組織に必要な科学的作業のプラン」
6. ラスキン「この最後の者にも」
7. プルードン「十九世紀における革命の一般理念」

書き方はulとほとんど変わらず、li要素を囲むのがul要素なのかul要素なのかという点のみが違いとなります。自分の目的に合わせてul要素かol要素かを使い分けていきましょう。

li要素：ul・olの箇条書き部分

ここまでul要素とol要素を説明してきたため、その意味はほとんどご理解いただけているでしょう。箇条書きの具体的な中身を作成する際に使用するのがli要素となります。li要素は「List Item」の略で、意味もそのまま「箇条書き（リスト）の要素」ということになります。

注意点としては、ul要素かol要素とセットで使用する必要があるということです。初めの頃は、ul要素やol要素でli要素を囲み忘れることも多いので、気をつけましょう。

箇条書き（リスト）に関わる属性

さて、ここまでul・ol・li要素について、それぞれ詳しく解説をしてきました。実は、箇条書きに関わる要素にはさまざまな属性があり、それらを駆使することで、箇条書きをカスタムアレンジすることが可能です。以下に、箇条書きに関わる属性を紹介していきます。

start属性：番号のスタート位置を指定

「start」属性は、ol要素の番号付きリストのスタート位置を指定するためのものです。以下に例を示しましょう。

5. 5. フランクリン「自伝」

 

5. 5. ジェファソン「ヴァジニア覚書」

 

5. 5. バーク「フランス革命についての省察」

 

5. 5. マルサス「人口論」

 

5. 5. コント「社会再組織に必要な科学的作業のプラン」

 

5. 5. ラスキン「この最後の者にも」

 

5. 5. プルードン「十九世紀における革命の一般理念」

 

 

上記のコーディングによって、以下のような箇条書きが作成されます。

5. フランクリン「自伝」
6. ジェファソン「ヴァジニア覚書」
7. バーク「フランス革命についての省察」
8. マルサス「人口論」
9. コント「社会再組織に必要な科学的作業のプラン」
10. ラスキン「この最後の者にも」
11. プルードン「十九世紀における革命の一般理念」

start属性に「5」を指定したため、番号が5から始まる箇条書きとなっています。

type属性：番号のタイプを変更

「type」属性は、ol要素の番号付きリストを数字以外のタイプにするためのものです。以下に例を示しましょう。

• • フランクリン「自伝」

 

• • ジェファソン「ヴァジニア覚書」

 

• • バーク「フランス革命についての省察」

 

• • マルサス「人口論」

 

• • コント「社会再組織に必要な科学的作業のプラン」

 

• • ラスキン「この最後の者にも」

 

• • プルードン「十九世紀における革命の一般理念」

 

 

上記ではtype属性に「A」と指定することで、以下のように大文字アルファベットのAからZに向かう形の箇条書きとなりました。

1. フランクリン「自伝」
2. ジェファソン「ヴァジニア覚書」
3. バーク「フランス革命についての省察」
4. マルサス「人口論」
5. コント「社会再組織に必要な科学的作業のプラン」
6. ラスキン「この最後の者にも」
7. プルードン「十九世紀における革命の一般理念」

type属性には以下のような指定をおこなうことができます。

reversed：番号付きリストをカウントダウン化

「reversed」属性は、ol要素の番号付きリストをカウントアップ形式にするためのものです。以下に例を示しましょう。

1. 1. フランクリン「自伝」

 

1. 1. ジェファソン「ヴァジニア覚書」

 

1. 1. バーク「フランス革命についての省察」

 

1. 1. マルサス「人口論」

 

1. 1. コント「社会再組織に必要な科学的作業のプラン」

 

1. 1. ラスキン「この最後の者にも」

 

1. 1. プルードン「十九世紀における革命の一般理念」

 

 

ol要素へreversed属性を指定することで、以下のようにカウントダウン形式の箇条書きとなりました。

1. フランクリン「自伝」
2. ジェファソン「ヴァジニア覚書」
3. バーク「フランス革命についての省察」
4. マルサス「人口論」
5. コント「社会再組織に必要な科学的作業のプラン」
6. ラスキン「この最後の者にも」
7. プルードン「十九世紀における革命の一般理念」

また、この属性は他の属性と組み合わせることもできます。たとえば最初に紹介したstart属性と組み合わせてみましょう。

5. 5. フランクリン「自伝」

 

5. 5. ジェファソン「ヴァジニア覚書」

 

5. 5. バーク「フランス革命についての省察」

 

5. 5. マルサス「人口論」

 

5. 5. コント「社会再組織に必要な科学的作業のプラン」

 

5. 5. ラスキン「この最後の者にも」

 

5. 5. プルードン「十九世紀における革命の一般理念」

 

 

start属性とreversed属性を組み合わせることで、以下のような箇条書きになりました。

5. フランクリン「自伝」
6. ジェファソン「ヴァジニア覚書」
7. バーク「フランス革命についての省察」
8. マルサス「人口論」
9. コント「社会再組織に必要な科学的作業のプラン」
10. ラスキン「この最後の者にも」
11. プルードン「十九世紀における革命の一般理念」

このように、いくつかの属性を組み合わせてカスタムアレンジできるのも箇条書きに関する要素の利点です。

まとめ

こちらの記事では、箇条書きを作成するときに欠かせないli要素をメインとして、リスト作成の話をしていきました。箇条書きはとても簡単にコーディングできる上に、属性を使うことによって、いろいろとカスタムアレンジが可能な要素です。自分のニーズに合わせた箇条書きを作成していきましょう。