ホームページ作成/HTML・スタイルシート(CSS)の基礎

印刷時専用のスタイルシートを作る

凝ったデザインは、画面上では綺麗でも印刷には向いていないことがあります。印刷時にのみ適用される「印刷専用スタイル」を作れば、画面上のデザインとは別に、印刷に適したデザインで印刷させることができます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます