
自称CSS中級者です。
大まかに下記のような構成でページ作成しておりますが、印刷時にスタイルが崩れてしまい困っております。
<標準準拠モード>
<html class="背景指定など background: repeat-x">
<外部css指定 screen,print>
<印刷用css指定 print>
<body class="幅固定 センタリング(margin:auto)">
<div ヘッダ領域>~~~</div>
<div メイン領域 class="幅固定、overflow: auto">
<div 左メニュー領域 class="幅固定 float: left">~~~</div>
<div コンテンツ領域 class="幅固定 float: right">~~~</div>
</div>
<div フッタ領域>~~~</div>
</body>
</html>
環境はWinXPでIE6、FF2でテストしています。
<問題点>
1.メイン領域が2ページ目から印刷される(IE、FF)
1ページ目にはヘッダ領域のみが印刷されます。
overflowの指定によりボックスの縦領域がページにまたがる場合強制的に改ページされる模様。
印刷用CSSでinherit指定すればFFでは回避できる。
(IEは強制的に縦領域をとってしまい回避不可)
2.2ページ目に強制改ページされたボックスが3ページ目にまたがる場合、それ以降の内容が印刷されない(IE、FF)
overflow: autoで領域が長い場合1ページ分しか印刷されない?
3.背景が縦にもリピートしてしまう(IE)
背景画像サイズは1px×82pxものを使用。
4.2ページ目以降にも背景がついてしまう(IE、FF)
IEは縦横リピート、FFは横リピートのみ
(これは頑張れば回避できると思いますが…)
以上4点が問題となっております。
なにか情報がございましたら宜しくお願い致します。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
FFって略さないほうがいいです。
http://www.mozilla-japan.org/support/firefox/faq …
参考に自分の場合を挙げておくと、私は一旦Firefoxって書いた上でFxっていう略称を使いますよ^^
で、とりあえずprintにoverflowを使わないほうがいいと思います。
overflowはprint向けの設定じゃないから表示がおかしくなっても仕方がない。
あと、背景が改ページ後も続くのは普通にbackground指定をしていれば当然だと思います。
リピートしない設定だとか固定位置表示だとかになっていた場合にそれが起こるのであれば問題かもしれませんが…。
IEでリピート設定が上手く行かないのは…ちょっと分かりません。
この回答への補足
>FF → Fx
間違った認識をしておりました。以後気をつけます。
>overflowはprint向けの設定じゃないから表示がおかしくなっても仕方がない。
なるほど。ではoverflowはscreenのみに設定し、printは別で何か表示が崩れないような指定をしたいと思います。
ちなみに「overflowはprint向けじゃない」というのは定義からしてそうであるということですか?
>背景が改ページ後も続くのは普通にbackground指定をしていれば当然だと思います。
すみません、「普通に」というのはどういう状態のことなんでしょうか…。
「リピートしない設定」というのがrepeat-xだと思ったのですが、印刷時にはこれ以外になにか普通ではない設定が必要ということでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
レスポンシブで困っています・・
-
HTML/CSSを使って写真のような...
-
テーブルの行を折りたたみたい...
-
HTMLタグのあるCSVファイルを利...
-
HTMLでクロス抽出したい
-
ホームページの制作について教...
-
テーブルのセルデータを自動改...
-
HTML&CSS メディアクエリにつ...
-
、URL化させるにはどうしたらい...
-
アコーディオンメニューが思う...
-
テーブルタグのセルの幅の一部...
-
GoogleSearchControlにホームペ...
-
HTML&CSS メディアクエリについ...
-
HTML&CSS メディアクエリ
-
HTML&CSSについて。
-
HTML &CSSとHTML5&CSS3 違い
-
HTML&CSSとHTML5&CSS3の違い...
-
HTML&CSSとHTML5&CSS3の違い...
-
列のどこをクリックしてもソー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
レスポンシブで困っています・・
-
HTMLでクロス抽出したい
-
iPhoneで HTMLファイルを閲覧
-
HTML/CSSを使って写真のような...
-
ホームページの制作について教...
-
スマホでHTMLファイルを開いて...
-
GoogleSearchControlにホームペ...
-
メモ帳の段落の揃え方
-
css初心者 フレックスボックス...
-
スマホ(android)のタッチパネ...
-
WEBページを強制的に横画面で見...
-
角丸画像の背景色を透明にした...
-
、URL化させるにはどうしたらい...
-
HTMLタグのあるCSVファイルを利...
-
静止画画像をクリックすると音...
-
テーブルのセルデータを自動改...
-
テーブルタグのセルの幅の一部...
-
スマホで、左右にスワイプして...
おすすめ情報