contentプロパティでコンテンツを追加する(2):FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008-07-18 07:00:00
  • このエントリーをはてなブックマークに追加

見出しの前に画像を追加する

 前回の「contentプロパティでコンテンツを追加する(1)--FirefoxとSafariのCSS」ではcontentプロパティで文字列を追加したが、画像を追加することも可能だ。画像を追加するには、次のように「url(〜)」という形で画像のURLを指定する。ここでは

でマークアップした見出しの前にmark.pngを追加するように指定した。

見出しの前に画像を追加したもの 見出しの前に画像を追加したもの
h1:before{
content: url(mark.png);
}

こんにちは

ブラウザで表示を確認する

 contentプロパティによる画像の追加には、Firefox、Safari、Operaが対応している。Internet Explorer 8(ベータ版)は文字列の追加には対応したが、画像の追加には対応していない。

 また、CSSの標準規格では「content: url(〜)」と記述することで画像以外の外部ファイルを読み込むことも想定されている。しかし、現状ではどのブラウザも画像の読み込みだけをサポートしている。

contentプロパティで画像を追加するメリット

 画像はHTML/XHTMLのタグで追加することができるが、スタイルシートを利用した方が画像の追加や差し替えに手間がかからないというメリットがある。

 たとえば、次のサンプルのように、クラス名を「new」と指定した見出しにだけ画像を追加することも可能だ。ここでは、見出しの後ろに新着を示す画像を追加している。

出しの後に画像を追加したもの 出しの後に画像を追加したもの
h1.new:after{
content: url(new.png);
}

見出しA

見出しB

見出しC

見出しD

見出しE

ブラウザで表示を確認する

 また、スタイルシートで見出しに画像を追加する場合、現状では画像を背景画像として追加するテクニックが広く利用されている。たとえば、次のサンプルの場合、「見出しA」にはcontentプロパティで、「見出しB」にはbackground-imageプロパティで画像を追加している。ブラウザ画面の表示だけであれば、大きな違いは発生しない。

contentとbackground-imageで画像を追加したもの contentとbackground-imageで画像を追加したもの
h1.head01:before{
content: url(mark.png);
}

h1.head02{
background-image: url(mark.png);
background-repeat: no-repeat;
padding-left: 28px;
}

見出しA

見出しB

ブラウザで表示を確認する

 しかし、ブラウザが背景を印刷しない設定になっていると、contentプロパティで追加した画像は印刷されるが、background-imageプロパティで追加した画像は印刷されない。

 たとえば、Firefoxの[ファイル]→[ページ設定]で「背景色と背景画像も印刷」のチェックを外すと、上のソースの印刷結果は次の画像のようになる。多様なユーザー環境で意図したデザインを維持するためには、contentプロパティを利用する方がメリットがあると言える。

背景を印刷しない設定にしたときの印刷結果 背景を印刷しない設定にしたときの印刷結果

alt属性の値を画像のキャプションとして表示する

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]