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

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

 IE8はCSS 2.1の機能に一通り対応した。そこで今回からはIE8が新規に対応したCSS 2.1のプロパティや値についてまとめていく。まずは、古いIEでは未対応だった印刷関連の機能と、コンテンツの追加に関する機能について確認していきたい。

 なお、新しく対応した機能を利用するにはIE8のStandardsモード(標準準拠モード)で表示する必要がある。Standardsモードや互換表示ボタンについては第2回の記事「IE8のレンダリングモードと互換表示」を参照してほしい。

印刷関連の機能

 印刷関連の機能では、古いIEはpage-break-afterとpage-break-beforeプロパティに部分的に対応していた。IE8ではこれらのプロパティを完全にサポートするとともに、@pageルールやpage-break-insideプロパティなど、印刷関連の残りの機能にも対応している。

@pageルール

 IE8は@pageルールをサポートし、用紙まわりの余白サイズを指定できるようになった。たとえば、次のサンプルでは用紙の上下に2cm、左右に5cmの余白を入れるように指定している。印刷プレビューで印刷したときの出力を確認すると、上下の余白に対して左右の余白が大きくなり、指定が反映されていることがわかる。

ブラウザ画面での表示(画像をクリックすると拡大します) ブラウザ画面での表示(画像をクリックすると拡大します)
印刷プレビュー(画像をクリックすると拡大します) 印刷プレビュー(画像をクリックすると拡大します)
@page{
margin: 2cm 5cm;
}
ブラウザで表示を確認する

 なお、IE8はページセレクタの機能にも対応しており、「@page :left」という形でセレクタを指定すると、印刷出力の左ページにだけ設定を適用することができる。適用先を右ページだけにする場合は「@page :right」、最初のページだけにする場合は「@page :first」と指定する。

改ページ

 IE8は改ページの指定を行う次の3つのプロパティをサポートした。このうち、page-break-beforeとpage-break-afterは古いIEも対応していたが、機能する値は「auto」と「always」の2つだけだった。IE8ではCSS 2.1で定義されたすべての値を利用できるようになっている。

改ページの指定を行うプロパティ
プロパティ機能指定できる値
page-break-before要素の前の改ページを指定auto、always、avoid、left、right
page-break-after要素の後の改ページを指定auto、always、avoid、left、right
page-break-inside要素内の改ページを指定auto、avoid

 たとえば、次のサンプルのように「page-break-inside:avoid」と指定すると、

でマークアップした段落の途中に改ページを入れないようにすることができる。

段落の途中に改ページが入る場合(ページの末尾に段落の最初の2行が表示される)(画像をクリックすると拡大します) 段落の途中に改ページが入る場合(ページの末尾に段落の最初の2行が表示される)(画像をクリックすると拡大します)
段落の途中に改ページが入らない場合(段落単位で改ページされ、ページの末尾に2行だけ表示されるといったことがなくなる)(画像をクリックすると拡大します) 段落の途中に改ページが入らない場合(段落単位で改ページされ、ページの末尾に2行だけ表示されるといったことがなくなる)(画像をクリックすると拡大します)
p{
page-break-inside: avoid;
}
ブラウザで表示を確認する

 また、IE8は改ページを許可する行数を細かく指定できるorphansとwindowsプロパティもサポートした。これらのプロパティについて詳しくは、また稿を改めて紹介したい。

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

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

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

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

本記事が今後の開発の参考になれば幸いです。
ではでは。
  • 新着記事
  • 特集
  • ブログ