出産前後の痔にはご注意!

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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
    • good
    • 0
この回答へのお礼

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

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

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

お礼日時:2005/03/27 02:59

スタイルシートの中に印刷専用のスタイルを追加できます。


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

参考URL:http://www.asahi-net.or.jp/~ef2o-inue/top01.html
    • good
    • 0
この回答へのお礼

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

お礼日時:2005/04/08 00:26

どこまで出来ているのか分かりかねるのですが、印刷用ページを別途用意しているのでしょうか?


フロートと仰られても構成によって仕様が異なってきますので、できれば作成されたページを提示していただきたいのですが。

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

参考URL:http://www.stylish-style.com/csstec/hi-level/pri …
    • good
    • 0
この回答へのお礼

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

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

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

お礼日時:2005/03/27 03:13

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qページの一部が消える印刷プレビューの原因について

ご質問です。
当方、実務経験の浅いwebデザイナー兼コーダーです。
仕事でコーポレートサイトを作成したのですが、htmlファイルの納品後に「印刷にも対応できるようにしてほしい」とクライアントからの要望を頂きました。

フルcssで作成したサイトを確認するも社内のWinXPのIE7・WinVistaIE7共に特定の倍率で「ページのある一部」が印刷プレビューに映らない(印刷しても、そこだけ白い・そこだけスペースが空いている)という現象が起きてしまいました。
(念のため・・クライアントからは最低IE7で印刷できればいい、と言われています)

私の確認では倍率70~75%で「ページのある一部」が表示できなくなり、クライアントの環境(WinXP IE7)では縮小して全体を印刷する、80%、60%の3つで「ページのある一部」が表示できないとのことです。
これはいったい何が原因となっているのでしょうか。

印刷用のcssにzoom指定で修正はできそうなのですが、何より原因がわからないので気になります。

プリンターの問題なのか、ブラウザによるものなのか・・
はたまたコーディングが悪いのか・・。

説明が悪いので伝わりにくく申し訳ないのですが、クライアントにうまく説明するためにも心当たりがある方のご意見を頂きたいです。
宜しくお願いします。

ご質問です。
当方、実務経験の浅いwebデザイナー兼コーダーです。
仕事でコーポレートサイトを作成したのですが、htmlファイルの納品後に「印刷にも対応できるようにしてほしい」とクライアントからの要望を頂きました。

フルcssで作成したサイトを確認するも社内のWinXPのIE7・WinVistaIE7共に特定の倍率で「ページのある一部」が印刷プレビューに映らない(印刷しても、そこだけ白い・そこだけスペースが空いている)という現象が起きてしまいました。
(念のため・・クライアントからは最低IE7で印刷で...続きを読む

Aベストアンサー

結構日数が経っているのでもう解決済みかもしれませんが…
私も一度その現象に出くわしたことがあります。
その時はoverflow:hidden;を消せば直りましたが、どうでしょうか。
もし解決済みでしたら、どうしてそうなったのか、解決方法はあったのかよろしければ教えて下さい。

Q印刷時に2ページ以上になる時CSSで指定した背景が全てのページに印刷されてしまう

CSSで背景を上部にno-repeatで指定しています。これを印刷すると、印刷枚数が2ページ以上になった時、全てのページに背景が印刷されてしまいます。できれば最初のページだけに印刷されるようにしたいのですが方法はありますでしょうか。Mac IEでは最初のページのみに背景が印刷されます。Windowsはだめです。

Aベストアンサー

無理ではありませんよ^^
大丈夫です。印刷用のCSSは簡単です。
まず印刷用のCSSは、
<link REL="stylesheet" type="text/css" HREF="印刷用のスタイルシートアドレス" media="print">
ヘッダ部にこのように記述します。
そこから、印刷した場合2ページ以上は背景を表示しないですよね。
印刷用のCSSには、改ページさせる記述方法があります。
.front_print {
page-break-before: always;
}

例として名前を入力しました。.front_printは任意の名前で結構ですよ。
そして、HTMLの方の記述は、

<div class="front_print"></div>

この<div class="front_print"></div>がある箇所で、印刷は改ページとなります。

この記述がある箇所で改ページがなされるという事は、それ以降の記述は2ページ後となりますので、そこより
背景を再指定させればご質問者様の要望に叶うかと思います。

CSSが詳しく紹介されているページを参考URLに載せておきます。ご覧下さい

ご参考頂けますと幸いです。

参考URL:http://www.stylish-style.com/index.html

無理ではありませんよ^^
大丈夫です。印刷用のCSSは簡単です。
まず印刷用のCSSは、
<link REL="stylesheet" type="text/css" HREF="印刷用のスタイルシートアドレス" media="print">
ヘッダ部にこのように記述します。
そこから、印刷した場合2ページ以上は背景を表示しないですよね。
印刷用のCSSには、改ページさせる記述方法があります。
.front_print {
page-break-before: always;
}

例として名前を入力しました。.front_printは任意の名前で結構ですよ。
そして、HTMLの方の記述は、

<...続きを読む

QHTMLって印刷するとずれるんですか?

お世話になっております。相談です(涙
会社の社内WEBページで いくつかマニュアル類などWordやPDFで作成したものがあります。重くていやなので、この際、HTMLで作成しましょう(私がつくってもいい)といいました。返ってきた回答は、
「マニュアル系は印刷して使用することが多いからです.
HTMLで作成すると、印刷がずれるなどして、
印刷に対する問合せなど余計な手間が増えます.」
でした。わたしはタグ打ちで少々ならHPが作れる程度なんですが、そんなに印刷するとずれるもんでしょうか・・社内のユーザーさんもWordやPDFは重くていやだから、HTMLでつくって、とか言うし、私自身もそう思うのですが・・詳しい方、教えてください。

Aベストアンサー

HTMLはブラウザで見ることを前提に作っているので印刷するということは考慮されていません。
なのでレイアウトによってはずれることもあります。
しかしページをレイアウトどおりに印刷するプラグインやソフトもあるのでそれを使えば見た目と同じように印刷されます。
また使うブラウザによってはあまりずれないで印刷できるブラウザもあります。
Htmlはどんな端末で見ても同じように見えることを重視して作ってあるので印刷するときのことまで想定されていないんですよね。
そういった意味ではPDFは印刷することを意識したファイル形式なので印刷するんだったらPDFにしたらどうですか?
ブラウザで見る用にHTMLで作って印刷用としてPDFを用意してリンクさせておくとか。

QIEの印刷でcssが無効になう

宜しくお願いします。

CSSを使って、DIVタグでレイアウトしています。TABLEでなくDIVだけで組むのは初チャレンジです。外部CSSを使用しています。

IE(Ver6)では、問題なくCSSが有効となって見えるのですが、印刷プレビュー及び印刷では、CSSが無効となりレイアウトが崩れてしまいます。DIV関係に限らず全てのCSSが無効です。

こんな経験は初めてで、何が悪いのかわかりません。

どこをチェックすれば良いのでしょうか?

Aベストアンサー

#2です。例題が悪かったです。(こうなっていると印刷にcssが効かないという例です。)
media="screen" になっているならこのCSSはscreenメディア(主にパソコンのディスプレイ)に対してだけ適用してください。という意味になります。
media="screen,print" と、すると画面と印刷の両方に適用されます。
(media="all"またはmedia自体を削除すれば全てのメディアに適用されます。)

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q印刷範囲の指定はできますか?

現在、ホームページを制作しているのですが、A4紙に収まらないページがあるのです(写真が切れてしまいます)。
そこで、ページのある一部分(メインの部分)だけを印刷する、またはしないように指定したいのですが、可能でしょうか。

Aベストアンサー

スタイルシートを使えば可能ですよ。

印刷用のスタイルシートを適用すればよいのです。
http://linkage.xrea.jp/article/2004/07/make_mediacss.php

上記のサイトを参考にしていただければ分かりやすいと思いますが(やり方は二通りあります)

たとえば、次のページを用意します。
<html>
<head>
<link rel="stylesheet" href="print.css" type="text/css" media="print">
</head>
<body>
<div class="noprint">
ここは印刷したくない
</div>
<div>
ここは印刷したい
</div>
</body>
</html>

上のHTMLでprint.cssというファイルを読み込み指定していますよね。
このprint.cssというファイルを作ります。
この中に

.noprint{
display:none;
}

と書いてあれば、class="noprint"で指定された部分は印刷されません。

分かりますでしょうか?

参考URL:http://linkage.xrea.jp/article/2004/07/css2print.php

スタイルシートを使えば可能ですよ。

印刷用のスタイルシートを適用すればよいのです。
http://linkage.xrea.jp/article/2004/07/make_mediacss.php

上記のサイトを参考にしていただければ分かりやすいと思いますが(やり方は二通りあります)

たとえば、次のページを用意します。
<html>
<head>
<link rel="stylesheet" href="print.css" type="text/css" media="print">
</head>
<body>
<div class="noprint">
ここは印刷したくない
</div>
<div>
ここは印刷したい
</div>
</body>
</htm...続きを読む

Qサイト全体を縮小して印刷するには?

こんにちは。教えてください。
http://lexus.jp/
上記アドレスのサイトのように
横幅940pxと普通はA4縦では全てが印刷出来ないサイズのサイトでも
ブラウザから印刷するとサイト全体が縮小して
A4縦に収まって印刷される方法を教えてください。

JavaScript、css少しならわかります。
よろしくお願い致します!

Aベストアンサー

まず、このサイトは標準準拠モードではなく互換モードで作成されています。
(IEはプロパティにつくアンダーバーを無視する。
他のブラウザは仕様どおり存在しないプロパティ自体を無視する)

http://lexus.jp/models/common/css/import.css
から読み込まれる
http://lexus.jp/models/common/css/default.css
にある

@media print {
body {
_zoom: 0.68;
}
}

を読み込むことで印刷時のみzoomを効かせているんだと思います。

Minefield/Firefox,Opera,IE7にはShrink To Fitという
自動的にページ幅を基準とする機能が付いています。

MinefieldではScaleで調整し,
Operaでは[ファイル]-[印刷オプション]に「用紙幅におさめる」で有効になります。
IE6は上の指定で回避します。

ただし,IE7は標準でShrink To Fitであり,zoomプロパティを読み込んでしまうため,異様に小さく印刷されてしまいます。なのでShrink To Fitではなく100%で印刷した方が良いでしょう。

何故か俺の環境ではVPC上でしか動作しないSafariは,
VPCにプリンタドライバ入れなきゃいけないのが面倒なので検証していません。

まず、このサイトは標準準拠モードではなく互換モードで作成されています。
(IEはプロパティにつくアンダーバーを無視する。
他のブラウザは仕様どおり存在しないプロパティ自体を無視する)

http://lexus.jp/models/common/css/import.css
から読み込まれる
http://lexus.jp/models/common/css/default.css
にある

@media print {
body {
_zoom: 0.68;
}
}

を読み込むことで印刷時のみzoomを効かせているんだと思います。

Minefield/Firefox,Opera,IE7にはShrink To Fitという
自動的にペ...続きを読む

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Q外部CSSで作成したページの印刷について

「外部CSS」で作成したページを、印刷プレビューしてみると
「HTML」だけ?の状態のような感じです。

「外部CSS」で作成したページを、CSSが反映した見た通りには、印刷できないのでしょうか?

なにか、記述の追加をすれば、できるのでしょうか?
または、参考サイトがあれば、教えてください。
よろしくお願いいたします。

Aベストアンサー

外部CSSだからとか言う事ではありません。
どこからの丸写しで、メディアタイプに「screen」と指定していませんか?

<link REL="stylesheet" type="text/css" HREF="外部CSSファイル" media="screen">

最後の「media="screen"」で出力するメディアを指定していて、画面用や印刷用に別々のスタイルシートを適用する事ができます。
・all:画面も印刷も全てに適用。
・screen:画面用
・print:印刷用

http://msugai.fc2web.com/web/CSS/media.html
http://allabout.co.jp/internet/hpcreate/closeup/CU20050728A/

参考URL:http://msugai.fc2web.com/web/CSS/media.html

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;


人気Q&Aランキング