1.1 リストの種類
HTMLのリストは、情報を整理して構造化するための重要なツールだよ。リストは数字付きまたはマーカー付きで要素を表示することができるんだ。ここでは、HTMLのリスト要素、<ul>、<ol>、そして<li>を詳しく見ていこう。
番号なしリスト (<ul>)
<ul>タグは、番号なし（マーカー付き）のリストを作成するために使われるよ。リストの要素はマーカー（点、丸、四角）で表示されるよ。
例:
HTML
<ul>
<li>リストの最初の要素</li>
<li>リストの2番目の要素</li>
<li>リストの3番目の要素</li>
</ul>
番号付きリスト (<ol>)
<ol>タグは、番号付きリストを作成するために使われるよ。リストの要素は数字やアルファベットで表示されるよ。
例:
HTML
<ol>
<li>リストの最初の要素</li>
<li>リストの2番目の要素</li>
<li>リストの3番目の要素</li>
</ol>
1.2 リストの要素 <li>
<li>タグは、番号なしでも番号付きでも、リストの各要素を示すために使用されるよ。<ul>や<ol>の中に常に入っている必要があるんだ。
これらのタグを覚えるのは簡単だよ:
- Ordered List – 順序付き（番号付き）リスト
- Unordered List – 順序なし（番号なし）リスト
- List Item – リストの要素
属性 type
この属性は、<ul>や<ol>内でマーカーや番号のタイプを変更するために使用できるよ。例えば、<ol>では値"1"、"A"、"a"、"I"、"i"を使用できたり、<ul>には"disc"、"circle"、"square"を使用できるよ。
<ul>のマーカータイプを変更する例:
HTML
<ul type="square">
<li>リストの最初の要素</li>
<li>リストの2番目の要素</li>
</ul>
<ol>の番号タイプを変更する例:
HTML
<ol type="A">
<li>リストの最初の要素</li>
<li>リストの2番目の要素</li>
</ol>
属性 start:
この属性は、<ol>でのみ使用され、番号の開始位置を指定するために使われるよ。
例えば:
HTML
<ol start="5">
<li>リストの5番目の要素</li>
<li>リストの6番目の要素</li>
</ol>
ネストされたリスト
リストはネストすることができ、より複雑な構造を作成できるよ。
ネストされたリストの例:
HTML
<ul>
<li>リストの最初の要素</li>
<ul type="circle">
<li>ネストされた最初の要素</li>
<li>ネストされた2番目の要素</li>
</ul>
<li>リストの2番目の要素</li>
<li>リストの3番目の要素</li>
</ul>
重要!
CSSプロパティ
list-style-typeは、属性
typeよりも多くのマーカータイプを提案していて、属性
typeは旧式と考えられているんだ。
1.3 リストのスタイリング
リストはCSSを使って、マーカーの色やタイプ、マージンを変更してスタイリングできるよ。
スタイリングの例:
CSS
ul.custom-list {
list-style-type: katakana; /* 日本語のカタカナ */
color: blue; /* テキストの色 */
}
ol.custom-list {
list-style-type: hiragana-iroha; /* 日本語のいろは順 */
color: green; /* テキストの色 */
}
HTML
<ul class="custom-list">
<li>リストの最初の要素</li>
<li>リストの2番目の要素</li>
</ul>
<ol class="custom-list">
<li>リストの最初の要素</li>
<li>リストの2番目の要素</li>
</ol>
こんな感じで、<ul>、<ol>、そして<li>を使うと、コンテンツを構造化して、ウェブページ上での読みやすさを向上させることができるよ。
GO TO FULL VERSION