リスト関連のCSSプロパティ
この記事ではリスト関連のCSSプロパティについて説明します。
list-styleプロパティやcounter()関数の利用方法や記述の仕方を学べます。
YouTube Video
プレビュー用のHTML
css-list.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-list.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>List Related CSS Properties</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>List Related Properties</h2>
20 </header>
21 <article>
22 <h3>list-style</h3>
23 <section>
24 <header><h4>list-style-type: circle; list-style-position: inside;</h4></header>
25 <section class="sample-view">
26 <h5>Unordered List (ul)</h5>
27 <ul>
28 <li>Item 1</li>
29 <li>Item 2</li>
30 <li>Item 3</li>
31 </ul>
32 </section>
33 <header><h4>list-style: upper-roman outside</h4></header>
34 <section class="sample-view">
35 <h5>Ordered List (ol)</h5>
36 <ol>
37 <li>First</li>
38 <li>Second</li>
39 <li>Third</li>
40 </ol>
41 </section>
42 <header><h4>list-style-image: url('custom-bullet.png')</h4></header>
43 <section class="sample-view">
44 <h5>Custom Bullet List</h5>
45 <ul class="custom-list">
46 <li>Custom Item 1</li>
47 <li>Custom Item 2</li>
48 <li>Custom Item 3</li>
49 </ul>
50 </section>
51 </section>
52 </article>
53 <article>
54 <h3>counter()</h3>
55 <section>
56 <header><h4>CSS</h4></header>
57<pre class="sample">
58dl {
59 counter-reset: item;
60}
61
62dl dt::before {
63 counter-increment: item; /* Increment the counter */
64 content: counter(item) ". "; /* Display the counter */
65}
66</pre>
67 <header><h4>HTML</h4></header>
68<pre>
69<dl>
70 <dt>Term A</dt>
71 <dd>Explication for term A</dd>
72 <dt>Term B</dt>
73 <dd>Explication for term B</dd>
74 <dt>Term C</dt>
75 <dd>Explication for term C</dd>
76</dl>
77</pre>
78 <header><h4>HTML+CSS</h4></header>
79 <section class="sample-view">
80 <dl>
81 <dt>Term A</dt>
82 <dd>Explication for term A</dd>
83 <dt>Term B</dt>
84 <dd>Explication for term B</dd>
85 <dt>Term C</dt>
86 <dd>Explication for term C</dd>
87 </dl>
88 </section>
89 </section>
90 </article>
91 <article>
92 <h3>counters()</h3>
93 <section>
94 <header><h4>CSS</h4></header>
95<pre class="sample">
96ol {
97 list-style: none;
98 counter-reset: list-counter;
99}
100
101li {
102 counter-increment: list-counter;
103}
104
105li::before {
106 content: counters(list-counter, ".") " ";
107}
108</pre>
109 <header><h4>HTML</h4></header>
110<pre>
111<ol>
112 <li>Item A
113 <ol>
114 <li>Subitem A-1</li>
115 <li>Subitem A-2</li>
116 </ol>
117 </li>
118 <li>Item B
119 <ol>
120 <li>Subitem B-1</li>
121 </ol>
122 </li>
123</ol>
124</pre>
125 <header><h4>HTML+CSS</h4></header>
126 <section class="sample-view">
127 <ol>
128 <li>Item A
129 <ol>
130 <li>Subitem A-1</li>
131 <li>Subitem A-2</li>
132 </ol>
133 </li>
134 <li>Item B
135 <ol>
136 <li>Subitem B-1</li>
137 </ol>
138 </li>
139 </ol>
140 </section>
141 </section>
142 <section>
143 <header><h4>CSS</h4></header>
144<pre class="sample">
145article {
146 counter-reset: chapter;
147}
148h1.chapter {
149 counter-increment: chapter;
150 counter-reset: section;
151}
152h1.chapter::before {
153 content: counter(chapter) " ";
154}
155h2.section {
156 counter-increment: section;
157 counter-reset: sub-section;
158}
159h2.section::before {
160 content: counters(chapter, ".") "." counter(section) " ";
161}
162h3.sub-section {
163 counter-increment: sub-section;
164}
165h3.sub-section::before {
166 content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
167}
168</pre>
169 <header><h4>HTML</h4></header>
170<pre>
171<h1 class="chapter">Chapter A</h1>
172<h2 class="section">Section A-1</h2>
173<h3 class="sub-section">Subsection A-1-1</h3>
174<h3 class="sub-section">Subsection A-1-2</h3>
175
176<h2 class="section">Section A-2</h2>
177<h3 class="sub-section">Subsection A-2-1</h3>
178
179<h1 class="chapter">Chapter B</h1>
180<h2 class="section">Section B-1</h2>
181<h3 class="sub-section">Subsection B-1-1</h3>
182</pre>
183 <header><h4>HTML+CSS</h4></header>
184 <section class="sample-view">
185 <h1 class="chapter">Chapter A</h1>
186 <h2 class="section">Section A-1</h2>
187 <h3 class="sub-section">Subsection A-1-1</h3>
188 <h3 class="sub-section">Subsection A-1-2</h3>
189
190 <h2 class="section">Section A-2</h2>
191 <h3 class="sub-section">Subsection A-2-1</h3>
192
193 <h1 class="chapter">Chapter B</h1>
194 <h2 class="section">Section B-1</h2>
195 <h3 class="sub-section">Subsection B-1-1</h3>
196 </section>
197 </section>
198 </article>
199 </main>
200</body>
201</html>リスト関連
list-styleプロパティ
1ul {
2 list-style-type: circle; /* Empty circle bullets */
3 list-style-position: inside; /* Position bullets inside the content area */
4}
5
6ol {
7 /* Uppercase Roman numerals with bullets positioned outside */
8 list-style: upper-roman outside;
9}
10
11.custom-list {
12 list-style-image: url('custom-bullet.png'); /* Custom image bullets */
13}list-styleプロパティは、<ul>, <ol>などのHTMLリスト要素に対して、リストのマーカー（バレット）や番号のスタイルを指定するために使用されるCSSプロパティです。このプロパティでは、リストのスタイル全体を制御できるため、リストの見た目をカスタマイズするのに便利です。
この例では次のようなスタイルが適用されています。
ul: 丸の空のバレットが内側に表示されます。ol: ローマ数字の大文字で番号付けされ、番号は外側に表示されます。- **
custom-list**クラス: バレットとして指定した画像が表示されます。
list-styleの構成
list-styleは、以下の3つのプロパティのショートハンド（省略表記）です：
list-style-type: リストアイテムのマーカー（バレットや番号）の種類を指定します。list-style-position: マーカーがリストアイテムの内側（inside）か外側（outside）に配置されるかを指定します。list-style-image: 画像をリストのマーカーとして使用する場合に指定します。
基本的な使い方
1ul {
2 list-style: square inside url('path/to/image.png');
3}このコードは、次のように動作します：
list-style-type: square: マーカーの種類を四角形に設定します。list-style-position: inside: マーカーがリストアイテムの内側に表示されます。list-style-image: url('path/to/image.png'): マーカーとして画像を使用します。
個別プロパティの説明
list-style-type
list-style-type は、リストのマーカーの種類を指定します。リストの種類によって使用できるスタイルが異なります。
値の例
1ul {
2 /* Change list bullets to empty circles */
3 list-style-type: circle;
4}
5
6ol {
7 /* Number list items with lowercase letters (a, b, c, ...) */
8 list-style-type: lower-alpha;
9}
10
11ol.roman-list {
12 /* Number list items with uppercase roman numerals (I, II, III, ...) */
13 list-style-type: upper-roman;
14}none: マーカーを表示しない。disc(デフォルト): 小さな黒い円。circle: 小さな空の円（リング）。square: 小さな四角形。decimal: 1, 2, 3, ... といった番号付きリスト。lower-alpha: a, b, c, ... といったアルファベットの小文字。upper-alpha: A, B, C, ... といったアルファベットの大文字。lower-roman: i, ii, iii, ... といったローマ数字の小文字。upper-roman: I, II, III, ... といったローマ数字の大文字。
list-style-position
1ul {
2 list-style-position: inside;
3}list-style-positionプロパティは、マーカー（バレット）がリストアイテムの外側または内側に配置されるかを指定します。list-style-positionには、次の値を指定できます。
outside: マーカーはリストアイテムの外に配置され、アイテムはマーカーの後から始まります。この値がデフォルト値です。inside: マーカーはリストアイテムの内側に配置され、テキストの一部として表示されます。
list-style-image
1ul {
2 list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}list-style-imageプロパティは、リストのマーカーとして画像を使用する場合に設定します。画像は、url() を使って指定し、もし画像がロードできない場合、list-style-type で指定したマーカーが表示されます。
list-style ショートハンドプロパティ
1ul {
2 list-style: square inside url('bullet.png');
3}list-styleプロパティは、list-style-type、list-style-position、list-style-imageを一度に設定できるショートハンドプロパティです。順番は任意ですが、通常はこの例のように記述されます。この場合、四角形のバレットがリストアイテムの内側に表示され、マーカーとして画像が表示されます。
まとめ
list-styleは、リストの見た目（マーカーの種類、位置、カスタム画像）をまとめて指定できるショートハンドプロパティです。list-style-type、list-style-position、list-style-imageを個別に設定することも可能です。- レイアウトやデザインに応じてリストのマーカーを柔軟にカスタマイズできます。
CSSカウンター(counter())
1/* Reset the counter */
2dl {
3 counter-reset: item;
4}
5
6/* Apply the counter to list items */
7dl dt::before {
8 counter-increment: item; /* Increment the counter */
9 content: counter(item) ". "; /* Display the counter */
10}CSSカウンターを使って、リストの項目や特定の要素に自動的に連番を付けることができます。
カウンターの作成と初期化
1/* Create and initialize the counter */
2ol {
3 counter-reset: section; /* Set the counter name to 'section' */
4}counter-reset プロパティでカウンターを作成し、カウンターをリセットできます。
カウンターのインクリメント
1/* Increment the counter and display it */
2li::before {
3 counter-increment: section; /* Increment the counter by 1 */
4 content: counter(section) ". "; /* Display the counter value */
5}counter-increment プロパティでカウンターをインクリメントし、counter関数でカウンターの値を表示します。
counters()
CSSのcounters関数は、リスト項目の番号付けや段落の順番付けなどに使えるカスタムカウンタを扱う際に非常に有用です。この関数は、複数のカウンタ値を文字列で結合し、それをCSSコンテンツに表示できます。ここでは、counters関数の基本的な使い方から、実際の応用例までを詳しく解説します。
counterとcountersの違い
counter関数とcounters関数はどちらもカウンタ値を表示するために使用されますが、次のような違いがあります。
counter: 単一のカウンタの値を取得します。counters: 複数のカウンタ値を指定したセパレータで結合し、表示します。
例えば、ネストされたリスト項目でカウンタを使いたい場合、counters関数を使用して、親カウンタと子カウンタを連結した形で表示することができます。
counters関数の構文
counters(<counter-name>, <string>);counters関数はこのような構文で使用されます。
<counter-name>: 使用するカウンタの名前を指定します。<string>: 各カウンタの間に挿入される文字列を指定します（通常は.や-などの区切り文字を使います）。
counters関数の使用例
続いて、counters関数を使った例を見ていきましょう。
1ol {
2 list-style: none;
3 counter-reset: list-counter;
4}
5
6li {
7 counter-increment: list-counter;
8}
9
10li::before {
11 content: counters(list-counter, ".") " ";
12}- この例では、2階層のネストされたリストに対して、親と子のカウンタを連結しています。
list-counterというカウンタを定義しています。counters関数を使用して親リストのカウンタと子リストのカウンタを連結して表示しています。
複数レベルのカウンタを使用した応用例
counters関数を使えば、カスタムな番号付けや段落番号などの複数階層のカウンタを柔軟に操作できます。例えば、章と節が含まれるようなドキュメントを作成する場合に役立ちます。
1article {
2 counter-reset: chapter;
3}
4
5h1.chapter {
6 font-size: 1.2rem;
7 counter-increment: chapter;
8 counter-reset: section;
9}
10
11h1.chapter::before {
12 content: counter(chapter) " ";
13}
14
15h2.section {
16 font-size: 1.1rem;
17 counter-increment: section;
18 counter-reset: sub-section;
19}
20
21h2.section::before {
22 content: counters(chapter, ".") "." counter(section) " ";
23}
24
25h3.sub-section {
26 font-size: 1rem;
27 counter-increment: sub-section;
28}
29
30h3.sub-section::before {
31 content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
32}このコードでは、章（h1）、節（h2）、および小節（h3）のカウンタをそれぞれリセットし、counters関数で各レベルを結合しています。
まとめ
counters関数は、複数のカウンタをカスタマイズして階層的に表示したい場合に非常に便利です。CSSカウンタを使うことで、リストや見出しの番号付けを自由にカスタマイズでき、Webページに高度な情報構造を持たせることができます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。