CSSでページの印刷を指定する方法【初心者向け】現役エンジニアが解説
初心者向けにCSSでページの印刷を指定する方法について解説しています。印刷用のスタイルを当てたいという方は、覚えておくと良いでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回はページの印刷用のCSSを指定する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
【動画の解説はこちら】
田島メンター！！ページを印刷したとき用のスタイルを設定しておくことなんかは可能ですか〜？
可能だよ。そういうときは、メディアタイプを指定してみよう。
メディアタイプというのは何ですか〜？
あらかじめページを表示する媒体ごとに、適用するスタイルを決めておくことができる機能だよ。どのように書くか見てみよう。
印刷時に適用されるCSSの書き方
印刷時に適用されるCSSは、メディアタイプというものを設定しておくと反映されます。
CSSメディアタイプにはいくつか種類があり、よく利用するものを以下にピックアップしました。
- screen（ディスプレイ）
- print（プリンタ）
- tv（テレビ）
- projection（プロジェクター）
- all（すべて）
今回は「print」を使用して、印刷用ページを作っていきましょう。
メディアタイプの基本的な書き方は、以下の通りです。
HTMLで印刷時のみCSSファイルを適用する書き方
<link rel="stylesheet" type="text/css" href="sample_print.css" media="print">これは普段よく見かける<link>を使っています。
中に設定してある「media=”print”」によって印刷時にのみCSSが適用されます。
このやり方だと、通常のWebページと、印刷用のWebページの2種類のCSSを記述する必要があります。
1種類のCSSでまとめるときは、以下のコードをCSS内に記述しましょう。
CSSファイル内で印刷時のみCSSを適用する書き方
@media print{
/*printで適用する内容*/
}「@media」を指定することで、媒体によってCSSを適用するかどうかの境目（ブレークポイント）を作成します。
「@media print」と指定することで、ページを印刷したときに「@media print」内のCSSが適用されます。
今回はブラウザ表示用と印刷用の2種類のCSSを書く方法で試してみましょう。
メディアタイプを”print”にした部分に、印刷時に適用したいCSSを書いていくんだ。
ひとつのCSSファイルに、複数の媒体のCSSをまとめておくこともできるんですね。
実際にディスプレイのブラウザ表示時と印刷時のスタイルを設定して、ブラウザと印刷プレビューでどのように見えるか比べてみるよ。
実際に書いてみよう
実際にコードを書いてみましょう。
HTML
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>CSS 印刷方法</title>
<link rel="stylesheet" type="text/css" href="sample_print.css" media="print">
<link rel="stylesheet" type="text/css" href="sample_screen.css" media="screen">
</head>
<body>
<h1>Sample</h1>
<p>印刷ページなら文字が見えます。</p>
</body>
</html>sample_print.css
p{
color: #000000;
}sample_screen.css
p{
color: #ffffff;
}
以下、ブラウザでの表示を確認してみましょう。
本文が消えているページが出てきたと思います。
メディアタイプの「screen」であるため、ブラウザで表示した場合、「screen」のCSSが適用されます。
「screen」のCSSでは、文字色を白に指定してあるために、本文が見えません。
次に印刷をしてみましょう。
印刷プレビューを立ち上げます。
ちゃんと本文が見えるようになりました。
変わらないという方がいれば、設定で「背景のグラフィック」のボタンを押してください。
これは、通常のメディアタイプ「print」より「print」のCSSが適用されている画面です。
以上、2種類のCSSを用いて、メディアタイプごとに適用するCSSを変更しました。
他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。
| 執筆してくれたメンター
メンターSSさん 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。 |
それぞれの画面を見てみよう。どうなっているかな？
ブラウザでは”screen”で示した内容、印刷プレビューでは”print”で示した内容が反映されているのが分かりますね。
メディアタイプを使うと印刷時だけでなくさまざまな媒体に対応することができるよ。必要に応じて使っていこう。
他のメディアについても調べてみます。ありがとうございました！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
