{{previousPage("/ja/docs/CSS/Getting_Started/Color", "Color")}} これは CSS Getting Startedチュートリアルの第9章です; 文書が表示されたとき CSS を使ってコンテンツを追加するいくつかの方法について述べます。スタイルシートを編集して、テキストや画像を追加できます。

コンテンツについて

CSS の重要な利点のひとつが、文書の体裁（style）と内容（コンテンツ）を切り離しやすくすることです。それでも、あるコンテンツを文書ではなく、スタイルシートに含めたほうがわかりやすいことがあります。

スタイルシートではテキストや画像から成るコンテンツを記述できます。コンテンツと文書の構造に強い関連があるとき、コンテンツをスタイルシート内に記述します。

さらに詳しく

スタイルシートでコンテンツを記述すると、面倒な話が生まれる可能性があります。例えば、文書の複数の言語版をスタイルシートを共有して作ることがあるかもしれません。これは、スタイルシートの部分的に訳すときには、その一部を別々のファイルにわけるとともに、適切な言語版の文書とリンクされるよう編集しなければならない、ということです。

この混乱は、コンテンツがすべての言語や文化で利用できる記号や画像で記述されていれば発生しません。

スタイルシート内に記述されたコンテンツは、DOMの一部にはなりません。

テキストコンテンツ

CSS で要素の前または後ろにテキストコンテンツを挿入できます。このためには、ルールを作って {{cssxref(":before")}} または {{cssxref(":after")}} をそのセレクタに追加します。宣言部分には、specify the {{cssxref("content")}} プロパティと、その値としてテキストコンテンツを記述します。

例

HTML

A text where I need to <span class="ref">something</span>

CSS

.ref::before {
  font-weight: bold;
  color: navy;
  content: "Reference ";
}

結果

{{ EmbedLiveSample('Text_content', 600, 30) }}h3

さらに詳しく

スタイルシートの文字セットのデフォルトは UTF-8 ですが、リンク、スタイルシート自身の内部、もしくはその他の方法で指定できます。CSS Specification の 4.4 CSS style sheet representation をご覧ください。

文字を、バックスペースによるエスケープ機構を使って記述することもできます。例えば、\265B はチェスの黒クイーンの記号 ♛ です。詳しくは、Referring to characters not represented in a character encoding と CSS Specification の Characters and case をご覧ください。

画像コンテンツ

要素の前や後ろに画像を追加するには、{{cssxref("content")}} プロパティの値として画像ファイルの URL を記述します。

例

このルールは glossary を持つすべてのリンクの後ろに、空白文字とアイコンを追加します:

HTML

<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>

CSS

a.glossary::after {
   content: " " url("https://mdn.mozillademos.org/files/16322/glossary-icon.gif");
}

結果

{{nextPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} スタイルシートでコンテンツを追加し、リストの項目に印をつけることがよくあります。次の章ではリスト要素のスタイル記述について述べます。