CSS

A handy toolbox to add little texts or icons around elements and show things like URLs or numbers automatically using ::before/::after, attr(), and counters.

content

要素の前後に文字やアイコンをサッと差し込み、リンク先や番号も自動で見せられる “ちょい足し” の道具箱（::before/::after・attr()・counter系の基本とコツまで）。

まずはコピペでOK：content の基本5レシピ

1) 前に短い文字を足す（ラベル/バッジ）

CSS

.label::before {
    content: "New! ";
    font-weight: bold;
}

2) リンクのURLを後ろに表示（括弧付き）

CSS

a.showUrl::after {
    content: " (" attr(href) ")";
    font-style: italic;
}

3) 改行を入れる（\A＋white-space）

CSS

.note::after {
    content: "1行目\A2行目";
    white-space: pre;    /* \A を改行として表示するコツ */
}

4) 画像アイコンを前に足す（柔軟な背景画像方式）

CSS

.pic::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url(icon.svg);
    background-size: cover;
    margin-right: .25em;
}

5) 連番を自動で振る（カウンタ）

CSS

.list {
    counter-reset: n;
}
.list > li::before {
    counter-increment: n;
    content: counter(n) ". ";
    font-weight: bold;
}

contentプロパティとは？

contentプロパティは、::beforeや ::afterといった擬似要素を用いて、HTMLに直接書かれていないテキストや画像などのコンテンツを Webページの特定の要素の前後に追加するために使用されます。このプロパティを活用することで、スタイルシートを通じてページ上に動的にコンテンツを表示させることが可能となります。

擬似要素（pseudo-element）は、直訳すると「偽りの要素」という意味で、実際の HTML要素ではないものの、要素のように扱われることで特定のスタイルを適用する目的に使用されます。::beforeや ::afterといった擬似要素は、特定の要素の直前や直後にコンテンツ（文字列や画像など）を挿入するために設定され、例えば要素の前にアイコンを表示したり、文章の後に注釈を加えるのに便利です。これにより、ページのデザインを柔軟に調整し、視覚的な要素を追加することができます。

基本的な使い方

テキストの追加

以下は、段落の前に引用符を追加し、後に引用符を閉じる簡単な例です。挿入する文字列を「 " 」または「 ' 」で括って指定します。

これは引用の例です。

HTML

<p class="quote">これは引用の例です。</p>

CSS

p.quote::before {
	content: "「";
}
p.quote::after {
	content: "」";
}

画像の追加

ここに画像が表示されます。

HTML

<p class="image">ここに画像が表示されます。</p>

CSS

p.image::before {
	content: url('picture.png');
}

contentプロパティに urlを指定することで、指定した画像が段落の前に表示されます。画像のパスは存在する画像ファイルのパスに適宜置き換えてください。

カウンタの追加

CSSの contentプロパティと組み合わせて使用するカウンタは、ページ内の特定の要素がいくつ存在するかを自動的に数え、その数値を表示する機能です。これはリストや章の番号付け、セクションのラベリングなどに便利です。ここでは、カウンタを設定し、contentプロパティを用いて数値を表示する基本的な使い方を説明します。

カウンタの初期化: 通常、カウンタはコンテナ要素（たとえば bodyや特定の div）で初期化します。counter-resetプロパティを使ってカウンタを初期化します。
カウンタの増加: カウンタを増加させる要素に counter-incrementプロパティを設定します。このプロパティはカウンタを自動的に増加させます。
カウンタの表示: contentプロパティと ::beforeまたは ::after擬似要素を使用して、カウンタの現在値を表示します。

Introduction

smp03

Body

smp03

Conclusion

smp03

HTML

<body>
	<section>Introduction</section>
	<section>Body</section>
	<section>Conclusion</section>	
</body>

CSS

body {
	counter-reset: section;  /* セクションカウンタをリセット */
}
section {
	counter-increment: section;  /* セクションごとにカウンタを1増やす */
	margin: 1em auto;
}
section::before {
	content: "Section " counter(section) ": ";  /* カウンタの値を表示 */
	font-weight: bold;
}

この HTMLと CSSの例では、bodyタグで counter-resetを使って sectionカウンタを初期化し、各 section要素で counter-incrementを使ってこのカウンタを増加させています。そして、section::before擬似要素を使用して "Section X: " の形式でカウンタの値を表示しています。これにより、各セクションの前に番号が自動的に挿入され、文書が整理されます。

カウンタは非常に柔軟で、複数のカウンタを管理したり、ネストされた要素でカウンタを使い分けたりすることも可能です。これにより、複雑な文書の構造でも効果的に番号付けを行うことができます。

attr()

CSSの contentプロパティと attr()関数を組み合わせると、HTML要素の特定の属性から値を取得し、それをページ上のコンテンツとして表示することができます。このテクニックはリンクの URL、画像のファイル名、入力フォームのプレースホルダーなど、要素の属性値を視覚的に表すのに特に便利です。attr()関数では、括弧内に属性名を指定します。例えば、attr(alt)は alt属性の値を取得し、指定された要素の直前や直後にその値を挿入します。ここでの「attr」は「Attribute（属性）」の略です。この方法を用いることで、HTMLの属性値を直接 CSSで参照し、動的なコンテンツ生成を行うことが可能となります。

リンクのURLを表示する例

HTMLで設定されたリンクのhref属性を表示します。

詳細はこちらをご覧ください。

HTML

<p>詳細は<a href="https://yugien.xyz/">こちら</a>をご覧ください。</p>

CSS

a.smp06::after {
	content: " (" attr(href) ")";
	font-style: italic;
}

この例では、リンクの href 属性の値がテキストの後に表示されます。すべてのリンクに出したくない場合は、クラスを付けて a.smp06::after のように指定します（このページのサンプルはその形です）。

open-quote, close-quote

CSSの contentプロパティにおける open-quote と close-quote は、テキストが引用であることを示し、自動的に適切な開始引用符と終了引用符を挿入するために使用されます。quotesプロパティを通じて、異なる言語や地域に応じた引用符のスタイルを指定することができ、open-quoteで開始引用符、close-quoteで終了引用符が挿入されます。これにより、引用部分を視覚的に際立たせることが可能となり、文脈に応じた引用符の使用が容易になります。

引用符のスタイル設定: quotesプロパティを使用して、引用の開始と終了に使用する引用符を定義します。
引用符の挿入: contentプロパティとともに open-quoteや close-quoteを使用して、実際に引用符を挿入します。

以下の例では、HTML内の引用部分に自動的に引用符を追加しています。

ここに通常のテキストが続きます。

これは引用されたテキストです。

ここに通常のテキストが続きます。

HTML

<p>ここに通常のテキストが続きます。</p>
<p><q>これは引用されたテキストです。</q></p>
<p>ここに通常のテキストが続きます。</p>

CSS

/* 日本語環境向けの引用符スタイルを設定 */
q {
	quotes: "「" "」";
}
/* 引用開始時に開始引用符を追加 */
q::before {
	content: open-quote;
}
/* 引用終了時に終了引用符を追加 */
q::after {
	content: close-quote;
}

この例では、quotesプロパティを用いて、「と」を一般的な日本語の引用符として設定しています。<q>タグが使用されている部分には、::before擬似要素で open-quote、::after擬似要素で close-quoteを使い、適切な場所に引用符が自動的に挿入されるようになっています。

この方法を使用すると、マークアップをシンプルに保ちつつ、視覚的な整合性を保ちながら引用を明確に示すことができます。また、異なる言語や地域ごとに異なる引用符を簡単に管理できるため、国際的なコンテンツにも対応しやすくなります。

no-open-quote, no-close-quote

CSSのcontentプロパティにおけるno-open-quoteとno-close-quoteは、引用符そのものは表示せずに、引用の入れ子レベルだけを open-quote / close-quote と同様に増減させるためのキーワードです。つまり「深さは変わるが、記号は出ない」動きになります。

no-open-quote: 開始位置で引用レベルを1つ増やしますが、開始引用符は表示しません。
no-close-quote: 終了位置で引用レベルを1つ減らしますが、終了引用符は表示しません。

例えば、文章中で引用を使うが、特定の部分で開始引用符や終了引用符を表示したくない場合にこれらのキーワードを使います。

彼は言った、これは重要です。

しかし、次の部分では引用符を表示したくないことがあります。

HTML

<p>彼は言った、<q>これは重要です。</q></p>
<p>しかし、次の部分では<q class="noquote">引用符を表示したくない</q>ことがあります。</p>

CSS

/* 日本語環境向けの引用符スタイルを設定 */
q {
	quotes: "「" "」";
}
q::before {
	content: open-quote;
}
q::after {
	content: close-quote;
}
q.noquote::before {
	content: no-open-quote;
}
q.noquote::after {
	content: no-close-quote;
}

この例では、一般的な引用では「これは重要です。」というテキストの前後に日本語スタイルの引用符が挿入されますが、class="noquote" を持つ <q> では、見た目の引用符は表示されません。ただし引用のレベル（入れ子の深さ）は変わるため、後続の open-quote / close-quote の挙動には影響します。

使用上の注意

これらのキーワードは主要ブラウザで広く動作します。ただし quotes の設定や入れ子の状況によって、期待通りに見えないことがあります。
これらのキーワードは、主にデザインやレイアウトの微調整に使用され、文書の意味を変えることなく視覚的な調整を行います。

counter()関数と counters()関数の違い

counter()関数と counters()関数は、両者ともにカウンターの値をページ上に表示するために使用されますが、それぞれ異なる目的で設計されており、特にネストされたリストや要素の番号付けにおいてその違いが顕著になります。

counter() 関数

counter()関数は、特定のカウンターの現在の値を取得するために使われます。これは単一のカウンターに対して使用され、主にシンプルな番号付けに適しています。例えば、セクションや章番号など、階層が単一レベルの場合に適しています。

Introduction

smp03

Body

smp03

Conclusion

smp03

HTML

<body>
	<section>Introduction</section>
	<section>Body</section>
	<section>Conclusion</section>	
</body>

CSS

body {
	counter-reset: section;  /* セクションカウンタをリセット */
}
section {
	counter-increment: section;  /* セクションごとにカウンタを1増やす */
	margin: 1em auto;
}
section::before {
	content: "Section " counter(section) ": ";  /* カウンタの値を表示 */
	font-weight: bold;
}

この例では、各セクションに対してユニークな番号が割り当てられます。

counters() 関数

counters()関数は、ネストされた要素やリスト内で使用されることが多く、親子関係にある要素群の番号付けに便利です。この関数は、指定されたカウンターの全レベルの値を取得し、指定された区切り文字でそれらを結合して表示します。これにより、例えば章と節の番号を「1.1」「1.2」のように表すことができます。

Introduction: イントロダクション

Background: 背景

Historical Overview: 歴史的概要

Recent Developments: 最近の発展

Related Work: 関連研究

Methodology: 方法論

Study Design: 研究デザイン

Data Collection: データ収集

Analysis Techniques: 分析技術

Results: 結果

Statistical Findings: 統計的所見

Case Studies: ケーススタディ

Comparative Analysis: 比較分析

Discussion: 討論

Implications: 影響

Limitations: 限界

Future Research: 今後の研究方向

Conclusion: 結論

HTML

<body>
	<h1>Introduction: イントロダクション</h1>
	<h1>Background: 背景</h1>
		<h2>Historical Overview: 歴史的概要</h2>
		<h2>Recent Developments: 最近の発展</h2>
		<h2>Related Work: 関連研究</h2>
	<h1>Methodology: 方法論</h1>
		<h2>Study Design: 研究デザイン</h2>
		<h2>Data Collection: データ収集</h2>
		<h2>Analysis Techniques: 分析技術</h2>
	<h1>Results: 結果</h1>
		<h2>Statistical Findings: 統計的所見</h2>
		<h2>Case Studies: ケーススタディ</h2>
		<h2>Comparative Analysis: 比較分析</h2>
	<h1>Discussion: 討論</h1>
		<h2>Implications: 影響</h2>
		<h2>Limitations: 限界</h2>
		<h2>Future Research: 今後の研究方向</h2>
	<h1>Conclusion: 結論</h1>
</body>

CSS

body {
	counter-reset: section; /* 最上位レベルのカウンターをリセット */
}
h1 {
	counter-reset: subsection; /* サブセクションのカウンターをリセット */
}
h2 {
	counter-increment: subsection; /* サブセクションのカウンターを増加 */
	text-indent: 1.5em;
}
h1::before {
	content: counter(section) ". "; /* セクション番号 */
	counter-increment: section; /* セクションのカウンターを増加 */
	font-weight: bold;
}
h2::before {
	content: counter(section) "." counters(subsection, ".") " "; /* ネストされたサブセクション番号 */
	font-weight: bold;
}

この例では、h1が新しいセクションを開始し、h2はそのセクション内のサブセクションとして機能します。counters()関数を使用することで、「1.1」「1.2」などと親セクションとサブセクションの関係を明確に示すことができます。

結論

簡単に言うと、counter()は単一レベルの番号付けに、counters()はネストされた複数レベルの番号付けに適しています。それぞれの関数がどのように番号付けを行うかを理解することで、CSSで文書やリストの構造を効果的に表現するのに役立ちます。

ネストが２段階以上のサンプルコード

以下の例では、h1, h2, h3タグを使用して３レベルのネストを示し、それぞれのレベルでカウンターを増加させています。counters()関数を使用して各セクションに対して番号付けを行います。

Main Section

Subsection 1

Subsubsection 1

Subsubsection 2

Subsection 2

Subsubsection 1

Second Main Section

Subsection 1

Subsubsection 1

HTML

<body>
	<h1>Main Section</h1>
		<h2>Subsection 1</h2>
			<h3>Subsubsection 1</h3>
			<h3>Subsubsection 2</h3>
		<h2>Subsection 2</h2>
			<h3>Subsubsection 1</h3>
	<h1>Second Main Section</h1>
		<h2>Subsection 1</h2>
			<h3>Subsubsection 1</h3>
</body>

CSS

body {
	counter-reset: section;  /* 最上位のセクションカウンターをリセット */
}
h1 {
	counter-reset: subsection;  /* 第二レベルのカウンターをリセット */
}
h2 {
	counter-reset: subsubsection;  /* 第三レベルのカウンターをリセット */
	text-indent: 1.5em;
}
h3 {
	text-indent: 3em;
}
h1::before {
	counter-increment: section;  /* セクションカウンターを増加 */
	content: counters(section, ".") " ";  /* ネストされた番号付け */
	font-weight: bold;
}
h2::before {
	counter-increment: subsection;  /* サブセクションカウンターを増加 */
	content: counters(section, ".") "." counters(subsection, ".") " ";  /* ネストされた番号付け */
	font-weight: bold;
}
h3::before {
	counter-increment: subsubsection;  /* サブサブセクションカウンターを増加 */
	content: counters(section, ".") "." counters(subsection, ".") "." counters(subsubsection, ".") " ";  /* ネストされた番号付け */
	font-weight: bold;
}

この例では、counters()関数を使用して、h1, h2, h3タグでネストされた番号付けを行っています。使用されるカウンターは section, subsection, subsubsectionであり、それぞれのレベルでカウンターをリセットし、適切な場所でカウンターを増加させています。このように counters()関数を利用することで、多層の文書構造に対しても明確で整理された番号付けを実現できます。

Home

サイトのトップページ

HTML (HyperText Markup Language)

ウェブページの基本的な構造を作成します。見出し、段落、リンク、画像などの要素を定義します。

a 要素

href属性が指定されていれば、ハイパーリンクを表します。

body 要素

ドキュメントの本文

div 要素

一般的なコンテナ

h1～h6 要素

セクションに見出しを付けます。