固定CSSと標準CSSに分けたら印刷画面がずれる

質問

今までスタイルシートは一つだけしか使っておりませんでしたが、固定と優先にスタイルシートを分けてみました。

固定スタイルシートには、ヘッダー、サイドバー、フッターの部分を記述し、
優先スタイルシートには、ページごとに中身がちがう部分を記述しました。

これでページを閲覧すると、今まで通り表示されていたので、「よし、これから管理が楽になるぞ！」と思いました。しかし、この状態で印刷プレビューをすると、ヘッダーの部分は改行されるし、サイドバーは下に表示されておりました。

ちなみに、一つだけでスタイルシートを使っている時の印刷プレビューは、閲覧している時と、ほぼ同じように表示されておりました。

私としては、固定スタイルシートと優先スタイルシートに分けて、印刷プレビューも閲覧用と同じように表示されているなら、そのまま印刷用として使いたいと思っております。

なぜ、固定スタイルシートと優先スタイルシートに分けたら、閲覧用の表示はきちんとされているのに、印刷プレビューの表示だけおかしくなってしまったのでしょうか？

回答No.1

ORUKA1951 · ベストアンサー

各ページで共通な部分は固定スタイルシートに記述し、それぞれのページに優先スタイルシートを使用するという方法。もちろんそのような使い方も出来ます。
　ただ、印刷用はcsreenと分けたほうが良いです。なぜなら、様々な面でscreenとprintは異なるからです。
media=printでは、
・fixedされたものは各ページに印刷される。
・サイズはpxをmmなりのサイズに換算される。
など・・

　もし固定スタイルシートを置き、それをすべてのmediaに対して利用するのでしたら、それにはフォントなどごく限定されたものになるでしょう。それでも、フォントはmedia=auralやmedia=ttyには無効ですが(^^)

　そこであくまで、media=screeについてのみ、永続的(固定)スタイルシートを設定します。mediaのみ指定してtitleをつけないスタイルシートになります。

1) すべてのmediaに対して固定スタイルシートで基本的なものを指定する。
　font-family
　h1,h2,h3,h4,h5,h6,p,dd,li{margin:0;line-height:1.6em;text-indent:1em;}
　dt{font-weight:bold;}
　blockquote{margin:0.5em;2emborder;dotted gray 1px;}
とか・・。borderは視覚系メディアに対する指定なのでauralなどには無効ですが・・

2) media=screenに対して基本的な指定--サイト全体で統一したいもの-titleはつけない
　preの扱い
　div.header内のh1とか
　色調とかフォントサイズも決めても良いでしょう。
　　・・・必要なら標準スタイルシートや代替スタイルシートで上書きする。
3) 標準スタイルシートでデフォルトのスタイルシートを決める。titleを書くこと
　　ここで書かれた内容は代替スタイルシートを選択すると無効になります。
　　複数の標準スタイルシートを用意して、ページごとに別のものを利用しても良いでしょう。たとえばカテゴリートップではtopPage.cssを、細目ページではcontent.cssとか。
4) 代替スタイルシートを適用したときに適用されるものは、titleのないスタイルシートです。

　このとき、外部スタイルシートに同じtitleで指定されるスタイルシートがあっても構いません。
・配置などを指定するスタイルシート
・色のみ指定するスタイルシート
・headerやfooterを指定するスタイルシート
　に分けるのも良いでしょう。

★代替スタイルシートを使わないなら、titleを記述しない固定スタイルシートだけで良いです。

★もっとも大事なことはHTMLの文書構造が同じであること。

詳しい使い分けは、
14 スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html )
のページをしっかり読んで見ましょう。
　CSS3ではさらにmediaQueryが追加されますから、その基本としても理解しておく必要があるでしょう。

お礼

ありがとうございます。
やはり、覚えることが多くて大変です。

チョクチョク参考URLも読んで、覚えて行きます！！