CSSを最近始めました。実は、2P目の印刷表記がおかしいのです。
HPの画面上は、全て、見栄えを揃えましたが、いざプリントすると、2枚目の表記がおかしいです。1枚目は変な所から下が空欄になり、2枚目の上部分が空いて、2枚目にCSSで表をくんでますが、途中からきれたまま下部(2枚目の下部)で終わり、そのまま最後の3枚目にはフッター部分のみが表示されて、終わります。2枚目の表記が途中から切れて終わってしまう感じです。サファリ以外は、すべてこの表示になってしまいます。
プリント用のCSS表記がおかしいのでしょうか?
下記に、プリント用CSSでつくってあるものを記しました。
何か足りないもの、もしくは間違っていることがありましたら、教えていただきたいのですが・・・
また、対処法などはありますでしょうか?
プリントCSS---------------------------------
@charset "UTF-8";
/* CSS Document */
/*print*/
@media print {
body {
background:#fff;
color:#000;
font-size:12pt;
zoom:100%;/*ie*/
background-image:none;
background-color:none;
}
.body {
background:#fff;
color:#000;
zoom:100%;/*ie*/
background-image:none;
background-color:none;
}
no-image {
display:none;
}
color-txt {
color:#000 !important;
}
table,
tr,
td {
border-collapse:collapse;
border-spacing:0;
border:1px solid #666;
}
.wrapper,
.sidenavi,
.main-all,
.main-light3
.footer {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.wrapper {
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.sidenavi {
display: none;
}
}
---------------------------------ここまで
html 冒頭---------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
body,td,th {
font-family: MS Pゴシック, Osaka, ヒラギノ角ゴ Pro W3;
}
body {
background: #c5d7e5 url(..○●●○k.gif) repeat-x;
margin-top: 0px;
}
-->
</style>
<style type="text/css" media="print">
<!--
body{
background:white;
}
-->
</style>
<link href="top_files/base.css" rel="stylesheet" type="text/css"
media="all">
<link href="top_files/print.css" rel="stylesheet" type="text/css"
media="print">
<link href="top_files/fg1_top.css" rel="stylesheet" type="text/css"
media="all">
<title> ○●●○</title>
---------------------
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
印刷した際何ページにもわたるような長いページでは、
左右にFloatをかけてあるものですと
改ページのタイミングで強制的に 「clear: both;」がかかった状態になります。
そのために思いもよらぬ表示になったりします。
要所要所(見出し部分など)で page-break-before を入れるとよいと思うのですが…
そうだったのですか。長いページになるときは、強制的にclear:both;がかかっちゃうのですか。
ありがとうございます。
書籍ではこういった場合の解決法がのってなく、検索しても欲しい答えにたどりつけず、
本当に困っていました。
最初おかしかったfg1ページは、今はちょうど表見出しのとこで、自動的に改行されていましたので、
あえてpage-break-before はいれなくてもいいのかもっと、躊躇してしまいました。
今、作成中の他ページに、さっそくpage-break-before を入れて様子をみたいと思います。
自分、まだ試行錯誤中のビギナーなので、作成が遅く、返事が遅れてしまうかもしれませんが、
お答えいただいて、今後の作成においても光りがさしたようです。
本当に嬉しいです。ありがとうございました。 頑張ります(^^)
No.1
- 回答日時:
まだ解決してなかったんですね
base.cssかfg1_top.cssでoverflowつかってませんか?
この回答への補足
たびたびすみません。
以前のPrint.cssの件では、隠したいもの、文字など上手くいったのですが(ありがとうございます)、
また、ココで詰まってしまいました。
base.cssには。body枠、サイドナビ、ヘッダー部分、フッター部分をいれています。
fg1_top.cssの方に、メイン部分のみです。表の冒頭の見出しにあたる所にoverflowをいれてます。
実は、最初このfg1ページが、こうなってしまい、
わからなかったので、色々、とったり外したりして、何回かやっていたら、
ページが上手く表示されたのですが、
このページを基に複製してfg2、fg3と2ページ目、3ページ目を作ったところで、
また同じ現象におちいりました。
原因は何なのか、わからないままページ表記が直ったりしたので、
なぜ、こういうことが起きるのだろう?と、ずっと、謎だったのです(今もですが)
上手くいったfg1にも、実はまだ見出し部分にoverflowがはいっています。
ちょっとこれをとってみてどうなるのかとか、
今、fg2、fg3も作成していますので、
overflowに焦点をあわせて、色々試してみたいと思います。
本当にありがとうございました。すごく助かりました。
まだ完成ではありませんが、
overflowをはずしての現段階では、プリントの表示が上手くいっています。
本当に助かりました。
すごく嬉しいです。ありがとうございました(^^)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssファイルの名称付け
-
スタイルシート(CSSスタイル)...
-
サイトを作る時のcssファイルは...
-
cssで、ボタンのテキスト部分を...
-
ブラウザでプレビューでCSSが反...
-
HTMLの CSSのファイルというの...
-
cssでiPhone SEで文字が小さす...
-
ディレクトリ構成【「common」...
-
定数の定義とかはできますか?
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
入力規則のリストの文字の大き...
-
テーブル内の文字サイズを変更...
-
教えてください。
-
ペイント3Dのテキストサイズ変更
-
PDFファイルを開かずに印刷...
-
Illustratorで作成、pngで保存...
-
似ているフォント(Win⇔Mac)
-
EXCEL VBA 印刷プレビューダイ...
-
MsgBoxについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssファイルの名称付け
-
ディレクトリ構成【「common」...
-
jspにcssを反映させるには
-
HTMLの CSSのファイルというの...
-
サイトを作る時のcssファイルは...
-
cssで、ボタンのテキスト部分を...
-
ドキュメントルートより上の階...
-
エクセルファイルにCSSを読み込...
-
定数の定義とかはできますか?
-
Dreamweaver のテンプレートで...
-
cssファイルを階層の異なるHTML...
-
スタイルシート(CSSスタイル)...
-
WindowsとMacで違うCSSを読み込...
-
一部のページにデフォルトCSSを...
-
cssが反映されません
-
Shadowboxを使い方が分からない
-
複数のhtmlで同じcssファイルを...
-
CSSによる簡易な複数言語対応に...
-
ブラウザでプレビューでCSSが反...
-
範囲指定印刷での位置(css)
おすすめ情報