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

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

属性値の追加

 属性の値を取得して追加するattr()にも対応している。たとえば、次のサンプルではリンクのtitle属性の値を取得してオレンジ色の文字で表示するように指定している。

title属性の値を取得して「ZDNetホームページ」をオレンジ色で表示 title属性の値を取得して「ZDNetホームページ」をオレンジ色で表示
a:after{
content: '(' attr(title) ')';
color: orange;
font-weight: bold;
}

詳しくはこちら

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

連番の追加

 IE8はcounter()やcounter-reset、counter-incrementプロパティをサポートし、連番も追加できるようになった。連番を追加する方法について詳しくは「contentプロパティでコンテンツを追加する(3)」を参照してほしい。

 なお、IE8のベータ版では連番の表示に問題があり、に対して「counter-reset: section」と指定することで回避していたが、正式版ではこの指定がなくてもきちんと機能するようになっている。

見出しにオレンジ色の連番を追加したもの 見出しにオレンジ色の連番を追加したもの
h2:before{
content: counter(section) '. ';
color: orange;
font-size: 42px;
}

h2{
counter-increment: section;
}

見出し

文字文字文字文字文字文字文字文字文字文字文字。文字文字文字文字文字文字文字文字文字文字文字。

見出し

文字文字文字文字文字文字。文字文字文字文字文字。文字文字文字文字文字文字文字文字文字文字文字文字。

見出し

文字文字文字文字文字文字文字文字文字文字文字。文字文字文字文字文字文字文字文字文字文字文字。

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

引用符の追加

 IE8はquotesプロパティにも対応したため、contentプロパティで追加する引用符の種類を指定できるようになった。次のサンプルでは見出しを「 」で囲むように指定している。

テキスト「見出し」を「 」で囲むように指定 テキスト「見出し」を「 」で囲むように指定
h2:before{
content: open-quote;
color: orange;
}

h2:after{
content: close-quote;
color: orange;
}

h2{
quotes: "「" "」"
}
ブラウザで表示を確認する

 IE8が対応した印刷やコンテンツの追加に関する機能は以上だ。次回はセレクタやアウトライン、テーブル関連の機能について確認していきたい。

  • コメント(2件)
#1 島の左近   2009-06-30 14:53:23
ものすごく、勉強になった。
社内用にまとめ直す・・・・。

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

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

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

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