CSSでオシャレなページ番号：@counter-styleで実現するデザイン例

本ガイドでは、@counter-style規則の仕組みと、様々なプロパティを使用してユニークで魅力的なカウンターを作成する方法について詳しく説明します。

基本構造

@counter-style規則は、以下の構文で定義されます。

@counter-style 名前 {
  カウンターシステム;
  [シンボル記述子];
  [加算シンボル記述子];
  [負の記述子];
}

この規則には、以下の要素が含まれます。

負の記述子: 負のカウンター値に適用される書式設定を定義します。
加算シンボル記述子: 加算カウンターシステムで使用されるシンボルを定義します。
シンボル記述子: カウンター値を文字列に変換する方法を定義します。
カウンターシステム: カウンターの増減を制御するシステムを指定します。有効な値は、none、numeric、alphabetic、symbolic、additive、cycleです。
名前: 規則を識別するために使用するユニークな名前です。

シンボル記述子

シンボル記述子は、カウンター値を文字列に変換するためのルールを定義します。以下のプロパティを使用して、シンボル記述子を構成できます。

separator: 複数のカウンター値を区切るために使用する文字列を指定します。
suffix: カウンターの後に追加する文字列を指定します.
prefix: カウンターの前に追加する文字列を指定します。
counter-set: カウンター値を初期化する値を指定します。
counter-increment: カウンター値をどのように増減するかを指定します。
content: カウンター値を置き換える文字列を指定します。

例：カスタムカウンタースタイルの作成

以下は、ローマ数字でリスト項目を番号付けするカスタムカウンタースタイルの例です。

@counter-style roman {
  counter-system: cyclic;
  symbols: I, II, III, IV, V, VI, VII, VIII, IX, X;
}

ul {
  list-style-type: roman;
}

この例では、romanという名前のカウンタースタイルが定義されています。このスタイルは、cyclicカウンターシステムを使用し、IからXまでのローマ数字のシンボルセットを定義します。ul要素にこのスタイルを適用すると、リスト項目がローマ数字で番号付けされます。

加算カウンターシステム

加算カウンターシステムは、複数のカウンター値を組み合わせるために使用されます。各カウンターには、独自の名前とシンボルセットが定義できます。加算カウンターシステムを使用するには、additiveカウンターシステムを指定し、加算シンボル記述子を使用して個々のカウンターを定義する必要があります。

例：ページ番号とセクション番号の組み合わせ

以下は、ページ番号とセクション番号を組み合わせたカウンターを作成する例です。

@counter-style page-section {
  counter-system: additive;
  加算シンボル記述子: "+" counter(page) "-" counter(section, string ".");
}

h1 {
  counter-style: page-section;
}

この例では、page-sectionという名前の加算カウンタースタイルが定義されています。このスタイルは、pageカウンターとsectionカウンターの値を組み合わせ、"+"記号と"-"記号で区切ります。h1要素にこのスタイルを適用すると、見出しにページ番号とセクション番号が表示されます。

負のカウンター値

negative記述子を使用して、負のカウンター値の書式設定を定義できます。この記述子には、prefix、suffix、separatorプロパティと同じプロパティが含まれます。

例：負の値を丸括弧で囲む

以下は、負のカウンター値を丸括弧で囲む例です。

@counter-style negative {
  symbols: none;
  negative: "(" counter(".") ")";
}

ul {
  list-style-type: negative;
}

アルファベットとローマ数字を組み合わせたカウンター

この例では、リスト項目をアルファベットとローマ数字の組み合わせで番号付けします。

@counter-style alpha-roman {
  counter-system: cycle;
  symbols: A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z, I, II, III, IV, V, VI, VII, VIII, IX, X;
}

ul {
  list-style-type: alpha-roman;
}

カスタムマーカー付きの装飾的な円形リスト

この例では、円形マーカーとドットで区切られた番号を持つ装飾的なリストを作成します。

@counter-style circle-dot {
  counter-system: cycle;
  symbols: '●', '●', '●', '•', '•', '•';
  prefix: 'リスト ';
  separator: '. ';
}

ul {
  list-style-type: circle-dot;
}

3色で交互に表示されるページ番号

この例では、ページ番号を3色で交互に表示します。

@counter-style tricolour {
  counter-system: cycle;
  symbols: '#f00', '#0f0', '#00f';
  content: ' 第 ' counter(page) ' ページ';
}

body {
  counter-style: tricolour;
  page-break-before: always;
}

::before {
  counter-increment: page;
  content: counter(tricolour);
  display: block;
  font-size: 2em;
  text-align: center;
  margin-top: 1em;
}

曜日と日付を組み合わせた見出し

この例では、見出しに曜日と日付を組み合わせたカウンターを表示します。

@counter-style day-date {
  counter-system: additive;
  加算シンボル記述子: counter(weekday, ordinal) " " counter(day, numeric) "." counter(month, numeric);
}

h1 {
  counter-style: day-date;
}

降順にソートされたセクション見出し

この例では、セクション見出しを降順にソートし、番号とセクションタイトルを表示します。

@counter-style descending-sections {
  counter-system: cycle;
  symbols: none;
  content: counter(section, descending) " - " counter(section-title);
}

h2 {
  counter-style: descending-sections;
  counter-increment: section;
}

.section-title {
  counter-set: section-title var(--section-title);
}

これらの例は、@counter-style ルールの可能性のほんの一例です。創造性を発揮して、独自のユニークで魅力的なカウンターを作成してみてください。

複雑なカウンターを作成する場合は、CSSカウンターの仕様を熟知していることが重要です。
すべてのブラウザがすべての @counter-style プロパティをサポートしているわけではないことに注意してください。
上記の例はあくまでもガイドであり、ニーズに合わせて調整する必要があります。

list-style-type プロパティ

最も簡単な代替方法は、list-style-type プロパティを使用することです。このプロパティは、円形マーカー、数字、アルファベットなどの標準的なリストスタイルを素早く簡単に適用できます。

ul {
  list-style-type: circle; /* 円形マーカー */
  list-style-type: decimal; /* 数字 */
  list-style-type: lower-alpha; /* 小文字アルファベット */
}

ただし、list-style-type プロパティは、@counter-style ルールほど高度なカスタマイズオプションを提供していないことに注意してください。

counter() 関数

counter() 関数は、カウンター値を文字列に変換するために使用できます。この関数は、list-style-type プロパティよりも柔軟性があり、カスタムカウンターを作成するために使用できます。

ul {
  list-style-type: none;
  counter-increment: item;
  content: '項目 ' counter(item) '. ';
}

この例では、各リスト項目の前に "項目 N." という文字列が表示されます。

カスタムマーカー画像

カスタムマーカー画像を使用して、リスト項目を装飾することもできます。

ul {
  list-style-type: none;
  list-style-image: url('marker.png');
}

この例では、各リスト項目の前に "marker.png" 画像が表示されます。

JavaScript

高度なカウンターを作成するには、JavaScriptを使用できます。JavaScriptを使用して、カウンター値を操作し、DOM にカスタム要素を動的に生成することができます。

function createList() {
  const list = document.createElement('ul');
  for (let i = 1; i <= 10; i++) {
    const item = document.createElement('li');
    item.textContent = `項目 ${i}`;
    list.appendChild(item);
  }
  document.body.appendChild(list);
}

createList();

この例では、1から10までの番号付きリストが動的に生成されます。

最適な代替方法の選択

使用する代替方法は、要件によって異なります。

複雑な装飾が必要な場合は、カスタムマーカー画像または JavaScript を使用できます。
少しだけカスタマイズが必要な場合は、counter() 関数を使用できます。
シンプルなリストスタイルの場合は、list-style-type プロパティが最適です。