JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【CSS】list-style-typeで順序付きリストの番号スタイルを設定する方法

順序付きリスト(<ol>)では、CSSの list-style-type プロパティを使うことで、番号(マーカー)の種類やスタイルを自由に制御できます。標準的な算用数字だけでなく、ローマ数字やアルファベットなど、さまざまな形式を指定できるのが特徴です。

list-style-type の主な値

  • decimal:1、2、3…(標準的な算用数字)
  • decimal-leading-zero:01、02、03…(先頭に0が付く数字)
  • upper-roman:I、II、III…(大文字ローマ数字)
  • lower-roman:i、ii、iii…(小文字ローマ数字)
  • upper-alpha:A、B、C…(大文字アルファベット)
  • lower-alpha:a、b、c…(小文字アルファベット)

記述例

以下は、list-style-type: decimal; を指定して番号付きリストを表示するHTMLのコード例です。

<html>
    <head>
    </head>
    <body>
        <ol style = "list-style-type:decimal;">
            <li>India</li>
            <li>US</li>
            <li>UK</li>
        </ol>
    </body>
</html>

このコードをブラウザで表示すると、各項目の先頭に「1.」「2.」「3.」という算用数字の番号が付いたリストが描画されます。

値を変えてみる

指定する値を変更すれば、番号の見た目も簡単に切り替えられます。たとえば大文字ローマ数字にしたい場合は次のように書きます。

<ol style = "list-style-type:upper-roman;">
    <li>India</li>
    <li>US</li>
    <li>UK</li>
</ol>

この場合、「I.」「II.」「III.」と表示されます。

まとめ

list-style-type プロパティは、<ol> 要素に直接インラインスタイルとして指定できるほか、外部スタイルシートや <style> タグ内でも利用できます。サイトのデザインやコンテンツの性質に合わせて、最適な番号形式を選択すると、リストがより読みやすく洗練された印象になります。

  1. CSSのlist-style-typeプロパティでリストのマーカーを設定する方法

    CSSのlist-style-typeプロパティは、リスト項目に表示されるマーカー（行頭記号や番号）のスタイルを指定するために使用されます。このプロパティは、順序なしリスト（<ul>）と順序付きリスト（<ol>) の両方に適用できます。主な値の一覧list-style-typeプロパティには、以下のような代表的な値を指定できます。disc：黒丸（デフォルト・順序なしリスト）circle：白抜きの丸square：黒塗りの四角decimal：算用数字（1, 2, 3…）lower-roman：小文字ローマ数字（i, ii, iii…）upper-roman：大文字ローマ数字

  2. CSSで基本のリストをリストグループに変換する方法

    CSSを使えば、シンプルなHTMLのリストを、境界線で区切られた見栄えのよい「リストグループ」へと変換できます。各項目（li要素）に枠線・背景色・パディングを指定するだけで、視覚的にまとまりのあるリストを簡単に作成できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>