CSSテクニックコミュのプリント時のレイアウト崩れ

初めての書き込みで失礼します。

CSSレイアウト勉強中なのですが
ブラウザーの画面上ではOKなのですが、プリント時にレイアウトが崩れることが多々あって悩んでいます。

画面のままをプリントアウトさせようとする際に気を付けるべきポイント等あるのでしょうか。

下記に具体例をあげてみました。
いずれもWinIE6のプリント時にのみ崩れます。
MacIEやWinFFでは大丈夫なようです。

ご教授いただければ幸いです。
どうぞよろしくお願い致します。

（検証いただきやすいようにmixiの画像を絶対パスで入れてしまいました。こういうのはまずいんでしょうか・・・）

●box01
リンクのリストが左にずれて背景と重なります。
リストのマークに使用している背景画像が消えます。

●box02
（box01にboxを入れ子にしてmarginでポジショニングしています）
左へのズレは解消しましたが、リストのマークに使用している背景画像が消えます。

□CSS

* {
margin:0;
padding:0;
}

#box01 {
width:478px;
margin-bottom:15px;
border-width:1px;
border-color:#000;
border-style:solid;
}

#box01 ul {
width:210px;
padding-left:260px;
background-image: url(http://img.mixi.jp/img/title1-.gif) ;
background-repeat: no-repeat;
background-position: left;
}

#box01 ul li {
list-style-type:none;
}

#box01 ul li a {
padding-left:27px;
background:url(http://img.mixi.jp/img/arw_bw.gif) ;
background-repeat: no-repeat;
}

#box02 {
width:478px;
margin-bottom:15px;
border-width:1px;
border-color:#000;
border-style:solid;
}

#box021{
width:478px;
background-image: url(http://img.mixi.jp/img/title1-.gif) ;
background-repeat: no-repeat;
background-position: left;
}

#box021 ul {
width:210px;
margin-left:260px;
}

#box021 ul li {
list-style-type:none;
}

#box021 ul li a {
padding-left:27px;
background:url(http://img.mixi.jp/img/arw_bw.gif) ;
background-repeat: no-repeat;
}

□HTML

<div id="box01">
<ul>
<li><a href="#">リンク01</a></li>
<li><a href="#">リンク02</a></li>
<li><a href="#">リンク03</a></li>
<li><a href="#">リンク04</a></li>
<li><a href="#">リンク05</a></li>
</ul>
</div>

<div id="box02">
<div id="box021">
<ul>
<li><a href="#">リンク01</a></li>
<li><a href="#">リンク02</a></li>
<li><a href="#">リンク03</a></li>
<li><a href="#">リンク04</a></li>
<li><a href="#">リンク05</a></li>
</ul>
</div>
</div>

コメント(19)

最初
全て
最新の40件

[2] mixiユーザー 12月12日 17:22

＞rea

ありがとうございます。

でもプリント用のレイアウトを用意せず
画面のままプリントアウトしたい場合は同じ記述になってしまうのではないのですか？

[5] mixiユーザー 12月12日 17:40

cssの該当箇所を以下のものにしてみてください。
box2のほうは入れ子になって構造が複雑化するので、box1のほうで解決したほうがいいかも。

#box01 {
width:478px;
margin-bottom:15px;
border-width:1px;
border-color:#000;
border-style:solid;
background-image: url(http://img.mixi.jp/img/title1-.gif) ; /* 背景指定はボックスに */
background-repeat: no-repeat;
background-position: left;
}

#box01 ul {
padding-left:260px;
list-style-type:none;
}

#box01 li { /* li単独で指定 */
width:200px; /* widthかhightを設定しておけばIE6でも印刷される */
background:url(http://img.mixi.jp/img/arw_bw.gif) ;
background-repeat: no-repeat;
}

#box01 ul li a {
padding-left:27px; /* ここの背景指定はいらない↑上に指定する */
/* リンク文字の要素だけ移動するならtext-alignでも */
}

[6] mixiユーザー 12月12日 23:04

＞3: かみ
プリント時のCSS指定の参考になります。
ありがとうございます。

＞4: うづ＠レスしづらい
それでやったのがbox02の方ですよね。

＞5: ruru
出来ました！！
ありがとうございます！

ulに背景指定しない方がいいってことなのでしょうか。
またliにサイズを入れれば背景が出てくるのは思いもよりませんでした。

助かりました。
本当にありがとうございます♪

[7] mixiユーザー 12月12日 23:55

ブラウザ作ってる会社は、
あまり印刷に関しては開発していないのが現状のようです。
某会社には｢あきらめてください｣言われました。

そもそもブラウザ表示が、まともじゃない状態でないのに、印刷まで考えてる予定はないのでしょう。

先日Firefoxについては、バックグラウンドを使った画像が極端に大きくなったり小さくなる現象は2.0で解消されたのを、なおした本人から聞きました。

基本、ブラウザと同じようなレイアウトをそのまま印刷させるのは仕事でやった経験上困難です。

Operaも消したはずの背景が意図しない場所にあらわれたり…
プレビューで大丈夫なのに印刷するてフロートが解除されないなどは、モダンブラウザでも起こります。

あくまでも、シンプルな装飾にしとくのがベストですよ。

[8] mixiユーザー 12月13日 03:43

そもそもプリント時のレイアウトでは、IEなどはデフォルトでは背景画像がプリントされないので、誰のどのブラウザでも画面表示と同じようにプリントさせたいということならば、背景画像を使うことじたいが問題かと。

特に左側の画像はサンプルを見る限り「内容」に属するものだと思われるので、<img>を使うほうが素直な気がします。

ぼくも画面表示のとおりにプリントしたい、という要望があってずいぶん苦労したことがありますが、結局プリント専用のスタイルシートをmedia="print"で読み込ませてなんとか調整しました。

----IEでは<img>を使う（標準モード限定）----
<style>
#box03 {
width:478px;
border:1px solid black;
}
#box03>img{
float:left;
}
#box03 ul{
margin-left:260px;
list-style-type:none;
}
#box03 ul li>img{
display:none;
}
#box03 ul li:before{
content:url(http://img.mixi.jp/img/arw_bw.gif) ;
}
</style>



<div id="box03">
<img src = "http://img.mixi.jp/img/title1-.gif" alt = "">
<ul>
<li><img src = "http://img.mixi.jp/img/arw_bw.gif" alt = "">
<a href="#">リンク01</a></li>
<li><img src = "http://img.mixi.jp/img/arw_bw.gif" alt = "">
<a href="#">リンク02</a></li>
<li><img src = "http://img.mixi.jp/img/arw_bw.gif" alt = "">
<a href="#">リンク03</a></li>
<li><img src = "http://img.mixi.jp/img/arw_bw.gif" alt = "">
<a href="#">リンク04</a></li>
<li><img src = "http://img.mixi.jp/img/arw_bw.gif" alt = "">
<a href="#">リンク05</a></li>
</ul>
</div>

[9] mixiユーザー 12月13日 04:15

CSSレイアウトできっちり過ぎに組んでると、結果的にプリント用CSS捨てることになりますね。
background出ないからFIR使えない（認識あってますかね）し。
最近の2.0系なサイトも、プリント時とブラウザの表示が違うのが殆どですよね。

[10] mixiユーザー 12月13日 04:34

画像置換なんか使わなきゃいいじゃん。

[12] mixiユーザー 12月13日 10:55

このあたりは意見が分かれるところですよね。
構造は崩したくないし、IMGの多用は避けたい…というのは私たちデザイナーというかコーダー側のこだわりであって、ユーザーさんにとっては普通にプリントできることが重要だったりしますので。私もそのギャップに悩んだことがあります。
究極的にどのブラウザでも見たまま印刷できることを考えれば、テーブルレイアウトのリキッドデザインになってしまうし。それはこれからの流れに逆行しているわけだし。

2.0時代ではブラウザ側で「背景プリントする」をデフォルトにして欲しいと、個人的には思います^^;
背景さえ普通に出るようになれば、あとのバグは潰すなり対応して画面表示と印刷結果を近似することができると思うので。
だけど真っ黒に白文字のサイトなんかうっかり印刷すると一気にインク消費しそうでそれもこわいですね。
難しいですねぇ。

[13] mixiユーザー 12月13日 11:33

> 12: ruruさん(2006年12月13日10:55)
> IMGの多用は避けたい…というのは私たちデザイナーというかコーダー側のこだわりであって

IMGの多用を避けたい理由がわからないので教えていただけませんか?

[14] mixiユーザー 12月13日 12:35

＞ iwaimさん
HTMLはできるだけシンプルにしたいという、単なるこだわりです。
例えば本文内に配置する説明的な画像はHTML内に書くけど、背景的やデザイン的な画像はCSS側に、という感じです。
こおじさんのソースはサンプルなので画像がどういう扱いなのかわかりませんが、左の画像がタイトル画像だったらHTML内に記述してリンクをはれるようにするけど、もしデザイン的なイメージ画像だったらCSSに記述する、というふうに。
SEO的にどれほどの効果があるかはわかりませんが、ソースをシンプルにすることで、クライアントにコントリビュートなどを使って更新していただく場合にもCSS内にデザイン的な画像を配置しておくといろいろ便利というのもあって。
スレ違いになってましたらすみません…。

[16] mixiユーザー 12月13日 14:19

考え方としては良いんでしょうけども、
おそらく、「多用」という言葉にiwamさん反応したんだと思いますよ。

意味をもつ画像であるならば、数に関係なくそれはimg要素を用いるべきでしょうから
画像の数が云々という話はおかしいですよね。

img要素を用いるべきなのか、CSSで制御すべき装飾なのか、なので、
「シンプル」ではなく「あるべき姿にする」ものの考え方の方が良いと思いますよ。
幾らシンプルでも、必要な情報が伝わらなければ意味がないですから。

[17] mixiユーザー 12月13日 14:34

>14: ruruさん(2006年12月13日12:35)

お答えいただきありがとうございます。ガク巡査さんがおっしゃっているように「多用を避けたい」というところがちょっと解らなかったので。そのまま受け取ると、性質ではなく数量で判断するということになりますから。

[18] mixiユーザー 12月14日 02:49

＞ガク巡査さん
そうですね、私も考え方はおっしゃる通りです。表現が間違っていましてすみません。
＞ iwaimさん
はい、多用ではなく、乱用というほうが近かったですね。やみくもに画像はすべてIMGでというのは間違っていると理解していますので。ご指摘ありがとうございます。

[19] mixiユーザー 02月02日 15:43

ボクもＣＳＳでコーディングするのが好きで、よくやりますが
印刷時のズレに悩まされます。floatとかもおかしくなること
が多々。シンプルなプリント用ＣＳＳを用意しても画面上が
そのまま印刷されてない！とクレームが来てしまいます。
客にも今の流れを理解していただきたいとは思いますが、なか
なかそうはいかなくて、難しい問題です。
ソフトバンクなんかはわざわざ印刷用にテーブルで組みなおし
てますね。
http://www.softbank.co.jp/softbankgroup/index.html

ログインすると、残り5件のコメントが見れるよ