MW211 EXIT

devlog
CSS/印刷用CSS
2014年05月05日
「@media print {}」で囲った中で定義してあげると、印刷時のみ有効となるCSSになる。
┌──────────────────────────────────────┐
│@media print {                                                              │
│    div#header {                                                            │
│        display             :none;                                          │
│    }                                                                       │
│    div#main {                                                              │
│        top                 :0;                                             │
│    }                                                                       │
│    .noprint {                                                              │
│        display             :none !important;                               │
│    }                                                                       │
│    div#print {                                                             │
│        display             :block;                                         │
│    }                                                                       │
│}                                                                           │
└──────────────────────────────────────┘
直接その要素を(印刷時だけ)変更する方法をとる場合には、
そのセレクタを指定して定義すればよい.
上記でいえばヘッダ(div#header)を非印刷にして、
本体(div#main)をその分繰り上げている。(「position:absolute;」の場合)

また、印刷専用クラス(.noprint)を仕込んでおき、
印刷時だけ活躍させる手もある。(「!important」を付けて優先度を高めた方が安全)

非印刷とは逆に、印刷専門項目(div#print)について非表示で隠しておき、
印刷の時だけ出力させるという手法もとれる。


なお、「@media print {}」については外部ファイル指定の代替案もあり。
分類:CSS