印刷用のCSSを設定する

通常のディスプレイ用とは別に、印刷用のスタイルシートを設定する方法について解説します。

この記事のポイント

通常のブラウ向けのCSSと印刷向けのCSSは分けて適用することができる
印刷用のCSSを適用したいときはCSSを読み込むlink要素のmedia属性にprintを指定する

ディスプレイと印刷用のCSSを分ける

CSSはメディアクエリを使って用途別に切り替えることができます。

HTML コード例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>印刷用のCSSを設定する</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" media="screen">
<link rel="stylesheet" href="css/print.css" media="print">
</head>
<body>
<header><img src="./images/logo.png" alt="GRAY CODE"></header>
<section>
  <h2>ディスプレイと印刷のCSSを切り替える</h2>
  <p>メディアクエリを使うと、CSSを表示する端末の種類によって切り替えることができます。</p>
</section>
</body>
</html>

media属性について、ディスプレイ用は「screen」、プリンター用には「print」を指定すると、ディスプレイ表示の時は「sytle.css」、印刷する時には「print.css」が適用されるようになります。

ディスプレイ用のCSS

ラップトップなどのパソコン、スマートフォン、タブレットなどの画面で表示する端末全てが該当します。

画面サイズが端末によってバラバラなため、解像度や表示幅でCSSを切り替えるようにして、どの端末でも最適化して表示するマルチデバイス対応（レスポンシブ対応）が一般的になりました。
最近は「メディアクエリ」と言えば、こちらのレスポンシブ対応を指すことの方が多いです。

style.css

body {
  font-size: 100%;
  background: #f7f7f7;
}

header {
  text-align: center;
}
  header img {
    width: 150px;
  }

h2 {
  position: relative;
  margin-bottom: 30px;
  font-size: 129%;
  font-weight: normal;
  color: #333;
}
h2:after {
  position: absolute;
  left: 0;
  bottom: -8px;
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  background-image: linear-gradient( to right, #30cbe8, #5058d2);
}

section {
  margin: 20px auto;
  padding: 20px;
  width: 460px;
  border-radius: 20px;
  border: 2px solid #ccc;
}

p {
  line-height: 1.6em;
}

ディスプレイでの表示例

印刷用のCSS

印刷用のCSSでは使えるプロパティに限りがあります。
例えば、上記「style.css」にあったbackgroundプロパティの「linear-gradient関数は印刷時に使うことができません。

このように印刷用のCSSでは制約があるため、グラデーションをベタ塗りに置き換えるなどシンプルな表示に整えることが多いです。

print.css

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  -webkit-print-color-adjust: exact;
}

header {
  text-align: center;
}
  header img {
    width: 150px;
  }

section {
  margin: 0 auto;
  padding: 20px 4%;
  width: 90%;
  border-radius: 10px;
  border: 2px solid #95c2ff;
  background-color: #ccc !important;
}

h2 {
  position: relative;
  margin-bottom: 30px;
  font-size: 129%;
  font-weight: bold;
  color: #00357d;
}
h2:after {
  position: absolute;
  left: 0;
  bottom: -15px;
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  border-bottom: 2px solid #00357d;
}

p {
  font-size: 100%;
  line-height: 1.6em;
}

印刷の表示例

メディアクエリについてより詳しくは、「メディアクエリについて」をご覧ください。