CSSのfloatでレイアウトしたページの印刷について

質問

CSSのfloatでレイアウトしたページを印刷してみると、
2ページ分必要なところが1ページ分しか印刷されなかったり、2ページ目が印刷されていても、ある一箇所だけ・・・
といった、印刷した時のレイアウトの崩れで悩んでいます。

ページ内のコンテンツ部分だけを印刷したいのではなく、あくまでも全体がきちんと印刷されるようにしたいのですが、
float:none;
を設定すると、floatが解除されてしまうので、印刷するとますますおかしくなってしまいます。。。

印刷用スタイルシートをどのように設定したら良いのか、皆様アドバイスをお願いします・・・！！

回答No.2

Ysan · ベストアンサー

CSSで、印刷時に見たままを表示するのは難しいですよね。
基本は<link REL="stylesheet" type="text/css"
HREF="XXXXX.css" media="print">という風に
印刷用の外部スタイルシートを別に指定してやります。

で、その中身ですが、、表示用CSSを
ちょこちょこと変えても思い通りにはなりません。
（私の経験です）
私は、新たにレイアウト等を作り直します。

1.IE等で背景を印刷しない設定にしていると
　背景や背景色が無視され（たまに枠線色も無視する）
　せっかくのデザインが意味のないものになる。
2.改行位置やページの幅等が特定できない。
3.白黒のプリンタだと…
とかいう理由で、思い通りにならないので
思い切って!?無難な文字ベースにしちゃいます。
（一応 2 の改行位置やページの幅等を固定する
ことは出来ますが、古いブラウザ等では
無視されることがあります。参考URL参照）

どうしても同じレイアウトにしたいのであれば
テーブルレイアウトの別ページで対応とかを
考えてみてはどうでしょうか。

参考URL：

http://www.tohoho-web.com/css/reference.htm#page2

お礼

早速のお返事有難うございます！
やはり、思い通りにいかないのですね。。
CSSがプリント用やPDA用、色々とタイプ出来るから便利だなと単純に考えておりましたが。。。

CSSでやっている以上、印刷用とはいえ1ページだけなら良いのですが、全30Pに及びますので、テーブルレイアウトで別ページタイプは現実的に無理かなと思っております。

1～3のアドバイスと教えて頂いた参考サイトを参照しながら、考えてみます。

回答No.3

sam_inoue

スタイルシートの中に印刷専用のスタイルを追加できます。
最後の方に、
@media print{
}
を追加して、この中に印刷時専用のスタイルの記述を
埋め込みます。
これ以前に同一タグの記述があっても、
後ろに書いた方が優先されますが、
@media printの中に書いてあれば印刷時だけ機能します。
たとえば下記URLは画面では800px幅なのでA4縦印刷では
横がハミ出てしまいますが、
上記の方法で680pxに変更され、広告もない状態で
印刷されます。

参考URL：

http://www.asahi-net.or.jp/~ef2o-inue/top01.html

お礼

お礼が大変遅くなりまして申し訳ありませんでした。
アドバイス有難うございました。
結局外部でプリント用ＣＳＳを作成しました。
印刷がうまくいかなかったので、当初コンテンツメニュー部分を印刷時は非表示にするようにしていましたが、
結局floatでのレイアウトがおかしかったようです。
floatでのレイアウトを再度一つ一つ確かめ、再度レイアウトを組みなおした結果、特に印刷用CSSを準備しなくとも
うまく印刷されるようになりました。
背景に画像を使用しているので、一応印刷時は背景画像は非表示にしておきました（インクの無駄なので）。
以上、報告でした。

回答No.1

quads

どこまで出来ているのか分かりかねるのですが、印刷用ページを別途用意しているのでしょうか？
フロートと仰られても構成によって仕様が異なってきますので、できれば作成されたページを提示していただきたいのですが。

一応参考URLは印刷用ページについて。

参考URL：

http://www.stylish-style.com/csstec/hi-level/print-css.html

お礼

早速にご回答頂いていながら、お返事送れまして申し訳ありませんでした！！
サイトは殆ど出来上がっておりまして、全部で30ページですが、全ページが印刷される対象ですので、それぞれに印刷用ページは用意していないんです。
参考URL有難うございます。バグなどの情報が掲載されているページは非常に嬉しいです。

＞作成されたページ
以前、質問の時にプロバイダから与えられたスペースにデータをアップロードしましたが、規約違反で削除されました。私自身がよくルールを理解していなかったようです。折角お申し出頂いているのに残念なのですが、作成したページはお見せすることができないのではないかと思います。

今月中になんとかしたいので、参考サイトなど参照しながら頑張ってみます。結果を報告できればと思います。