content

contentとは、指定した条件に一致する部分の前後に文字列や画像を挿入するCSSプロパティで、:beforまたは:after偽要素と共に使われます。contentの使い方をご紹介します。

書式

content: normal | none | [string | uri | counter | open-quote | close-quote ]+ | inherit

contentプロパティの値には、次のうちいずれかを指定する。

none
偽要素は生成しない
normal
none(初期値)
string
文字列
uri
外部リソースのURIを url( uri ) の形式で指定する。
counter
カウンタ
open-quote
引用符(開き)
close-quote
引用符(閉じ)

使用例と表示サンプル

<style>
  #samp1:before {
    content: "inserted content ";
  }
</style>
<p id="samp1">sample</p>

sample

<style>
  #samp2:after {
    content: " inserted content";
  }
</style>
<p id="samp2">sample</p>

sample

<style>
  #samp3:before {
    content: open-quote;
  }
  #samp3:after {
    content: close-quote;
  }
</style>
<p id="samp3">sample</p>

sample

Unicode

content CSSプロパティでUnicodeを扱うには、円記号(バックスラッシュ)に続けて、頭の0を除いたUnicodeを指定する。

たとえば、段落記号(U+00B6)を頭に付けるには、CSSを次のようにしていする。

<style>
  .pilcrow:before {
    content: "\B6";
  }
</style>
<p class="pilcrow">
  ある朝、目を覚ました時、これはもうぐずぐずしてられない、と思ってしまったのだ。
</p>

ある朝、目を覚ました時、これはもうぐずぐずしてられない、と思ってしまったのだ。

特殊文字

content CSSプロパティでは実体参照を使えない。content CSSプロパティで特殊文字を挿入するには、Unicodeで指定する。

特殊文字
特殊記号 実体参照 Unicode
" &quot; U+0022
& &amp; U+0026
> &gt; U+003C
< &lt; U+003E

画像

content CSSプロパティで画像を挿入するには、画像のURIを指定する。

<style>
  .marker:before {
    content: url(https://segakuin.com/css/img/marker.gif);
  }
</style>
<p class="marker">
  私はインドのデリーにいて、これから南下してゴアに行こうか、北上してカシミールに向かおうか迷っていた。
</p>

私はインドのデリーにいて、これから南下してゴアに行こうか、北上してカシミールに向かおうか迷っていた。

改行

content CSSプロパティでタグは使用できないため、<br> を挿入できない。content CSSプロパティで改行させるには、"\A" を挿入したうえで、white-space:pre; を指定する。

:before {
  content: "\A";
  white-space: pre;
}

連番

content CSSプロパティで連番を振るには、counter 関数を使う。

<style>
  body {
    counter-reset: chapter
  }
  h4:before {
    content: "第" counter(chapter) "章 ";
    counter-increment: chapter;
  }
  h4 {
    counter-reset: section;
  }
  h5:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
  }
</style>
<h4>香港・マカオ</h4>
<h5>朝の光</h5>
<h5>黄金宮殿</h5>
<h4>マレー半島・シンガポール</h4>
<h5>メナムから</h5>

香港・マカオ

朝の光
黄金宮殿

マレー半島・シンガポール

メナムから

quotes

スタイルシート属性 quotes は、引用符の引用記号(クオート記号)を指定する。

適用対象 すべての要素

構文

quotes : [open-quote close-quote]+ | none | inherit

quotesプロパティの値には、次のうちいずれかを指定する。

[ open-quote close-quote ]+
引用符に使用する文字列の組(引用開始と引用終了)を1組以上指定する。
none
引用符なし
inherit
継承する

たとえば、引用符を [ と ] にする場合は、次のように属性値を指定する。

quotes: '[' ']'

引用符のペアを複数指定することで、入れ子になった引用符(引用の中の引用)を指定することもできる。

quotes: '[' ']' '{' '}'

使用例と表示サンプル

日本語の場合、引用符は 「 と 」、入れ子の引用符は 『 と 』である。この設定例を次に示す。

<p style="quotes: '「' '」' '『' '』'">
<q>quotes <q>quotes in quotes</q> quotes</q>
</p>

quotes quotes in quotes quotes

引用符を表示させない例を次に示す。

<p style="quotes: none">
<q>quotes <q>quotes in quotes</q> quotes</q>
</p>

quotes quotes in quotes quotes

引用符の属性を継承する場合の例を次に示す。

<p style="inherit">
<q>quotes <q>quotes in quotes</q> quotes</q>
</p>

quotes quotes in quotes quotes

counter-reset

counter-reset: [identifier integer ?]+|none|inherit
[ identifier integer ?]+
リセットするカウンターの識別子とリセット値を指定する。リセット値は省略可能で、省略したときは0になる。識別子とリセット値の組はひとつ以上であればいくつでも指定できる。
inherit
継承

counter-increment

counter-increment: [identifier integer ?]+|none|inherit
[ identifier integer ?]+
値を増やすカウンターの識別子と増分値を指定する。増分値は省略可能で、省略したときは1になる。識別子と増分値の組はひとつ以上であればいくつでも指定できる。
inherit
継承

CSSプロパティ

CSSには次のプロパティがある。

参考文献

W3C (2021) CSS Generated Content Module Level 3

WHATWG (2021) "Named character references" HTML Living Standard