CSSでページの印刷を指定する方法【初心者向け】
初心者向けにCSSでページの印刷を指定する方法について解説しています。印刷用のスタイルを当てたいという方は、覚えておくと良いでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
今回はCSSでページの印刷方法を指定する方法について紹介します。
コーディングしたものを印刷する機会がある人は、ぜひ使い方を覚えておきましょう。
そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
田島メンター！！ページを印刷したとき用のスタイルを設定しておくことなんかは可能ですか〜？
そういうときは、メディアタイプを指定してみよう。
メディアタイプというのは何ですか〜？
あらかじめ媒体によって適用するスタイルを決めておくことができる機能だよ。どのように書くか見てみよう。
目次
印刷時に適用されるCSSの書き方
印刷時に適用されるCSSはメディアタイプというものを設定しておくと反映されます。
CSSメディアタイプは以下の種類があります。
- screen（ディスプレイ）
- print（プリンタ）
- tv（テレビ）
- projection（プロジェクター）
- all（すべて）
他にもありますが、今回は「print」を使用して、印刷用ページを作っていきましょう。
メディアタイプの主な書き方ですが、以下を参考にしてください。
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サンプルコード2
@media print{
/*printで適用する内容*/
}
これはメディアタイプによってブレークポイントを作成します。これによって、「@media print」の時、内部のCSSが適用されます。
今回は印刷用ページなので、2種類のCSSを書く方法で試してみましょう。
メディアタイプを”print”にした部分に、印刷時に適用したい内容を書いていくんだ。
ひとつのCSSファイルに、複数の媒体の内容をまとめておくこともできるんですね。
実際にディスプレイ時と印刷時のスタイルを設定して、ブラウザと印刷プレビューでどのように見えるか比べてみるよ。
[PR] HTML/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>
CSS1 sample_print.css
p{
color: #000000;
}
CSS2 sample_screen.css
p{
color: #ffffff;
}
以下、ブラウザでの表示を確認してみましょう。
本文が消えているページが出てきたと思います。
メディアタイプの「screen」であるために「screen」のCSSが適用され、文字色が白にしてあるために、本文が見えません。
次に印刷をしてみましょう。印刷プレビューを立ち上げます。
ちゃんと本文が見えるようになっていると思います。
変わらないという方がいれば設定で、「背景も含めて印刷」のボタンを押してください。これはメディアタイプ「print」より「print」のCSSが適用されている画面です。
それぞれの画面を見てみよう。どうなっているかな？
ブラウザでは”screen”で示した内容、印刷プレビューでは”print”で示した内容が反映されているのが分かりますね。
メディアタイプを使うと印刷時だけでなくさまざまな媒体に対応することができるよ。必要に応じて使っていこう。
他のメディアについても調べてみます。ありがとうございました！
以上、2種類のCSSを用いて、メディアタイプごとに適用するCSSを変更しました。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
