CSSで擬似フレームを作る／印刷する

IT memo

「擬似フレーム（疑似フレーム）」の作り方（IE6 にも対応、スタイルシート(CSS)、JavaScript使用）

　擬似フレームを利用し、印刷に特に配慮しない場合、 おおよそ画面通りのイメージで、スクロールバーまで含めて印刷されます。 そして、表示範囲に収まっていない部分は印刷されません。 対策は割に簡単で、印刷用のスタイルシートを作成することで出来ます。

　まず、印刷用のスタイルシートを作ります。 一つのスタイルシートで画面用と印刷用の両方の記述を行うことも出来るのですが、 今回は２つに分けました。 まず、両方のスタイルシートを読み込むためのタグを 〜 に記述します。


　次に、メニュー部分を印刷から消します。
メニューは、画面上でサイト内をアクセスするときには便利ですが、 印刷してしまったら利用価値はなく、紙が無駄になってしまいますし、 デザイン上もページ本文とは異質のものですので、すっきりさせるために削除することにしました。

#header,#lt{
display: none;
}

.sitemap {
display: none;
}

　そして、一番大切なのが、本文部分の設定です。
本文は、 JavaScript による位置の指定に影響されてしまわないようにする必要があります。 また、画面では枠内に入らずスクロールする部分も、全て印刷されなくてはいけません。 前者は、 position: static; で、 後者は、 overflow: visible; で対処できます。 このサイトでは、ページ内リンクは、印刷しても目次として役立つと考えたので、 "headmenu" の部分も印刷することにしました。

#headmenu, #main{
position: static;
width: auto;
height: auto;
overflow: visible;
}

これだけで、印刷してもきちんと読めるようになります。 なお、他のいくつかのタグについても、色などを適宜設定しても良いと思います。


ちなみに１つのスタイルシートでメディアの違うものを共存させるには
http://msugai.fc2web.com/web/CSS/media.html#media

@import と似たようなものに、 @media があります。これを用いると、一つのスタイルシートに、複数のメディアタイプに対する規則を記述することが出来ます。

@media print {

    /* 紙媒体向けスタイル定義 */

    body { font: 10pt serif }

  }

@media screen {

    /* コンピュータスクリーン向けスタイル定義 */

    body { font: 12pt sans-serif }

  }

@media screen, print {

    /* スクリーン及び紙媒体向けスタイルシート */

    body { line-height: 1.2 }

  }

では、このスタイルシート自体のメディアタイプはどうすればよいでしょう？上記の例では、 media="print, screen" とするのが適当でしょうが、一般には、 media="all" で結構です。