Home/Menu

スタイルなCSSの基礎講座

内容の追加

◆ はじめに

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

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

◆ 内容の追加関係

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)noNN6で一部サポート

contentプロパティは、現状では、N6で一部サポートされているだけです。IEは全滅!
尚、Opera6は結構サポートされています。

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

quotesプロパティ

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

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

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

quotesプロパティは、現状では、N6とOpera6でサポートされています。IEは全滅!

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

counter-incrementプロパティ

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

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

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

counter-resetプロパティ

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

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

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

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

Java
はじめに
本文
おわりに
JavaScript
はじめに
本文
おわりに
----------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>

Home/Menu/スタイルシート概説リファレンス