Color これは CSS Getting Startedチュートリアルの第9章です; 文書が表示されたとき CSS を使ってコンテンツを追加するいくつかの方法について述べます。スタイルシートを編集して、テキストや画像を追加できます。
コンテンツについて
CSS の重要な利点のひとつが、文書の体裁（style）と内容（コンテンツ）を切り離しやすくすることです。それでも、あるコンテンツを文書ではなく、スタイルシートに含めたほうがわかりやすいことがあります。
スタイルシートではテキストや画像から成るコンテンツを記述できます。コンテンツと文書の構造に強い関連があるとき、コンテンツをスタイルシート内に記述します。
スタイルシートでコンテンツを記述すると、面倒な話が生まれる可能性があります。例えば、文書の複数の言語版をスタイルシートを共有して作ることがあるかもしれません。これは、スタイルシートの部分的に訳すときには、その一部を別々のファイルにわけるとともに、適切な言語版の文書とリンクされるよう編集しなければならない、ということです。
この混乱は、コンテンツがすべての言語や文化で利用できる記号や画像で記述されていれば発生しません。
スタイルシート内に記述されたコンテンツは、DOMの一部にはなりません。
テキストコンテンツ
CSS で要素の前または後ろにテキストコンテンツを挿入できます。このためには、ルールを作って :before または :after をそのセレクタに追加します。宣言部分には、specify the content プロパティと、その値としてテキストコンテンツを記述します。
このルールは、テキスト Reference: を class ref を持つすべての要素の前に追加します:
.ref:before {
font-weight: bold;
color: navy;
content: "Reference: ";
}
スタイルシートの文字セットのデフォルトは 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 をご覧ください。
画像コンテンツ
要素の前や後ろに画像を追加するには、content プロパティの値として画像ファイルの URL を記述します。
このルールは glossary を持つすべてのリンクの後ろに、空白文字とアイコンを追加します:
a.glossary:after {content: " " url("../images/glossary-icon.gif");}
要素の背景として画像を追加するには、 background プロパティの値として画像ファイルの URL を記述します。これは 背景色と画像、画像の繰り返し数、その他詳細の略記法です。
このルールは指定要素の背景を、指定された画像ファイルのURLにより設定します。
セレクタは要素の id を指定しています。値 no-repeat は、画像がただ一度だけ現れるようにします。
#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
背景に影響するプロパティや、背景画像を指定する際のその他のオプションについて詳しくは、リファレンス background をご覧ください。
実例: 背景画像の追加
白い真四角の底に青い線の引かれた画像です:
 |
- CSS ファイルと同じディレクトリにこのイメージをダウンロードしてください（例えば、右クリックしてコンテキストメニューから画像を別名で保存を選び、このチュートリアルのために使っているディレクトリを指定してください）。
- CSS ファイルを編集します。body に対してルールを追加し、ページ全体に背景画像を設定してください。
background: url("Blue-rule.png");値
repeatはデフォルトなので、指定する必要はありません。水平方向、垂直方向に画像は繰り返され、罫線入りの便箋のような外見を作ります。
さて次は?
Lists スタイルシートでコンテンツを追加し、リストの項目に印をつけることがよくあります。次の章では リスト要素のスタイル記述 について述べます。