印刷用のCSS3 Media Queries(メディアクエリ)@media print の使用サンプル

In: css

23 6月 2014

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]-->

コメント

Comment Form

About this blog

ここは、SE見習いである私ことdaceloが、日夜習得していくシステム関連の備忘録、phpやWordPressTipsのネタ、あるいはSEOやWebマーケティング関連の雑感を投稿するブログです。 平日は大体毎日投稿しています。土日は休業日です。

カテゴリー

カテゴリー

アーカイブ