CSSで印刷する要素を設定する

| コメント(0)
「ページを印刷するとき、この部分は印刷させたくない」ということがあると思います。
印刷する要素の制御は、CSSで簡単に実装できます。

@media print {
#header { display:none; }
#footer { display:none; }
}

上記のように @media print で囲んだスタイルは、印刷時のみに適用されます。
印刷用のスタイルシートを用意する方法もありますが、
そこまで大掛かりでない場合などに。

印刷対応で気になったものは、

・float:left/right
・overflow:hidden

など。

どうやら float で並べながら、overflow で回り込みを解除するような
縦長のレイアウトだと、上手く印刷できないことが多いようです。

この辺りのスタイルも、@media print で上書き・調整すると
綺麗に印刷できると思います。

コメントする

このブログ記事について

このページは、gravity-worksが2012年8月22日 10:34に書いたブログ記事です。

ひとつ前のブログ記事は「上下中央揃えでの落とし穴」です。

次のブログ記事は「スマホサイト向けの軽量reset.css」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。