[ HTML ] リスト表示形式の設定と開始番号の変更 ( list-style-type, start / value )

Tweet

Pocket

HTML でリスト表示(箇条書き)を行うには UL タグと LI タグを使用します。デフォルトでは、黒丸 ( 違うブラウザがあるかは知らない ) が先頭に付加されますが、異なる記号に変更することもできます。

変更するには、list-style-type を設定します。

リストの先頭の記号リスト

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 属性を指定することで、１以外の開始番号からリスト表示することができます。また、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>

出力結果

3. りんご
4. ごりら
11. らっきょう
12. うんこ
13. こあら
10. ララバイ
11. いか
12. かい
13. いんこ

Tweet

Pocket