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

印刷時専用のスタイルシートを作る(2ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

画面表示用と印刷用とでスタイルを分ける例

それでは、実際に「画面表示用スタイル」と「印刷専用スタイル」を分けた例をご紹介致しましょう。

この枠内で強調している箇所は、画面表示と印刷で異なるデザインが施されています。 画面表示だと色で強調、印刷だと下線で強調されています! 印刷の確認は、ブラウザの「印刷プレビュー」機能を使って下さい。

▲上記の枠内には、数カ所に strong 要素を使った強調箇所があります。 それらには、画面表示用としては、文字色(赤色)と文字の背景色(淡い黄色)を加えるスタイルを記述してあります。 印刷用としては、黒色の二重下線を引くスタイルを記述してあります。
※前のページに掲載したサンプルスタイルシートのソースをそのまま使っています。

印刷された結果どうなるかは、わざわざ印刷しなくても、ブラウザの「印刷プレビュー」機能を使うと見ることができます。 印刷プレビューだと、色は付加されず、代わりに下線が引かれていることが分かるはずです。

このように、非常に簡単に、画面表示用と印刷用のデザインを分けることができます。 わざわざ、印刷専用ページを用意する必要はありません

スタイルシートで使えるメディアタイプ

ここでは、画面表示用(screen)と印刷用(print)のメディアタイプだけをご紹介致しましたが、 スタイルシートには、他にも合計10種類のメディアタイプが用意されています。

screen コンピュータの画面
print 印刷
aural 音声
handheld 携帯端末
projection プロジェクタ
tty 文字が固定幅の機器
tv テレビ
braille 点字ディスプレイ
embossed 点字プリンタ
all 上記すべて

おわりに

今回は、スタイルシートを使って、画面表示用と印刷用のデザインを分ける方法をご紹介致しました。

この方法を使えば、印刷専用ページを作らなくても、印刷に適したデザインを印刷時にのみ適用させることができるようになります。
印刷されることも考慮したい場合は、ぜひご活用下さい。

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
【編集部からのお知らせ】
・「20代男性俳優」について、アンケート(2024/5/31まで)を実施中です!(目安所要時間5分)

※抽選で30名にAmazonギフト券1000円分プレゼント
※回答上限に達し次第、予定より早く回答を締め切る場合があります
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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