logo
 

Webページの印刷範囲をCSS(スタイルシート)で指定

ウェブページを印刷したら、ヘッダー、フッター、サイドバーなど余計なところが多く紙を無駄遣いしたということが、よくあります。そんなとき、印刷用のCSS(スタイルシート)を別に作っておき、プリンターには自動的に印刷用CSSのデータが送られるようにすると便利です。

1. 印刷用CSSを作成

ウェブサイトのCSSから印刷範囲に関わるスタイルだけコピー&ペーストして印刷用CSSを作成します。

ここでは、MODXのリソースで印刷用CSSを作成する場合を例示します。リソース名、エイリアスをprint.css(半角英数字.cssなら何でもOK)と設定していったん保存します。再度リソースを開き、ウェブサイトのCSSから印刷用CSSリソースの本文に印刷範囲に関わるスタイルだけコピー&ペーストします。

印刷用CSSの作成

印刷しない領域(以下、非印刷領域)のID、クラスに非表示属性 {display: none;} を追加します。

非印刷領域に特にIDもクラスもない場合は非印刷領域のクラスを作成します。上図では、最終行にある .non-printable が非印刷領域のクラスです。

2. テンプレートに印刷用CSSへのリンクを追加

テンプレートを開いて、<head></head>内に、印刷用CSS(print.css)へのリンクを記述します。

<link rel="stylesheet" type="text/css" href="print.css" media="print">

印刷用CSSへのリンク

必要に応じて非印刷領域用のクラスを設定します。

<div class="non-printable">
##########################
</div>
<table class="non-printable">
##########################
</table>

関連記事

MODXとは

 
RSS