メインのスタイルシートに印刷用のスタイルシートを追加する方法 美川の山里暮らし

還暦を過ぎ、岡山県南西部の山間地で文明の利器を活用しながら田舎生活を満喫したいと思っています 日本蜜蜂の扇風行動の写真

メインのスタイルシートに印刷用のスタイルシートを追加する方法

Filed under: Home Page — タグ: , , , — daii @ 6:49 PM
2010年6月24日

普通は変更した部分だけを印刷用のスタイルシートファイルに追加指定します

普通、印刷用スタイルシートは、印刷用に変更した部分と、新たに追加した部分だけで作ります。私の場合の印刷用スタイルシートは次のようになっていました。

#content {max-width: 1500px; margin: 0; padding-left:20px;}
#menu {display: none;}
.np {display: none;}

一行目で横幅を広めにしておいて、印刷で横幅が自動的に調整(横幅は元々フレキシブル)されるようにします。また、左側に余白を広めに取ります。二行目でサイドバーの印刷をやめて、三行目で広告等を印刷しないようにします。印刷のプレビューをしてみてください。こんなに簡単な設定でもうまく印刷されるはずです。

メインのCSSファイルに印刷用のスタイルシートを追加記入する

スタイルシートファイルは印刷用を別にする必要があると今まで思っていましたが、印刷用に変更した部分と、新たに追加した部分だけを次のようにmedia=”all”で指定したメインのスタ イルシートファイルの最後に追加すれば良いことがわかりました。

この方法を見つけたのは、グーグルウェブマスターツールを見ていたら「Labs」の「サイトのパフォーマンス」に「ページの読み込み時間の短縮方法」で、CSSファイルをまとめなさいと書いてあったのがヒントになったからです。

この方法だとprint.cssファイルが不要で、CSSファイルがひとつで良いことになります。この為、ファイルの読み込みが速くなり、SEOにもユーザーにも良いし、とても簡単で管理が楽になります。

@media print {
#content {max-width:1500px;margin:0;padding-left:20px;}
#menu {display: none;}
.np {display: none;}
}
スポンサーリンク

コメントはまだありません

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

Powered by WordPress