CSSを使って印刷用画面を実装する方法

知っている方も多いと思いますが、地図サービスなどで見かける印刷用画面。
それを自分のホームページで実装する方法をご紹介します。

今回は、一般的であるCSSでの実装とします。

実装方法

HTMLのheadに以下のように2種類のCSSを追加します。

HTMLソース


上記の場合、上が画面表示用、下が印刷用のCSSとなります。
media=”print”は、印刷・印刷プレビュー時にのみ有効になるCSSです。

次に、printstyle.cssで印刷したい部分以外をdisplay: none;で非表示にしてしまいます。
メニュー、サイドバー、パンくずなどですね。
また、印刷時にきちんと収まるように幅などもここで調整してください。
なお、CSSは後に指定したものが採用されるので、screenより後にprintを読み込ませるようにしてください。

実装は基本的にこれで終わりです。
idやclassを使いこなせていれば、何の問題もなく実装できるかと思います。


おまけ

上では2種類のCSSを用意する方法をご紹介しましたが、1つのCSSでも実装可能です。
方法は簡単で、cssで@media print { }内に普段どおり記述してあげればOKです。
以下はサンプルコードです。

サンプル


逆に@media screenを指定したり、@media handheld(携帯デバイス)や@media braille(点字触覚フィードバックデバイス)などと指定してあげることもできます。

関連記事

no image

文字に影をつけるCSS

おそらく、ほとんどの方がホームページ上の文字に影がついているのをご覧になったことがあると思います。

記事を読む

no image

CSSでリストタグを横並びにする

通常、リストタグを利用すると、ブラウザ上では以下のように縦に並びます。 このリストをCSSで横並び

記事を読む

no image

画像やボタン、divなどのボックスに影をつけるCSS

先日、文字に影をつけるCSSをご紹介しましたが、今回は画像やボタン、divなどのボックスに影をつける

記事を読む

no image

【CSS】複数のclassでセレクタを指定する

CSSでHTMLを装飾する際、複数のclassを組み合わせて使用したい場面がでてきます。 今回は、

記事を読む

no image

CSSでテキストの選択色を変更する方法

ホームページ上のテキストを選択(ドラッグ)した時、大抵は以下のように背景が青くなりませんか?

記事を読む

no image

【CSS】idとclassの違い

CSS記述の際に用いられる「id」と「class」。 この2つの違い、ちゃんと理解していますか?

記事を読む

PAGE TOP ↑