スタイルシート(CSS)でホームページの印刷を設定
スタイルシート(CSS)でホームページ(HP)の印刷を設定する方法について説明しています。外部スタイルシート(CSS)でページを印刷する時のコツなどを実例で解説しました。広告など不要な部分は印刷しないようになっています。
ホームページの印刷は特に何も指定しなくても印刷ができることから、何の設定もしていない人が多いのではないでしょうか。私はホームページ内に広告が多くあるので、普通にホームページを印刷すると不要な部分まで印刷されてしまいます。紙が無駄になるし、インクも無駄になります。見栄えも良くありません。
そこで印刷用のスタイルシートを簡単に作りましたのでその方法と注意する点を紹介します。 印刷楽天 のプレビューでこのページを見てください。ちゃんとなっているはずです。
外部スタイルシートによるホームページの表示や印刷
ホームページのページ数が少ない間は、個々のページのデザインや表示をファイルの中で個別に指定してもよいでしょうが、ページ数が200~300以上にもなってくるとその管理が大変になってきます。
そのようなことを防止するには、ホームページの作成の早い段階からホームページのデザインや表示や印刷は外部スタイルシートCSS(Cascading Style Sheets カスケーディング・スタイルシート)で記述することをお勧めします。
印刷用外部スタイルシート(CSS)の書き方
印刷用外部スタイルシートの読み込み方法は次のようにヘッドタグ<HEAD></HEAD>の中に記述します。
<LINK rel="stylesheet" href="style.css" type="text/css" media="all"> <LINK rel="stylesheet" href="http://***.jp/print.css" type="text/css" media="print">
style.css というスタイルシートのファイルがHTMLファイルと同じフォルダ(ディレクトリー)にあるときは上のように指定します。ファイル名は拡張子がCSSであれば別の物でもかまいません。
上の行が普通のホームページの表示用のスタイルシートです。media="all"と指定します。下の行が印刷用のスタイルシートです。media="print"と指定します。この順番を間違えると表示がうまくいかないことがあります。
ホームページビルダーでは、スタイルシートは相対パスで書かないとうまく表示されないので上の行は相対パスで書いています。
印刷用のスタイルシートを相対パスで書くと、ホームページビルダー上では、印刷用のスタイルシートがホームページの表示に影響するようです。(ホームページビルダーのバグと思われます。)ホームページビルダーでちゃんと表示させる為に、印刷用のスタイルシートはhttpからの絶対パスで書きます。
このページの最後に記述してあるようにメインのスタイルシートに印刷用のスタイルシートを追加する方法もあります。ホームページビルダーでも問題ないようです。私はこの方法をお勧めします。
印刷用外部スタイルシート(CSS)の内容
ホームページで使っている表示用のスタイルシートの一部だけを変更して、印刷用のスタイルシートを作成します。私は広告の非表示とメニューの非表示だけを設定しました。
私の作っているホームページの画面の幅は画面サイズに合わせて変化するので、印刷用もそのままでかまいません。同じく文字の大きさも標準に設定してあり、ユーザーが変えられるので、そのままでかまいません。背景の色は通常は印刷されないので、そのままでもかまいません。
表示用のスタイルシートで max-width を設定していると、印刷で縮小すると右側に余白ができてしまいます。その為、印刷用のスタイルシートには max-width に十分大きな値を設定します。私の場合は1500ピクセルに設定しました。
左の広告の部分を消す方法はスタイルシートで、右のメイン部分のマージンを無くしてやります。また左のサイド部分の表示を消します。
position: absolute で表示位置を指定しているものは position: relative に変更するか、削除します。そうしないと印刷した時にブラウザによってはフリーズすることがあります。
#main {max-width: 1500px; margin: 0; padding-left:20px;}
#side {display: none;}
右側の広告やメニューを消すには次のように広告やメニューの前後をDIVタグで囲んでそれにクラス(class)を適用します。
<div class="np"> 広告のタグ </div>
印刷用スタイルシート(print.css)には次のように class np を追加します。
.np {display: none}
外部スタイルシート(CSS)の簡単な説明
上の「.np」「ドット+np」は class="np" で指定する場合の記述方法です。このclassというのは、そのページで何度でも使うことができます。
またスタイルシート内にコメントを記述する場合は、 /* コメント */ のように、記述します。
スタイルシートの詳しい使い方は http://www.tohoho-web.com/ 「とほほのWWW入門」にあります。
変更した部分だけを印刷用のスタイルシートにします
スタイルシートは印刷用を全く別に作る必要があると今まで思っていましたが、印刷用に変更した部分と、新たに追加した部分だけで作れば良いことがわかりました。
私の場合は、印刷用のスタイルシートは最終的に次のようになりました。これだと簡単で管理がとても楽です。
#main {max-width: 1500px; margin: 0; padding-left:20px;}
#side {display: none;}
.np {display: none;}
メインのスタイルシートに印刷用のスタイルシートを追加する方法
スタイルシートは印刷用ファイルを別にする必要があると今まで思っていましたが、印刷用に変更した部分と、新たに追加した部分だけを次のようにメインのスタイルシートファイルの最後に追加すれば良いことがわかりました。
この方法だとprint.cssが不要で、ファイルがひとつで良いことになります。この為、ファイルの読み込みが速くなり、SEOにもユーザーにも良いし、とても簡単で管理が楽になります。
@media print {
#main {max-width:1500px;margin:0;padding-left:20px;}
#side {display: none;}
.np {display: none;}
}