HTML 無順序リスト ()
説明： 本文では、HTML の無順序リストタグ <ul> の使用方法と、<li> タグを使用してリスト項目を作成する方法について解説します。
1. 無順序リストとは？
- 無順序リストは、特定の順序を持たない項目のリストを表示するために使用されます。
- 各リスト項目の先頭には、デフォルトで箇条書き (例: 黒丸、白丸、四角) が表示されます。
2. 無順序リストの作成方法
<ul>タグを使用して無順序リストを定義します。<li>タグを使用してリスト項目を定義します。<li>タグは<ul>タグの開始タグと終了タグの間に配置します。
<ul>
<li>リスト項目 1</li>
<li>リスト項目 2</li>
<li>リスト項目 3</li>
</ul>
表示例:
- リスト項目 1
- リスト項目 2
- リスト項目 3
3. リスト項目記号のスタイル変更
- CSS の
list-style-typeプロパティを使用して、リスト項目記号のスタイルを変更できます。 - 一般的に使用される値には、
disc(デフォルト)、circle、square、noneなどがあります。
<style>
ul {
list-style-type: square;
}
</style>
表示例:
- リスト項目 1
- リスト項目 2
- リスト項目 3
4. 無順序リストのネスト
- 無順序リストの中に別の無順序リストをネストすることができます。
- ある
<ul>要素を別の<ul>要素の<li>要素の中に配置するだけです。
<ul>
<li>リスト項目 1</li>
<li>リスト項目 2
<ul>
<li>子リスト項目 1</li>
<li>子リスト項目 2</li>
</ul>
</li>
<li>リスト項目 3</li>
</ul>
表示例:
- リスト項目 1
- リスト項目 2
- 子リスト項目 1
- 子リスト項目 2
- リスト項目 3
5. `` タグの属性
| 属性名 | 説明 | |---|---| | class | 要素にクラス名を追加します。複数のクラスをスペース区切りで指定できます。 | | id | 要素に一意の ID を追加します。 | | style | 要素にインラインスタイルを追加します。 |
使用例:
<ul class="my-list" id="list-one">
<li>リスト項目 1</li>
<li>リスト項目 2</li>
</ul>
6. 参考文献
よくある質問
Q1: リスト項目記号を完全に非表示にするにはどうすればよいですか？
A1: list-style-type プロパティを none に設定します。
<style>
ul {
list-style-type: none;
}
</style>
Q2: リスト項目記号に画像を使用できますか？
A2: はい、list-style-image プロパティを使用して画像を指定できます。
<style>
ul {
list-style-image: url('image.png');
}
</style>
Q3: 無順序リストはどのような場合に使用するのが適切ですか？
A3: 特定の順序を持たない項目のリストを表示する場合、例えば箇条書きやチェックリストなどに使用します。