IE8が対応したCSS 2.1の機能:印刷とコンテンツの追加に関する機能

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

コンテンツの追加に関する機能

 IE8はcontentプロパティや:before、:afterセレクタなど、コンテンツの追加に関する機能をサポートし、CSSを利用してテキストや連番を追加することができるようになった。

 コンテンツを追加する方法について詳しくは「contentプロパティでコンテンツを追加する(1)」を参照してほしい。

 なお、CSS 2.1では画像に対するコンテンツの追加については定義されておらず、将来的な規格を参照することになっている。そのため、IE8においてもに対するコンテンツの追加は機能しないようになっている。

テキストの追加

 まずは、IE8でテキストの追加が機能するかどうかを確認してみよう。次のサンプルはcontentプロパティを利用して「タイトル」という見出しの前に「COLUMN」というテキストを追加したものだ。追加したテキストはオレンジの背景に白文字で表示するように指定している。

見出し「タイトル」の前に「COLUMN」を追加 見出し「タイトル」の前に「COLUMN」を追加
h2:before       {
        content: 'COLUMN';
        color: white;
        background-color: orange;
        font-family: 'Comic Sans MS', Helvetica, sans-serif;
        padding: 1px 5px;
        margin-right: 10px;
        }

タイトル

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

画像の追加

 テキストだけでなく、画像の追加にも対応している。

「こんにちは」の前に花の画像を挿入 「こんにちは」の前に花の画像を挿入
h1:before       {
        content: url(mark.png);
        }

こんにちは

ブラウザで表示を確認する
  • コメント(2件)
#1 島の左近   2009-06-30 14:53:23
ものすごく、勉強になった。
社内用にまとめ直す・・・・。

で、「ブラウザで表示を確認する」をクリックしても、ここは「ページがない」って言われるます。私だけ?
自分のところで組み立てるのが面倒なので、私のせいでなければ、リンクを修正して欲しい。
#2 tomita   2009-07-01 11:01:53
島の左近さま

builder編集部 冨田です。いつもご愛読頂きまして、ありがとうございます。

また、今回ご指摘頂いたリンク切れですが、先ほど修正いたしました。
ご迷惑をおかけしましたこと、お詫び申し上げます。

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