【ホームページ作成】印刷時専用のスタイルシートを作る

印刷されることを考慮したページにするには？

凝ったデザインは、画面上で閲覧するには良くても、印刷には向いていないことがあります。 デザイン目的の画像が多かったり、背景色が多くてインクがもったいなかったり…。 印刷されることも考えつつ、画面上で見栄えの良いデザインを考えるというのは、なかなか大変です。

そこで、画面表示用とは別に、印刷専用のスタイルを用意してみましょう。 そうすることで、印刷用にシンプルなデザインを適用させることができます。

出力メディアタイプ別にスタイルを用意

スタイルシートでは、出力先に応じたスタイルを記述できる仕組みが用意されています。 例えば、以下のソースは、画面表示用スタイルと印刷用スタイルを別々に記述した例です。

/* 画面表示用 */
@media screen {
   strong {
      color: red;
      background-color: #ffffcc;
   }
}

/* 印刷用 */
@media print {
   strong {
      border-bottom: double 3px black;
   }
}

上記のソースは、強調を表す strong 要素を、画面表示用と印刷用に分けてデザインしています。 画面表示用では文字を赤色にして背景色を淡い黄色にしていますが、印刷用では色は変えずに二重線で下線を引いています。

こうすることで、画面上では色を変えることで強調を表現し、 印刷では（モノクロ印刷の可能性も考えて）下線で強調を表現することができます。

このように、スタイルシートでは「 @media 」という記述を用いて、出力メディアタイプ別にスタイルを記述することができます。

@media メディアタイプ名 {
   （通常通りスタイルをいくつでも記述）
}

実際の例と、メディアタイプリスト

それでは、次のページでは、実際に画面表示用と印刷用とスタイルを分けた例をご紹介致します。 また、スタイルシートで利用できるメディアタイプのリストもご紹介致します。

出力メディアに応じたスタイルを使った例は次のページで！ →