2010年10月15日

印刷対応 その2

こんにちは、木田です。
今回は前回の記事でご紹介した「印刷対応」について実際に対応方法についてご紹介したいと思います。

実装方法


 ■グローバルナビなどのメイン部分以外が印刷出来なくてOKな場合

ざっくりと、印刷出来なくてもOKな部分を、 display:none; します。

例えば:
(cssサンプル)
/* 印刷に不要な要素を消す */
#headerNavi,
#globalNavi,
#subNavi,
#leftNavi {

display:none;

}
メイン部分以外の、印刷が不要な要素をdisplay:none;しています。

あとは微調整です。


 ■display:none しないで対応したい!場合

各ブラウザの印刷対応について、対応していきます。
避けては通れません。


IE系

・ページの横幅が、プレビュー時の横幅よりも大きい場合に、はみ出た部分にfloatが掛かっていると、表示が崩れてしまう場合がある
これは、左にあるものは、float:left。右にあるものは、float:rightで指定することで対応出来ます。
メインが左で、サブが右にあるのに、#mainも#subも、float:left にしている場合に、よく発生するので、正しく設定しましょう。

・用紙のサイズに合わせて縮小が使えない
bodyに、zoomを指定します。
これには、IE6用にhackを使います。
でないと、IE7でもIE8でも適用されてしまうので。
普段hackを使うことはほとんどありませんが、印刷対応時のみ特別に使用します。

例えば:
(cssサンプル)
body {

_zoom:0.75;

}
zoomの値は、適宜変更します。


Firefox

・floatがclearされる前にページをまたぐと、それ以降のページが正しく印刷出来なくなる
これは、floatを取ることで対応出来ます。が。それだと、メインもサブも関係なく、縦にずらっと並んでしまいます。 それを解消する為に、 display:table、display:table-cell を使用します。
display:table は、要素をtableとして処理します。
display:table-cell は、要素をtdとして処理します。まんまですね。

例えば、以下のような階層構造のHTMLだった場合
html階層
#container
#header
#contents

#main
#sub

#footer
印刷用のCSSでは、以下のように記述します。
(cssサンプル)
#contents {

_display:table;

}

#main {

display:table-cell;
float:none;
vertical-align:top;

}

#sub {

display:table-cell;
float:none;
vertical-align:top;

}
vertical-align:top; は、テーブルを思い出してもらいたいのですが、td ってデフォルトだと、左寄せの上下中央揃えになります。
vertical-alignを指定しないと、上下中央揃えになってしまって、表示がズレてしまいます。
そのための指定です。

※注意点
  • ・メインとサブの間に空白があるのであれば、それは padding で指定すること
  • ・display:table-cell; を指定する要素と同列要素に、display:table-cell; 以外の要素があってはならない

さて、これでOKかと言いますと、そんなことはないのです・・・。
なぜならば、IE6、IE7で display:table; display:table-cell; が使えないのです・・・。
ということで、両方に対応しましょう・・・

全ブラウザ対応(Chrome, Safari除く)
今までご紹介した印刷対応を組み合わせていきましょう。

Firefoxの例と同じ構成の場合:
html階層
#container
#header
#contents

#main
#sub

#footer
印刷用のCSSに、Firefox用の記述をします。これは前述のものと同じです。
(cssサンプル)
#contents {

_display:table;

}

#main {

display:table-cell;
float:none;
vertical-align:top;

}

#sub {

display:table-cell;
float:none;
vertical-align:top;

}
それに、IE6、7用の記述を追記します。
(cssサンプル)
body {

__zoom:0.75;

} #contents {

_display:table;

}

#main {

display:table-cell;
float:none;
/float:left;
vertical-align:top;

}

#sub {

display:table-cell;
float:none;
/float:right;
vertical-align:top;

}
bodyの記述と、「/float:〜」が追加されました。
「/float:〜」はIE6、7用のhackです。
これで、IE6、7の場合は、floatがnoneではなくなります。

以上の対応で、見れるレベルになったのではないでしょうか。

より良くする為には更に対応が必要ですが、それは次回ご紹介しようと思います。
posted by baba at 20:26 | Comment(0) | TrackBack(0) | テクニック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。