スタイルなCSSの基礎講座

◆ はじめに

つぎは、内容の追加系のプロパティです。

尚、ご使用のブラウザのスタイルシート対応度によって、表示が異なる場合があります。

• スタイルシートの基本的なとこは、スタイルの適用方法を参照してください。
• スタイルシートのリファレンスは、こちらにありますので参照してください。
• 尚、各種ブラウザのCSS2対応状況ガイド（他所様）は、こちらを参照のこと。

◆ 内容の追加関係

contentプロパティ

contentプロパティは、要素の直前、または直後に新しく追加する内容を設定します。
疑似要素（before,after）へ対してのみ指定できます。 設定値は、以下の通りです。

文字列

追加する文字列を指定します。

URI

追加する画像等のURIを指定します。

カウンタ

counter(),counters()関数で要素内容に自動的に連番を追加します。

attr

attr(属性名)関数で属性名で指定した文字列を追加します。

open-quote,close-quote

quotesプロパティで設定されている引用符を追加します。
引用符は、open-quoteが先頭、close-quoteが最後を追加します。

no-open-quote,no-close-quote

イマイチわかりません...。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
before疑似要素,afte疑似要素	空文字（empty string）	no	NN6で一部サポート

----------CSS2 ソース------------------------------------------------
p.chuui:before{
	content: "[注意]";
	color: red;
}
---------- HTML4.01 ソース ------------------------------------------
<p class="chuui">
contentプロパティは、現状では、Ｎ６で一部サポートされているだけです。ＩＥは全滅！<br>
尚、Opera6は結構サポートされています。
</p>

quotesプロパティ

quotesプロパティは、contentプロパティで追加する引用符を設定します。
設定値は、先頭文字列 最後文字列とnone（引用符を表示しない）があります。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
全要素	ブラウザ次第	yes	NN6

サンプルは、以下の通りです。

----------CSS2 ソース------------------------------------------------
q {
/*	quotes: "\"" "\"" */
	quotes: "『" "』"
}
q:before {
	content: open-quote
}
q:after {
	content: close-quote
}
---------- HTML4.01 ソース ------------------------------------------
<p class="chuui">
quotesプロパティは、現状では、<q>Ｎ６とOpera6でサポート</q>されています。<q>ＩＥは全滅！</q>
</p>

counter-incrementプロパティ

counter-incrementプロパティは、contentプロパティで追加するカウンタ値を進めるためのものです。
設定値は、カウンタ名または、カウンタ名＋整数、none（値を進めない）。
整数は、その分進められます。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
全要素	none	no	なし

本プロパティを2002/06/21現在サポートしているブラウザはOpera6のみのようです。

counter-resetプロパティ

counter-resetプロパティは、contentプロパティで追加するカウンタ値をリセットするためのものです。
設定値は、カウンタ名または、カウンタ名＋整数、none（リセットしない）。
整数は、その値にリセットされます。

適用要素	初期値	継承	対応ブラウザ（NN6,IE5.5のみテスト）
全要素	none	no	なし

本プロパティを2002/06/21現在サポートしているブラウザはOpera6のみのようです。

サンプルは、以下の通りです。

----------CSS2 ソース------------------------------------------------
h5:before{
	content: "第" counter(chapter) "章　";
	counter-increment:chapter;
	counter-reset:section;
}
h6:before{
	content: "第" counter(chapter) "章　第" counter(section) "節　";
	counter-increment:section;
}
---------- HTML4.01 ソース ------------------------------------------
<h5>Java</h5>
<h6>はじめに</h6>
<h6>本文</h6>
<h6>おわりに</h6>
<h5>JavaScript</h5>
<h6>はじめに</h6>
<h6>本文</h6>
<h6>おわりに</h6>