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

• .google-auto-placed
• .adsbygoogle

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

印刷用CSSの適用結果

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

• 技術手帳
• ＣＳＳ