今回は、サイトをA4サイズ1枚で印刷できるようにするためのCSSについて書き留めます。
@media print {
// 印刷したくない領域
.not_print_area {
display: none;
}
// 印刷したい領域
.print_area{
top:0 !IMPORTANT;
left:0 !IMPORTANT;
width:172mm !IMPORTANT;
height:251mm !IMPORTANT;
}
}
プログラム超初心者のための解説が、下記になります。
@media print { }
これは、CSS3の仕様の一つであるメディアクエリの記述です。
メディアクエリとは、
メディア クエリは、CSS スタイルに適用できるシンプルなフィルタです。メディア クエリを使用すると、デバイスの種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいてスタイルを容易に変更できるようになります。
『CSS メディア クエリを使用してレスポンシブにする』
記述方法は、下記となります。
@media メディアタイプ { 設定 }
今回は、レンダリングするデバイスをプリンタと指定していることが分かります。
対応ブラウザは、下記となります。
Firefox 3.5
Internet Explorer 9
Google Chrlme 14
Safari 3.2
Opera 11
!IMPORTANT
CSSでは原則として、よりタグに近いところで指定されたスタイルや、 より後から読み込まれたスタイルが優先されますが、 !importantというキーワードを指定すると、その値が最優先されます
『スタイルの優先順位－CSSの基本 - HTMLクイックリファレンス』
width:172mm !IMPORTANT;
height:251mm !IMPORTANT;
172mm; /* A4縦の幅 */
251mm; /* A4縦の高さ */
ここでは、メディアクエリを使用していますが、使用しないで記述するのも場合により有効かと思われます。
以上です。
【参考サイト】
『印刷時とりあえずA4 1枚に収めるための最小限のCSS』
『CSS3で使えるメディアクエリのタイプと特性の一覧 』
『印刷用のCSS3 Media Queries（メディアクエリ）@media print の使用サンプル』