印刷用CSS決定版はこれ
記事をシェアする

「いざホームページが完成！と思ったら、印刷するときに思い通りの画面じゃなかった！」といったことはありませんか？Webサイトは本来PCなどのディスプレイで出力することを目的としているので、印刷には不向きなものです。

今ではスマートフォンやタブレットなどの持ち歩く端末が普及したために、印刷の必要性が下がったとはいえ、ページによっては印刷したいというものもまだまだあります。そこで今回は印刷用のCSSをどのようにして作るのか、見ていきたいと思います。

印刷用CSSを作ろう

 

印刷用CSSの書き方（基本編）

まずは印刷用のCSSを用意します。CSSでは、出力する端末に応じてメディアタイプをかき分けることができます。例えば以下のような種類が存在します。

  • screen（スクリーン、ディスプレイ）
  • print（プリンタ）
  • tv（テレビ）
  • projection（プロジェクター）
  • all（上記の全て）

などなど

このうち今回使用するのは「print」というメディアタイプです。

書き方１）<link>要素による読み込み

HTML

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

通常のディスプレイ用のCSSとは別に「print.css」を用意して、読み込む方法です。「media=”print”」の指定により印刷時のみ適用されるようになります。また今回は「print.css」という名前にしていますが、実際には何でも構いません。Web管理者同士でわかる名前を付けるようにしましょう。

書き方２）@media printによる読み込み

CSS

@media print{

}

この｛｝の間に書いた内容が、印刷時に適用されます。この記述をどこに書くかというと、これまでディスプレイ用に記述していたCSSファイル内です。場所はどこでも構いませんが、わかりやすく最後に書くと良いでしょう。

なお、このCSSを読み込む際は、<link>タグのmedia属性は指定しないか、allに設定しておきましょう。

 

用紙サイズ「@page」について

CSSの機能の中には、用紙サイズを指定できるものがあります。次のように書くと、印刷サイズを指定できます。

CSS

@page { size: A4 } /* A4縦 */
@page { size: A4 landscape} /* A4横 */

またこれは、数値で指定することも可能です。

@page { size: 210mm 297mm } /* A4縦サイズ */

さらに@pageを用いて、マージンの指定もできます。Internet Explorerでレイアウトが崩れるという場合は、このように指定すると改善するケースがあります。

@page {
    size: A4;
	margin: 12.7mm 9.7mm;
}

 

背景について

背景の印刷については諸説ありますが、Chromeやfirefoxでは対応可能です。

CSS

@media print {
    body {
        -webkit-print-color-adjust: exact;
    }
    header {
        background-color: #fff!important;
    }
}

背景色についてはIEやEdgeでも印刷可能となりますが、背景画像については対応していないようです。

そこで私は背景画像については:before または :after の疑似要素に画像を読み込むということをしました。

CSS

@media print {
    li {
        position: relative;
    }
    li a:after {
        content: url(../images/sample.jpg);
        position: absolute;
        top: 0;
        left: 0;
    }
}

contentで要素として読み込むので、印刷画面にも表示されるようになります。このcontentを利用する際は、必ず :before か :after と一緒に使うようにしてください。またこれらの違いは、contentで追加した要素が前に来るか後に来るかということです。前後につくことになるので、位置を合わせるためにpositionで指定しています。

これですべて解決かと思いきや、解決できない問題が生じました。contentはとても便利なプロパティなのですが、これで追加した要素（画像）のサイズを変更することができないのです！

調べてみると、transformで変更できるという記事もあったのですが、なぜか私がやった時にはできませんでした。

 

全画面のスライド画像を印刷する

画像サイズを変更できないことで、どんなページが上手く印刷できなかったのか。もしかすると同じ問題に直面している方もいらっしゃるかもしれないので記録として残しておきます。

（前提条件）

  • トップページの全画面画像
  • フェード系のスライドで切り替え
  • どんな画面サイズにも対応できるよう背景として画像を読み込んでいる

 

HTML

<div class="box">

</div>
<div class="printImg">
    <img src="printImage.jpg" alt="印刷時に表示する画像">
</div>

CSS

.box {
    background: url(../images/printImage.jpg); /* 実際にはjQueryでスライダーを実装 */
}
.printImg {
    display: none;
}

@media print {
    .box {
        display: none;
    }
    .printImg {
        display: block;
        position: fixed;
        top:0;
        width: 100%;
    }
    .printImg img {
        display: inline-block;
        width: 100%;
        height: auto;
    }
}

contentは使わず、印刷したい画像はHTMLで読み込んでおきます。ディスプレイで表示する際は非表示にしておき、印刷時のみ表示させています。全画面とはいえ横長の画像なので、印刷時にはA4用紙の上部に画像全体が収まるようになっています。

 

以上です。お役に立てれば幸いです。


記事をシェアする

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA