EasyWork-SYStem

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

印刷用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

EasyWork-SYStem

 日々の煩雑な業務を簡便にすることを目的に、IT関連の機器導入などの設備構築から、業務システムのアプリケーション開発など、様々なIT業務サポートを請け負っております。


privacy policy

デル株式会社

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

プレミアムバンダイ