初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL12. その他の設定　その7 ★ 要素の前後に内容を追加する

content: <値>;

擬似要素「:before」「:after」と併用して要素の前後に内容を追加するのが「content:」です。これはCSS2に含まれるプロパティではありますが、IE6.0、NN4.7以前など2007年現在で一般的に使われているブラウザが対応していませんので、使う際には注意が必要です(NNは6.2以降で対応)。

このプロパティに指定できる<値>は、以下の4つがあります。

文字 ... 追加したい文字を " " で囲んで指定する　ex.) p:before { content: "IMPORTANT!!"; }

画像 ... 追加したい画像が保存されているURLを相対パスで指定する。URLは以下のように ("  ") で囲む。(※スタイルシートでのURLの書き方は、Colum12. URLとコメントの書き方を参照して下さい。)

　　ex.) p:before { content: url("../icon1.gif"); }

属性 ... HTMLタグに記入されている属性の内容を表示する。属性は以下のようにattrの後に( )で囲む。(※属性については、Colum2. タグの構成を参照して下さい。)

　　ex.) img:after { content: attr(alt); }

引用符 ... 引用符を挿入する場合は、以下のキーワー-ドを指定する。(※実際に表示される引用符はブラウザごとに異なりますが、「quotes:」プロパティで予め指定しておくことも可能です。「quotes:」については、Vol12-8.引用符を指定するを参照して下さい。)

　open-quote ... 先頭の引用符

  close-quote ... 終了の引用符

  no-open-quote 

  no-close-quote

ex1.)

p:before { content: "IMPORTANT!!"; 

font-size: 10pt;

color: red; }

ex2.)

p:before { content: url("../icon1.gif"); }

上例のように指定しておくと、HTMLにテキストやURLを書き込むことなく、任意の位置にアイコンや注意書きを表示させることができます。2007年現在ではブラウザの対応に問題がありますが、知識として覚えておいかれると良いでしょう。

初級篇2.VOL12. その他の設定・その6 <<

>> 初級篇2.VOL12. その他の設定・その8