印刷用のCSS3 Media Queries(メディアクエリ)@media print の使用サンプル
CSS3の@mediaの指定を使うと、印刷用CSSもお手軽に設定することができます。
ヘッダ要素を非表示、コンテンツのwidth幅をMAXにするなど、数行加えておくだけでもユーザビリティは相当変わります。
スタイルシートの末尾にこんな漢字で追加します。CSSの優先順位のルールの影響は受けますので、全部に!important付けておけば間違いないです。
印刷用メディアクエリの例
@media print { /* All your print styles go here */ #header, #footer, #sidebar { display: none !important; } #contents {width:100% !important; } } |
@media printをサポートしているブラウザ
media queryはCSS3のテクニックなので、モダンブラウザでないと対応していません。
具体的には、以下のブラウザ以降の対応になります。
Firefox 3.5
Internet Explorer 9
Google Chrlme 14
Safari 3.2
Opera 11
レガシーなブラウザ向けに
上記よりも古いブラウザに対しても印刷用CSSを設定しなければいけない場合は、従来の方法を使います。
<link href="/print.css" rel="stylesheet" media="print" type="text/css" /> |
広告
上記指定をIE8以前に限定して適用したい場合は次のように記述します。
<!--[if lte IE 8]> <link rel="stylesheet" media="print" href="/print.css" type="text/css" /> <![endif]--> |