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

Pocket

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>

出力結果

  1. りんご
  2. ごりら
  3. らっきょう
  4. うんこ
  5. こあら
  6. ララバイ
  7. いか
  8. かい
  9. いんこ
スポンサーリンク


Pocket

Leave a Comment

Your email address will not be published. Required fields are marked *