【徹底解説！】CSSで印刷用のスタイルシートを作成しよう！

こんにちは、chieitoです！最近「色彩」についての勉強を始めました。色彩はデザインだけでなく、メイクやファッションなどにも役立つのでおすすめです。

では本題ですが、「印刷用のCSS」って聞いたことがありますか？Webサイトを作成するにあたり、この印刷用のCSSシートはとても重要になってきます。ユーザーにとって便利で見やすいWebサイトにするために、CSSを使った印刷用スタイルシートを作成しましょう。

ここでは、その具体的なやり方などを徹底解説します。ぜひ参考にしてみてださいね！

1 CSSの印刷用スタイルシートって？
2 CSSで印刷用に対応していないとどうなる？
3 CSSで印刷用スタイルシートを作成しよう！
4 印刷用CSSの反映を確認する方法は？
5 まとめ

CSSの印刷用スタイルシートって？

Webサイトを作成する際、CSSを使って文字色やサイズなどのデザイン部分を構成していきますよね。このCSSは、パソコンやスマホなどのスクリーンだけでなく、テレビや印刷、プロジェクターなど様々な媒体に対応させることが可能です。そのため、まずはどの属性のCSSなのかを設定しなければなりません。

CSSのメディアタイプには、

screen（パソコンなどのディスプレイ）
print（印刷）
projection（プロジェクター）
tv（テレビ）
braille（点字ディスプレイ）
all（全て）

などがあります。

今回はCSSの印刷用スタイルシートを作成するので、media属性の「print」を選びます！

CSSで印刷用に対応していないとどうなる？

必ずしも印刷用のCSSスタイルシートを作成しなければならないというわけではありません。

例えば、

メニューバーや戻るボタン
ヘッダー画像
リンクURL

など。

これらはWebサイト上ではクリックできるので便利ですが、印刷した際は不要です。このような箇所を、印刷用CSSで表示させないようにするなどデザインしていくと、とても見やすくなります。

難しい作業ではないので、スクリーン属性のCSSと一緒に印刷用のCSSも作成しましょう！

CSSで印刷用スタイルシートを作成しよう！

ではここで、実際に印刷用CSSのコード記述方法など詳しいやり方をご説明します。

印刷用CSSのメディアタイプを設定

前述したように、まず最初にCSSのメディアタイプを設定します。ここでは印刷用CSSを作成するので、media属性「print」です。

<link href="ファイル名.css" rel="stylesheet" type="text/css" media="screen">
<link href="ファイル名.css" rel="stylesheet" type="text/css" media="print">

1 2	<link href="ファイル名.css" rel="stylesheet" type="text/css" media="screen"> <link href="ファイル名.css" rel="stylesheet" type="text/css" media="print">

上段はパソコンディスプレイ用のCSS、下段が印刷用のCSSです。このコードを、<link>要素を使ってHTML内に記述していきます。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<link href="CSS.css" rel="stylesheet" type="text/css" media="screen">
<link href="printCSS.css" rel="stylesheet" type="text/css" media="print">
</head>
<body>
<h1>サンプルWebサイト</h1>
<h2>印刷用CSSについて</h2>
<p>CSSで印刷に対応させる方法</p>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

<h1>サンプルWebサイト</h1>

<h2>印刷用CSSについて</h2>

<p>CSSで印刷に対応させる方法</p>

</body>

</html>

このようにコードを記述すると、

まだCSSを作成していないのでシンプルな表示になります。

２つ目の方法として、１つのCSSシートを使って全ての属性に対応させたい場合は、

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

1	<link href="CSS.css" rel="stylesheet" type="text/css" media="all">

media属性を「all」にしておきましょう。

印刷用CSSシートを読み込ませる方法

①media属性「print」を指定した場合

印刷用CSSのスタイルシートを用意しHTML内にmedia属性を記入したら、早速コードを記述していきます。

印刷用とスクリーン用のCSSはそれぞれ別のスタイルシートが必要です。同じシート内に記述しないように気をつけましょう！

②media属性「all」を指定した場合

全てのメディアタイプに対応するようにした場合は、

@media print{
   印刷用CSSで適用させる定義を記述
}

@media print{

印刷用CSSで適用させる定義を記述

}

このように「@media print」を使って１つのCSS内に記述していきます。「print」の部分を変更すれば、様々な属性に対応させることが可能です。

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

1	<link href="CSS.css" rel="stylesheet" type="text/css" media="screen,print">

複数の属性を指定する場合、「all」でもOKですが、上記のようにメディアタイプを（,）で区切って記述することも可能です。

CSSに印刷用のコードを記述する方法

CSSの記述方法は、どの属性も同じです。印刷用だけ特別な記述があるというわけではありません！

例えば、

このようなサイトで、CSS（screen属性）を使って<h1>部分の文字色を水色に変更する場合は、下記のような記述をします。

h1{color: aqua;}

1	h1{color: aqua;}

続いて印刷した際には文字色を青に、「印刷用CSSについて」という<h2>部分を印字させたくない場合は、CSS（print属性）に下記のような記述をします。

h1{color: blue;}
h2{display: none;}

1 2	h1{color: blue;} h2{display: none;}

上記はそれぞれのCSSシートを用意した時の方法です。ごちゃごちゃしてわからなくなりそう…という人は、このようにそれぞれのCSSシートを用意することをおすすめします。

同じCSSシートに記述する場合は、

@media screen{
h1{color: aqua;}
}
@media print{
h1{color: brown;}
}
@media print{
h2{display: none;}
}

@media screen{

h1{color: aqua;}

}

@media print{

h1{color: brown;}

}

@media print{

h2{display: none;}

}

このように記述します。

ここでは、印刷した時に文字色をブラウンにし、<h2>要素が印字されないように記述しました。

コードを記述する際には、最後に「;」を忘れず、また「:」と「;」が逆になったりごちゃごちゃにならないように気をつけましょう！

印刷用CSSの反映を確認する方法は？

印刷される時に、本当に印刷用CSSが適用されているか気になりますよね。またWebサイトを作成するにあたって、印刷した場合の見え方もしっかりと確認しなければなりません。細部まで見落とさずにチェックしましょう！

印刷用のCSSを作成したら、ブラウザでプレビューを表示させます。スクリーン用のCSSが問題なく反映されているのを確認したら、[ファイル]→[印刷]でプレビューを表示してみて下さい。

ここのプレビューできちんと反映されていればOKです！

このようにプレビューを見ながら、微調整をしていきましょう。不要な部分を非表示にしたり、バランスが悪ければ印刷用のフォントサイズを変更してみて下さい。見やすくするために背景色をつけるのも良いですね！

まとめ

いかがでしたでしょうか！Webサイトを作っている中で、印刷する際の反映のされ方などはついつい忘れてしまいがちです。印刷用のCSSシートが必要ということを知らなかったという人も意外と多いのではないかと思います。

ブラウザで見ているWebサイトは、印刷すると少々見にくくなったりバランスが悪くなってしまうことも珍しくありません。せっかくWebサイトを作成するのであれば、印刷の仕上がりにもこだわりたいですよね！

ユーザーにとって便利で、尚且つ製作者自身も納得のいくようなWebサイトにしましょう。参考になれば嬉しいです！

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。