Blogで箇条書きするときに便利な初歩タグです。『・』を使って直接書いても良いですが,改行があっても整うリストタグが便利。
リストのサンプル
<ul style="list-style-type: square;">
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>
リストタグの種類
- <ul>:unordered list
リストの項目に順序はなく,箇条書きにしたい場合。 - <ol>:ordered list
リストの項目に番号をつけて,箇条書きにしたい場合。 - <li>:list item
リストの項目内容
<ul>リストのマーカー指定 list-style-type
- <ul>要素または<li>要素内にstyle属性で指定する。
- マーカーの種類を指定するプロパティは,list-style-type
- 1つのリスト内で,<li>要素ごとにマーカーを変えることもできる。
- list-style-typeの値は,
- なし:none
- 黒丸:disc
- 白丸:circle
- 四角:square
(マーカーの指定例)
<ul>
<li style="list-style-type: circle;">項目 1</li>
<li style="list-style-type: square;">項目 2</li>
<li style="list-style-type: none;">項目 3</li>
</ul>
(表示)
- 項目 1
- 項目 2
- 項目 3
<ol>リストの番号指定 list-style-type
- <ol>要素または<li>要素内にstyle属性で指定する。
- 番号の種類を指定するプロパティは,list-style-type
- 1つのリスト内で,<li>要素ごとに番号の種類を変えることができる。
- list-style-typeの値は,
- 数字:decimal
- 大文字アルファベット:upper-alpha
- 小文字アルファベット:lower-alpha
- 大文字ローマ数字:upper-roman
- 小文字ローマ字:lower-roman
- 番号を変更する場合は,valueで指定する。
(番号の指定例)
<ol>
<li>項目 1</li>
<li>項目 2</li>
<li value="5">項目 3</li>
<li>項目 4</li>
</ol>
(表示)
- 項目 1
- 項目 2
- 項目 3
- 項目 4
<ul>リストの入れ子の仕方
- リストの中にリストを入れることができる。
- 追加するリストは,<li> </li>間に入れる。</li>の位置に注意。
(リストの入れ子の例)
<ol style="list-style-type: upper-alpha;">
<li>項目 1</li>
<li>項目 2
<ol style="list-style-type: lower-alpha;">
<li>項目 2-1</li>
<li>項目 2-2</li>
</ol>
</li>
<li>項目 3</li>
</ol>
(表示)
- 項目 1
- 項目 2
- 項目 2-1
- 項目 2-2
- 項目 3