operaの印刷結果

質問

一応ホームページ制作を任されているプロです。

どのブラウザでも同じように「表示」あるいは「印刷」されるように
制作するのがプロだと考えております。

しかし、ただ１つoperaブラウザにて自分が作ったものを印刷すると
どうもレイアウトが崩れた結果となってしまいます。

まぁここまでなら、「そうならないよう勉強しましょう」で終わる話ですが、

どうも自分が作った以外のプロ中のプロが作ったと思われるポピュラーなものでも
印刷に対する挙動がおかしいです。(あえてどのページかは書きませんが・・・)

プロ中のプロが作ったものでもおかしいんだから、operaでの印刷結果は
目をつぶって妥協していいものなのでしょうか？

誰も教えてくれないし、どこにも載ってません。

どうかお教え下さい。

回答No.8

ORUKA1951 · ベストアンサー

＞今回は、印刷時に特に配慮したいという事ではなく
＞operaでの印刷が、他のどのブラウザよりも、画面表示と印刷結果のレイアウトが狂う事を
＞どう妥協するか、妥協してはダメなのかという話が聞きたくて質問しました。

　了解です。・・・その回答は妥協する必要はない!です。
　　　　　　　　　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

　そもそも、ブラウザはoperaに限らず印刷用のスタイルシートを自身が持っています。印刷を考慮すると、そのスタイルシートを上書きするために、別途 media="print"のスタイルシートを用意しなければなりません。あるいはスタイルシート内に@media:print{}で指定しなければなりません。
　そもそもscree端末用のスタイルシートを使って(指定されていない＝[media="all"])、印刷しようと言うのが無理な話です。
　クライアントが、完成の姿をプリントアウトして確認したいのでしたら、firefoxでしたら、Pearl Crescent Page Saver( https://addons.mozilla.jp/firefox/details/10367 )のようなアドオンを使って正確にプリントアウトすべきです。200dpiでページ全体を撮影して、別途画像ソフトでプリントアウトする。
　私は、クライアントに提出するものはその方法を使います。

　あくまで、screen用のプレゼンテーションを行っていると伝えておけばよいです。
(私は、スタイルシートにmedia Typeをscreenとしていますから、そもそも画面どおりに印刷できません。その代わり携帯電話でもテレビでも点字端末や読み上げブラウザ、そしてなによりも検索エンジンからも利用できる。SEO!!!!
　・・これはプロですから、クライアントに伝えてあります。

　なお、カタログのページは別途PDFを用意します。

お礼

申し訳ありません。お礼入力の場所を間違えてしまいました。

以下、同文を記入して、ここをベストアンサーとさせていただきます。

回答ありがとうございます。

質問をした後に、色々なホームページで印刷プレビューをしてみると、印刷結果が、画面表示と違ってシンプルなものが案外ある事を知りました。

・画面表示と印刷結果が同じである必要性はない
・印刷結果は、無駄な塗り潰しや余白は作らず、資源の節約
と言った発想なのでしょうかね。

印刷用に@media printを使う事は、以前から行っていましたが、印刷結果で不都合が生じる箇所を補うためだけに使っていました。

しかし、レイアウトが崩れそうな要因を、@media print内で全てリセットしてシンプルスタイルで印刷するといった使い方もありなのかなと思う事ができました。

ただ、ホームページを見てくれる普通の人は、画面表示と違うものが印刷される事に対して、変な疑問(うちのパソコン、プリンタが壊れた？このホームページは何かおかしい？)を持ったりしないだろうか？
まぁ普通の人はoperaなんかで印刷しないだろうけど・・・。

とりあえず、現状は「opera印刷時のみ、シンプルスタイルで印刷」といったcssを作って、プロとして対処する事にします。

※operaの設定、用紙幅に合わせるにチェックを入れて、印刷サイズを99%(手入力)以下にすると、そんなに問題なさそうなんだけど。やっぱり100%が標準だろうし・・・。

回答No.7

神崎 渉瑠（@taloo）

ORUKA1951さんでした。

失礼しました。

お礼

回答ありがとうございます。

質問をした後に、色々なホームページで印刷プレビューをしてみると、印刷結果が、画面表示と違ってシンプルなものが案外ある事を知りました。

・画面表示と印刷結果が同じである必要性はない
・印刷結果は、無駄な塗り潰しや余白は作らず、資源の節約
と言った発想なのでしょうかね。

印刷用に@media printを使う事は、以前から行っていましたが、印刷結果で不都合が生じる箇所を補うためだけに使っていました。

しかし、レイアウトが崩れそうな要因を、@media print内で全てリセットしてシンプルスタイルで印刷するといった使い方もありなのかなと思う事ができました。

ただ、ホームページを見てくれる普通の人は、画面表示と違うものが印刷される事に対して、変な疑問(うちのパソコン、プリンタが壊れた？このホームページは何かおかしい？)を持ったりしないだろうか？
まぁ普通の人はoperaなんかで印刷しないだろうけど・・・。

とりあえず、現状は「opera印刷時のみ、シンプルスタイルで印刷」といったcssを作って、プロとして対処する事にします。

※operaの設定、用紙幅に合わせるにチェックを入れて、印刷サイズを99%(手入力)以下にすると、そんなに問題なさそうなんだけど。やっぱり100%が標準だろうし・・・。

回答No.6

神崎 渉瑠（@taloo）

一つ確認しても良いですか？

・Operaで印刷した物と、Operaのディスプレイで見た物の違いなのか、
・IEやFirefox、Safari、Chromeなどで印刷した物と、Operaで印刷した物の違いなのか

どちらですか？

私は後者のつもりで答えていますが、ORUGAさんは前者のつもりで答えてらっしゃる様です。

論点が違えば回答が違うのは当然だと思いますし、その点をはっきりして置いた方が良いと思います。

補足

回答ありがとうございます。

今回の質問は、各ブラウザでの印刷結果がoperaのみ異なる・崩れるという事です。

回答No.5

ORUKA1951

もっとよくわかる例を挙げたほうがよいかな・・

たとえば、長い表を作成して次のようにマークアップします。
<table sunnary="test">
　<thead>
　　<tr>
　　　<th abbr="a"></th><th abbr="b"></th><th abbr="b"></th>
　　</tr>
　</thead>
　<tfoot>
　　<tr>
　　　<th abbr="totalA">A合計</th><th abbr="totalB">B合計</th><th abbr="tatalC">C合計</th>
　　</tr>
　</tfoot>
　<tbody>
　　　<td>・・</td><td>・・</td><td>・・</td>
　　　長い・・
　</tbody>
</table>
　ブラウザで見たものと、印刷は異なるはず・・

　私は、ディスプレイ用のスタイルシートは必ずmedia=screenを書いていますから、そもそも印刷しても絶対にディスプレイ表示のままにはならない。そのほうが印刷したときにはかえってよいものが得られる。
　画面表示と同じものがほしければ、Pearl Crescent Page Saver( https://addons.mozilla.jp/firefox/details/10367 )などのアドオンを使えばよい。だって、HTMLは、そうしたものですから・・
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　screen端末と言うごく一部の端末のことしか考えていない。としたらプロとしていかがかと・・・。

回答No.4

神崎 渉瑠（@taloo）

一応補足。

>目をつぶって妥協していいものなのでしょうか？
CSSを使ったときの表示の違いについては、大きくわけて３種類の対処方法があると思います。
・特定のブラウザでの、デザインの崩れを無視する
・やりたいデザインをあきらめて無難なデザインにする
・ブラウザごとにHTMLやCSSを振り分けて、やりたいデザインで表示できるようにする

HTMLは通常はディスプレイでみますので、印刷時のくずれは気にしない（１つ目の方法）も多いですが、
印刷用のページや印刷用CSSを作る場合は、段組み表示を消す２つ目の方法が採られることが多いです。

3つ目のブラウザごとに分岐する方法は、.htaccessやCGIなどで表示するHTMLを切り替えたり、CSSハックなどでスタイルシートだけを切り替える方法などがあります。

携帯電話とPCの振り分けは.htaccessやCGIでの分岐、
PC用のブラウザの振り分けはCSSハックによるものが多いと思います。
詳しくは「CSSハック」、特にOpera用であれば「Opera CSSハック」で検索してみてください。

回答No.3

神崎 渉瑠（@taloo）

段組表示にしなければ、たいてい同じになります。
印刷用ページや印刷用スタイルシートは、段組を消しているだけだと思います。

No.2の参考サイトでも、float:rightの部分で問題が出てますね。

回答No.2

ORUKA1951

例です。
ガウスの加速器（強力型）The Gauss Rifle : A Magnetic Linear Accelerator ( http://iruka.la.coocan.jp/science/GaussRifle/index.html )
は、ブラウザのページ設定、印刷オプションで、余白ゼロ背景フッターなしで印刷すると、どのブラウザでもほぼ同じに印刷されるはずです。--印刷プレビューで確認できる--

補足

回答ありがとうございます。

挙げて頂きました例は、パッと見ただけ申し訳ないのですが
印刷時には、目次にページ数を付けるなどの配慮がされているというものですね。

今回は、印刷時に特に配慮したいという事ではなく
operaでの印刷が、他のどのブラウザよりも、画面表示と印刷結果のレイアウトが狂う事を
どう妥協するか、妥協してはダメなのかという話が聞きたくて質問しました。

回答No.1

ORUKA1951

そもそも、印刷が想定されるページには必ず印刷用スタイルシートをつけておきます。
印刷用スタイルシートは、プリンター、および印刷プレビューで使われるスタイルシートで、ブラウザももちろんデフォルトのものを持っています。
私は
・固定スタイルシート
　すべてのユーザーエージェントに適用、font-familyやpやddのtext-indent、引用<blockquote>のマージンなど
・スクリーン用固定スタイルシート
　サイト全体のデザイン統一のため標準スタイルシート代替スタイルシートで適用
・標準スタイルシート
　代替スタイルシートが選択されたときは使われない
・代替スタイルシート
場合によると
・携帯端末用、TTYやPDA
・i-phone用
ユーザーの希望によると
・読み上げブラウザ、点字端末用を作らされることも

そして、印刷用スタイルシート

です。
　カタログのようなものは、基本的にPDFです。

変わった例では、カレンダーでして、ディスプレイで見ると左側にカレンダー全体が小さく表示され、右側には印刷や画像選択の説明がある。
　自前かサイトの画像を選択してもらって、印刷するとA4に高解像度の写真と下にカレンダーが印刷されるが、説明文などは消えてしまう。とか・・デザインはユーザーで選択できる。

ってなものもあります。

>どのブラウザでも同じように「表示」あるいは「印刷」されるように
制作するのがプロだと考えております。

　そんな馬鹿なこと考えていません。大事なことはHTMLは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　そのためには、文書構造にしたがって正しくマークアップし、screen端末用にスタイルシートを用意する。もちろん可能な限り同じように表示されるよう心がけますが。プレゼンテーションのためにHTMLに手を加えることは、ほとんどしません。
　最近では
リスト表示がうまくいきません　IEの問題なのか？ - HTML - 教えて！goo ( http://okwave.jp/qa/q6845944.html )
に紹介したソース、一般的なブラウザに加えてIE5～以降はどれでもほぼ同じに表示されるはずですし、i-phone,i-padもOK,これを実際に使うときは、もちろん他のmedia用のスタイルシートが必要な場合は用意します。しかし、HTMLはHTML4.01strictでWeb標準なマークアップがしてありますよ。