<ul>タグの解説
<ul>は、順序のないリストを表します。各リスト項目には先頭に目印のマーカーが表示されます。マーカーの種類はCSS（スタイルシート）のlist-style-typeプロパティで変更できます。
順序のあるリストを作成したい場合は<ol>を採用して下さい。リスト項目の並び順を変更したときに文脈上の意味が変わってくるのであれば、<ol>の方が適切です。
リストの作成方法は、親要素となる<ul>でリストの開始を宣言し、リスト項目を表す<li>要素を任意の数だけ配置します。終了タグの</ul>を配置した時点でリストのまとまりが決まり、既定値であればリスト項目のマーカーは中黒の円で表示されます。
リスト項目の中には任意のフロー・コンテンツが配置できます。そのため、リストの中にリストを配置して入れ子構造にできます。例えば、大カテゴリーの項目を順序なしリストの<ul>で定義し、その中の子カテゴリーを順序のある<ol>で記述するといった方法が考えられます。
<ul>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特に与えられませんが、ここで各項目のマーカーを一括で指定することも可能です。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。この要素に含まれる
<li>の中にリストを入れ子にすることも許可されています。
<ul>要素に指定できる属性
type（非推奨）- マーカーの種類を指定します。代わりにCSSの
list-style-typeプロパティを使用することが推奨されています。disc：黒丸circle：白丸square：四角
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<ul>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。必要に応じてリスト項目の数を増減させます。
<ul>
<li>リスト項目</li>
<li>リスト項目</li>
<li>リスト項目</li>
</ul>
リスト項目のマーカーはCSSのlist-style-typeプロパティで変更します。リスト全体のマーカーを一括で変更したい場合は<ul>に適用し、個別に変更したい場合は該当する<li>要素に適用します。
<ul class="list-block">
<li class="marker-disc">marker-disc</li>
<li class="marker-circle">marker-circle</li>
<li class="marker-square">marker-square</li>
<li class="marker-none">marker-none</li>
</ul>
.list-block {
padding-inline: 1.5rem 0;
margin-block: 1rem 0;
}
.list-block .marker-disc {
list-style-type: disc;
}
.list-block .marker-circle {
list-style-type: circle;
}
.list-block .marker-square {
list-style-type: square;
}
.list-block .marker-none {
list-style-type: none;
}
リスト項目の中に子要素を配置する
liはあらゆるフロー・コンテンツを子要素に配置できます。最も多く見られるパターンは、<a>要素のdisplayプロパティをblockにして、項目全体をリンクにしたリストです。
<ul class="list-block">
<li><a href="/">リンクつきのリスト項目</a></li>
<li><a href="/">リンクつきのリスト項目</a></li>
<li><a href="/">リンクつきのリスト項目</a></li>
</ul>
.list-block {
padding: 0;
margin-block: 1rem 0;
list-style-type: "";
}
.list-block a {
display: block;
padding: 0.5em;
background-color:
var(--hover-off, inherit)
var(--hover-on, rgb(0 0 0 / 0.1));
}
@media (any-hover: hover) {
:where(:any-link):hover {
--hover-on: initial;
--hover-off: ;
}
}
リスト項目の中にリストを配置して入れ子にする
リスト項目の中にリストを配置すれば、多重構造のリストを作成できます。<ol>と<ul>を混合することも可能なので、順序なしの大カテゴリーの中に順序ありの小カテゴリーを並べることもできます。
<ul class="list-block">
<li>大カテゴリー</li>
<ol class="list-block">
<li>小カテゴリー</li>
<li>小カテゴリー</li>
<li>小カテゴリー</li>
</ol>
</li>
<li>大カテゴリー</li>
<ol class="list-block">
<li>小カテゴリー</li>
<li>小カテゴリー</li>
<li>小カテゴリー</li>
</ol>
</li>
<li>大カテゴリー</li>
<ol class="list-block">
<li>小カテゴリー</li>
<li>小カテゴリー</li>
<li>小カテゴリー</li>
</ol>
</li>
</ul>
.list-block {
padding-inline: 1.5rem 0;
margin-block: 1rem;
}
.list-block .list-block li {
padding-inline-start: 0.5rem;
border-inline-start: 1px solid;
}