HOME

印刷用スタイル

メディアタイプの定義

W3Cによる定義（CSS 2.1仕様）
all：
すべてのデバイスに適合
braille：
点字の触感をフィードバックするデバイスが対象
embossed：
点字のページを出力するプリンタが対象
handheld：
ハンドヘルドデバイスが対象（一般的に小さな画面、限られた通信帯域）
print：
ページ単位で出力されたもの、および印刷プレビューモードで画面表示されるドキュメントが対象
projection：
投影プレゼンテーション（オーバーヘッドプロジェクタなど）が対象
screen：
主としてカラーのコンピュータ画面が対象
speech：
スピーチシンセサイザー（音声合成装置）が対象。CSS2にはauralという類似のメディアタイプがある。
tty：
固定ピッチの文字グリッドを使用するメディア（テレタイプ、端末、または表示機能の制限されたポータブルデバイスなど）が対象。ttyメディアタイプで作成する場合はピクセル単位を使用しない。
tv：
テレビタイプのデバイスが対象（低解像度、カラー、画面のスクロール性に制限、サウンドが利用可能）

※handheldなどについては、ブラウザ側の実装は十分ではないく、すべてのデバイスがここのメディアタイプをサポートしているとは限らない。

★メディアタイプを指定するときのデフォルト値はscreenであり、メディアタイプを指定しない場合のデフォルトはallと認識される。

方法A：media属性

<link rel="stylesheet" type="text/css" media="screen" href="screenstyles.css" />

複数のメディアタイプを割り当てる場合。media属性内の複数値はコンマで区切る。

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

方法B：@mediaまたは@import

<style type="text/css">
@import url("screenstyles.css") screen;
@media print {
/* 印刷用スタイルをここに記述 */
}
</style>

複数のメディアタイプを割り当てる場合。
複数のメディアタイプ値を指定することでscreenandprint.cssを画面と印刷の両方に割り当て、その後@mediaルールを使用してスタイルをprintメディアのみに適用する。

<style type="text/css">
@import url("screenandprint.css") screen, print;
@media print {
/* 印刷用スタイルをここに記述 */
}
</style>

★外部スタイルシートを参照するために@importルールを使用する場合は、それと一緒にメディアタイプを追加することができる。
また、@mediaルールにより、特定メディアタイプに固有のルールを選り分けることができる。方法Aと同様に、@mediaルールを使用してはっきりと印刷用にスタイルを割り当てる ★@importおよび@mediaルールは<head>セクションに置くことも、また、外部スタイルシートに配置して、<link>要素で参照することもできる。

▲このページのトップへ

画面と印刷スタイルの分離

<link>要素を使用して、サイト全体のマスタースタイル（styles.css）を参照する。styles.cssのコンテンツは単に外部スタイルシートを取り込む@importルールが1つあるだけであるが、これにより古いブラウザからこのルールを隠す。

ページの<head>内でstyles.cssにリンクさせる。

<link rel="stylesheet" type="text/css" href="/css/styles.css" />

印刷専用の別のスタイルシート（print.css）を作成し、この中に、ページを印刷するときだけに関連するルールを書き込む。

<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<link rel="stylesheet" type="text/css" href="/css/print.css" />

これらの各CSSファイルを対象メディアだけに使用するには、media属性を<link>要素に追加する。

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

styles.cssファイルにscreenを指定すると、styles.cssに含まれているスタイルをコンピュータ画面にのみ適用できる。同様に、media属性にprint値を指定することで、print.css内に含まれているスタイルをユーザがページを印刷するときにのみ適用できる。

▲このページのトップへ

印刷用スタイルシートの作成

ピクセル単位によるサイズ指定は適切ではない。
フォントサイズにはポイント値を使用する。
また、serifフォントにすると印刷がきれいで、読みやすい。日本語なら、明朝体がふさわしい。 

body {
	font-family: "Times New Roman", serif;
	font-size: 12pt;
	}

印刷するには不要なページ要素（ナビゲーションリンク、サイドバー、フォーム、広告など）を非表示にする。 

#nav, #sidebar, #advertising, #serch {
	display: none;
	}

モノクロ出力向けに色を変えたり、背景を無効化し、インクの節約と読みやすさを提供する。 <body>要素に背景画像やカラーを割り当てていたら、無効化する。 同様に、バックグラウンドを割り当てた要素を無効化する。 

body {
	background: none;
	}

リンクが設定されたテキストを通常のテキストと区別できるようにする。 白黒で印刷される場合のためにコントラストがはっきりするのが望ましい。 

a:link, a:visited {
	color: blue;
	text-decoration: underline;
	}
リンク先の出力

Mozilla、Safari、Netscape6以降、Mozilla Firefox、Opera6以降で対応。
InternetExplorerは非対応。
印刷時にリンクの設定されたテキストの後ろにリンク先のURLを出力させる。
:after擬似クラスを使用する。サポートしていないブラウザのユーザには、ハイパーリンクしたテキストだけが表示されるので、問題ない。 

#content a:link:after, #content a:visited:after {
	content: " (" attr(href) ") ";
	}

サイトの#contentセクション内にあるハイパーリンクにおいて、一組の丸括弧の間にURLを配置し、前後に半角スペースを付加してリンク先URLを表示するよう、ページの印刷バージョンに指定。

例：筆者のサイト（すべて製作中）
  1. ホームページビルダーを使った『Beautifuldays』
  2. エディターで作っている『美しき日々』
  3. XOOPS『美しき日々のはじまり』

このページの印刷プレビュー


クリックで大きくなります。

▲このページのトップへ