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

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

 スタイルシートのcontentプロパティと:beforeや:afterセレクタを利用すれば、指定した位置に文字や画像を追加することができる。CSS 2で定義されたもので、基本的な機能にはFirefoxSafariOperaが対応している。Internet Explorerはずっと未対応のままだったが、バージョン8(ベータ版)で対応した。

 今回はCSS 2.1で追加されたcontentプロパティの「none」という値にFirefox 3が対応したので、それがどのように機能するのかを確認していきたい。

スタイルシートでコンテンツを追加する

 まずは、スタイルシートでコンテンツを追加する方法を確認しておく。コンテンツを追加するには、contentプロパティでコンテンツの内容を、:before/:afterセレクタで追加する位置を指定する。

 たとえば、コンテンツの内容を「COLUMN」、追加する位置を「h2:before」と指定すると、

でマークアップした見出しの前に「COLUMN」という文字を追加することができる。なお、contentプロパティでは、追加する文字を「'」または「"」で囲んで指定する。

見出しの前に「COLUMN」という文字を追加したもの。 見出しの前に「COLUMN」という文字を追加したもの。
h2:before{
content: 'COLUMN'
}

タイトル

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

 追加した文字はインラインボックスを形成するので、文字や背景・余白などのデザインを設定することが可能だ。たとえば、次のサンプルでは文字を白色に、背景をオレンジ色に指定して、paddingとmarginで文字まわりの余白サイズを調節している。また、フォントは「Comic Sans MS」で表示するように指定した。

追加した文字のデザインを指定したもの。 追加した文字のデザインを指定したもの。
h2:before{
content: 'COLUMN';
color: white;
background-color: orange;
font-family: 'Comic Sans MS', Helvetica, sans-serif;
padding: 1px 5px;
margin-right: 10px;
}
ブラウザで表示を確認する

 また、:beforeを:afterに変更すれば、見出しの後に文字を追加することができる。

見出しの後に文字を追加したもの。 見出しの後に文字を追加したもの。
h2:after{
content: 'COLUMN';
color: white;
background-color: orange;
font-family: 'Comic Sans MS', Helvetica, sans-serif;
padding: 1px 5px;
margin-left: 10px;
}
ブラウザで表示を確認する

 ここまでに見てきた3つのサンプルは、Firefox、Safari、Operaで表示することができる。また、Internet Explorerはバージョン8(ベータ版)で表示することが可能だ。

Internet Explorer 8(ベータ版)での表示。 Internet Explorer 8(ベータ版)での表示。

コンテンツを追加しないように指定する

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