EasyWork-SYStem

もっと簡単にしてよ!を叶えたい

印刷用CSS

 ウェブページを印刷することは、もうあまり無いかもしれません。それでも、印刷したいページもあることでしょう。そんな時に不必要な要素(メニューや広告など)まで印刷されるのは、ちょっとどころかだいぶプリンターのインクを無駄にしてしまうので、印刷用に適用されるCSSを組み込んでみました。

印刷用スタイルシートの適用方法

 印刷用のCSSファイルを用意します。最も簡単かもしれない方法は、現在利用しているCSSファイルを複製すると良いでしょう。基本的に既存のセレクターの内容を書き替えるだけで、追加しません。

<link rel="stylesheet" href="ドメインURL/print.css" media="print" />

 media=”print”で、印刷時にのみスタイルシートを適用させてます。

印刷用スタイルシートの記述

 print.cssの内容は以下の通りです。

.Groundwork {
    width: auto;
}



.Contents {
    display: none !important; 
}

 下地にしているセレクター(GroundWork)の幅に、width: auto;を設定しておくと、印刷の用紙幅に合わせてくれるようになります。

 それから、印刷する必要のない部分に使っているセレクター(.Contents)には、display: none !important;を設定することで、印刷されないようになります。このとき、!importantを設定することで強制的に適用されるようにすることが重要かと「important」だけに・・・。

広告まで印刷されたくない場合は

 Google Adsenseで自動広告を利用している場合、ページ内広告と、アンカー広告は、下のセレクターを非表示に設定すれば、印刷ページに出力されなくなるようです。

 ただし、利用規約で問題があった場合は、即座に該当CSSを除去してください。先方の仕様変更によって変わる要素ですので、ご自身の環境でその都度ご確認ください。

印刷用CSSの適用結果

 こんな感じで、このページもすっきりと印刷されるようになりました。

Print image
Print image

CSS Database GET HTML MSMM POST SQL SQLServer WordPress 印刷



デル株式会社

ウイルスバスター公式トレンドマイクロ・オンラインショップ

プレミアムバンダイ