MW211 EXIT

devlog
CSS/印刷用レイアウト
2013年07月17日
CSSに「media="print"」を指定すると、印刷時用の専用レイアウトとなる。
┌──────────────────────────────────────┐
│<style type="text/css" media="all">                                         │
│</style>                                                                    │
├──────────────────────────────────────┤
│<style type="text/css" media="screen">                                      │
│</style>                                                                    │
├──────────────────────────────────────┤
│<style type="text/css" media="print">                                       │
│div.xyz {                                                                   │
│    display             :none;                                              │
│}                                                                           │
│</style>                                                                    │
└──────────────────────────────────────┘
上記のように「media="all"」とは別に「media="print"」を設ける形となる。
「media="all"」は共通向けCSSで、画面表示と印刷出力の両方に影響がある。
なお、「media="screen"」にすれば、画面表示専用となる。

画面表示上必要な、「xyz」領域を印字時に除外する例が上記となる。
「xyz」領域は他になんでもOKで、よく使うものとしては
「印刷ボタン」があるのではないだろうか。

「印刷ボタン」は画面に必要だが、印字には必要ないから、これを「display:none;」に
してしまえばよい。

なお、media属性の指定をしない場合の既定は「media="all"」であり、
「media="screen"」か「media="print"」の一方のみを指定して場合には
他方は定義なしと見なされ、HTML既定のレイアウトが適用される。
分類:CSS