HTML でリスト表示(箇条書き)を行うには UL タグと LI タグを使用します。デフォルトでは、黒丸 ( 違うブラウザがあるかは知らない ) が先頭に付加されますが、異なる記号に変更することもできます。
変更するには、list-style-type を設定します。
スポンサーリンク
リストの先頭の記号リスト
list-style-type | 先頭に付加される記号 |
---|---|
none | 記号なし |
disc | ● 黒丸 |
circle | ○ 白丸 |
square | ■ 四角 |
decimal | 数字 |
lower-roman | 英小文字 |
upper-roman | 英大文字 |
lower-alpha | ローマ数字(小文字) |
upper-alpha | ローマ数字(大文字) |
list-style-type の出力内容の確認
実際に HTML のリストがどのようにブラウザで出力されるかを確認してみます。
<ul> <li style="list-style-type: none;">none</li> <li style="list-style-type: disc;">disc</li> <li style="list-style-type: circle;">circle</li> <li style="list-style-type: square;">square</li> <li style="list-style-type: decimal;">decimal 1</li> <li style="list-style-type: decimal;">decimal 2</li> <li style="list-style-type: lower-roman;">lower-roman 1</li> <li style="list-style-type: lower-roman;">lower-roman 2</li> <li style="list-style-type: upper-roman;">upper-roman 1</li> <li style="list-style-type: upper-roman;">upper-roman 2</li> <li style="list-style-type: lower-alpha;">lower-alpha 1</li> <li style="list-style-type: lower-alpha;">lower-alpha 2</li> <li style="list-style-type: upper-alpha;">upper-alpha 1</li> <li style="list-style-type: upper-alpha;">upper-alpha 2</li> </ul>
出力結果
- none
- disc
- circle
- square
- decimal 1
- decimal 2
- lower-roman 1
- lower-roman 2
- upper-roman 1
- upper-roman 2
- lower-alpha 1
- lower-alpha 2
- upper-alpha 1
- upper-alpha 2
この結果から、数字、ローマ数字 ( 大文字 / 小文字 ) 、アルファベット ( 大文字 / 小文字 ) については先頭からの通し番号で表示されていることが確認できます。
リスト開始番号の指定 / リスト番号を途中で変更する
ol タグの start 属性を指定することで、1以外の開始番号からリスト表示することができます。また、li タグに value 属性を指定して、リストの途中から通し番号を変更することができます。
<ol start="3"> <li>りんご</li> <li>ごりら</li> <li value="11">らっきょう</li> <li>うんこ</li> <li>こあら</li> <li value="10">ララバイ</li> <li>いか</li> <li>かい</li> <li>いんこ</li> </ol>
出力結果
- りんご
- ごりら
- らっきょう
- うんこ
- こあら
- ララバイ
- いか
- かい
- いんこ