私のパソコン雑記帖
Style Sheet を Screen と Print で使い分ける
カテゴリー： HTML
20Feb2010
例えば左側にナビゲーションがある場合、ナビゲーションを印刷対象から外し右側のコンテンツだけ印刷したい事があります。スタイルシートを使い分けることによってそれが可能になります。
基本
ページの構成を下図のように想定します。
次に、screen 用の style.css と print 用の style1.css を準備します。
<link href="(path)/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="(path)/style1.css" rel="stylesheet" type="text/css" media="print" />
とした上で、クラス名 "dummy" と、クラス名 "navi" のスタイルを、
- print 用 (style1.css) では {display:none;} とします。
- screen 用 (style.css) では {display:none;} 以外に適宜設定します（クラス名 "dummy" は何も設定する必要がありません）。
補足1
上記 "dummy" と "navi" に限れば media="screen" で構いませんが、実際はメインのスタイル設定で印刷時にも適用したいのがありますから、 media="all" とするのがより一般的です。
当サイトはメインのスタイルシートを media="all" としています。print 用のスタイルシートではナビゲーション部を非表示にしています。
補足2
上に図示したようなページ構成にすることにより、読み上げソフトでの読み上げ順序は次のようになります。
タイトル等 ⇒ コンテンツ ⇒ ナビゲーション ⇒ Copyright等
つまりアクセシビリティーへの配慮から、意図的にナビゲーションの読み上げ順序を下げています。ナビゲーションはページ毎に繰り返して読み上げられると冗長になります。コンテンツの後に持ってくることにより、スキップが容易になります。