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

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：大文字ローマ数字（I, II, III…）
  • lower-latin / lower-alpha：小文字アルファベット（a, b, c…）
  • upper-latin / upper-alpha：大文字アルファベット（A, B, C…）
  • devanagari：デーヴァナーガリー文字による番号
  • none：マーカーを非表示にする

構文

CSSのlist-style-typeプロパティの構文は以下の通りです。

Selector {
   list-style-type: /*値*/
}

例1：ローマ数字とcircleを使ったリストのスタイリング

次の例では、順序付きリストに小文字ローマ数字を適用し、最後のリスト項目だけにcircle（白丸）を指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
ol li {
   padding: 5px;
   list-style-type: lower-roman;
}
li:last-child {
   font-size: 1.2em;
   font-style: italic;
   list-style-type: circle;
}
</style>
</head>
<body>
<ol>
<li>demo1</li>
<li>
demo 2
<ul>
<li>demo a</li>
<li>demo b</li>
</ul>
</li>
<li>demo 3</li>
</ol>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

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

例2：devanagariとlower-latinを使ったリストのスタイリング

次の例では、リスト全体にグラデーション背景と枠線を設定し、マーカーとしてdevanagari（デーヴァナーガリー数字）を使用しています。さらに、最後のリスト項目にはlower-latin（小文字アルファベット）を適用し、斜体で表示しています。

<!DOCTYPE html>
<html>
<head>
<style>
ol li {
   width: 50%;
   margin: 5px;
   font-size: 1.2em;
   list-style-type: devanagari;
   border: thin solid;
   background: linear-gradient(to right, lightgreen, pink, lightblue);
}
li:last-child {
   font-style: italic;
   list-style-type: lower-latin;
}
</style>
</head>
<body>
<ol>
<li>Eh!?</li>
<li>
demo one
<ol>
<li>What!?</li>
<li>demo two</li>
</ol>
</li>
<li>demo 3</li>
<li>demo four</li>
</ol>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

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

まとめ

list-style-typeプロパティを使うことで、リストのマーカーを簡単かつ柔軟にカスタマイズできます。英数字やローマ数字だけでなく、各国の文字体系に対応した番号スタイルも利用できるため、多言語対応のWebサイトでも活用できます。また、noneを指定すればマーカーを消すことも可能で、ナビゲーションメニューなどのデザインにもよく使われます。

  1. CSSだけでカレンダーを作成する方法をわかりやすく解説【サンプルコード付き】

    Webページにカレンダーを表示したいとき、CSS（スタイルシート）だけでも十分に実現できます。JavaScriptなどのスクリプトに頼らなくても、HTMLのリスト要素とCSSを組み合わせるだけで、月表示のカレンダーを見やすいレイアウトで作成することが可能です。 ここでは、月名の表示、前月・次月へのナビゲーション矢印、曜日ヘッダー、日付グリッド、さらに「今日」の日付を円形でハイライトする演出まで含めた、実用的なカレンダーのサンプルコードを紹介します。 サンプルコード CSSでカレンダーを作成するには、以下のように記述します。 <!DOCTYPE html> <html>

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

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