- ベストアンサー
cssで印刷用ページ作れる？？
現在、表示されているhtmlページはページを軽くするため 背景に画像をおいたりしています。 当然、印刷プレビューでは表示されません。 印刷したい人がブラウザで背景表示を設定してもらわなければならないです。 そこでなんですが、ユーザーが印刷ボタンを押したときに、cssで私が印刷して欲しい「.jpg」をユーザーに印刷してもらうことはできるのでしょうか？ A.htmlを表示しておいて、印刷ボタンを押すとA.htmlの「.jpg」を印刷してもらうというような。 わかりにくい文章ですみません。よろしくお願いします。
- kj9sdarijf
- お礼率28% (38/134)
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
印刷用 CSS で背景画像を印刷させる方法 http://www.lucky-bag.com/archives/2005/12/print-background-image.html > ページを軽くするため背景に画像をおいたりして ？？？ 本来、<img>タグで表示するべき画像も全部、CCSで背景画像として表示させていると言うことですか？ だったら全く無意味です。 <img>タグにしろ、CSSにしろ画像を読み込むことには変わりなく、ページ全体の読み込み/表示にかかる時間（データ量）はほとんど変わりません。 CCSや<img>によるの記述の違い分、ぜいぜいが数十Byte程度です。
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
CSSの指定を対応するメディア毎（スクリーンとプリント）に振り分ける事で、ブラウザに表示される結果とプリント時の結果をある程度まで近づける事は可能ですが、基本はANo.1様の仰る通りですし、軽量化に関する認識の誤りについてもANo.2様のご指摘の通りです。またANo.2様がご紹介されている方法は、かなり力業ですので、理屈を良くわかってないと思う様にうまく行かないかもしれませんし、環境も選ぶ様です。 といいいますか、印刷時にも閲覧者に見えていて欲しい様な「重要な意味のある」画像であるなら、そもそも背景にするべきではないですね。 背景に指定する画像というのは、本来それが表示されなくても閲覧者が情報を取得するのに支障がないもの（単なる飾りの意味しかない画像、例えば壁紙・リストマーク・角丸にする為の画像、etc.…）に留めておくべきでしょう。
補足
seoのために背景にしていました。 印刷も考えて、多少見直しです。
- nori_007
- ベストアンサー率35% (369/1048)
背景画像である限り、利用者で設定をしなければ印刷ができません。この辺は利用者の環境に依存し、CSS でどうにかなる話ではないと思います。
関連するQ&A
- CSSによる印刷設定
横幅が800pxで制作したWEBページの印刷設定をCSSにて行いたいと思います。背景画像を使用しているので、IEブラウザのツール→インターネットオプション→詳細設定の一番下にある「背景の色とイメージを印刷する」にチェックを入れて印刷プレビューをかけると確かに見た目通りの表示になりますが、横幅800pxですと右端が切れてしまいます。これを横幅が切れないように印刷設定するための方法としてＣＳＳで何か設定はございますでしょうか？単純にプリンタのページ設定で横印刷や余白設定をすれば良いのでしょうが、デフォルトで最低限やっておきたいと考えております。有識者の方々、ご教授の程、よろしくお願いします。
- ベストアンサー
- HTML
- css
プリント時のCSS設定についておたずねします。 現在index.htmlとindex.cssがあります。 index.htmlに ----------------------------------------------------------- <link href="index.css" rel="stylesheet" type="text/css" media="all" /> ----------------------------------------------------------- としてindex.cssを読み込み index.css内では ----------------------------------------------------------- body{ background:url("../images/bg_body.gif") repeat-x; } ----------------------------------------------------------- として、bodyの背景に画像を貼り付けています。 これを印刷時にはbodyに指定している背景画像を非表示にして 印刷させたいのです。 ※ブラウザの詳細設定「背景の色とイメージを印刷する」にはチェックを入れたまま。 別途cssを用意しhtml側で ----------------------------------------------------------- <link href="print.css" rel="stylesheet" type="text/css" media="print" /> ----------------------------------------------------------- とすれば出来そうなのですが、ちょっと答えが出ません・・・ そもそもなぜこのような事がやりたいのかというと コンテンツ内容が長くなった時、印刷すると複数ページに渡りますが、 <body>に指定した画像が、2ページ目、3ページ目にも表示される為です。 背景にしている画像は高さを十分に確保しており横32px×縦3000px位で、 一番上（0pxの高さ）から150px位の高さまで単純なグラデーションをかけたものです。 151px以降は1色のベタ塗りという感じです。 ブラウザ閲覧上はコンテンツ内容が長くても背景画像のグラデは ページ上部のみ表示されるのですが、印刷時に2ページ目、3ページの上部に グラデが表示されてしまうという事です。
- 締切済み
- ホームページ作成ソフト
- CSSで画像を印刷させることは可能ですか？
以前閲覧用と印刷用CSSの設定でご質問しました。 それは初歩的なミス（汗）で、解決したのですが、 まだ疑問がありましたので改めて質問させていただきます。 CSSで指定していて、画面上では見えている背景画像が 印刷しようとすると、消えてしまいます。 この問題を解決する方法はありますか？ （operaやfirefoxなどのブラウザを変える方法以外で） 確か、tableの背景に入れた画像も印刷時には消えてしまいますよね。 ということは、基本的に背景画像はブラウザの「背景も印刷」を設定しない限り無理なんでしょうか…？
- ベストアンサー
- HTML
- CSS+XHTMLで作成のページが画面には映っているのに全部印刷プレビューできない
はじめまして。初めて質問させていただきます。 今ホームページを初めて、CSS+XHTMLでつくっています。 ブラウザ（IE6.0、Firefox）で確認したところ、 意図するようにちゃんと表示されるのですが、 印刷プレビューをみると、 ２ページ目に印刷されるはずのものがプレビューされず、 １ページしかプレビューされません。 １ページ目の下のほうは、 １ページでおさまる分までで文章が途中で切れたような感じになってます。 div でボックスをつくってくみあわせていますが （ヘッダーフッターありの２段組。左ナビで右メインです。） divの設定がおかしくて文章が途中できれて、 自動的に伸びていないのかなと思い、調べているのですがよくわからなくなり、困っています。 ここがこうなのではないかとか、 これがこうなっているはずだからこうすれば、とか 教えていただけませんでしょうか。 よろしくお願い致します。
- 締切済み
- CSS
- 表示用ページと印刷用ページ
表示用ページと印刷用ページがあります、印刷用ページには、 <link rel="stylesheet" href="css/print.css" media="print">で印刷用cssを適用しています。 表示用ページにあるprintボタンを押しと自動的に印刷用ページの印刷プレビュー画面を表示したいのですが、うまくいきません。ご教授お願い致します。
- 締切済み
- HTML
- 印刷 印刷用css css print.css
cssを勉強中なんですがいまいち印刷用cssがよくわかりません。 このcssを適用させれば背景で設定した画像もすべてwebと同じように印刷されるのでしょうか？ 印刷用のcssを読み込むことはわかるんですがこの印刷用のcss（仮にprint.css）には何を 記述すればいいのでしょうか？ どうもいろんなサイトを見てもよくわかりません。 よろしくお願いします。
- ベストアンサー
- デザイナー・クリエイティブ職
- 印刷できるページの作り方
仕事である会社のホームページを作ることになりました。 そこで出された条件が、「印刷したときにＡ4サイズに収まるページ」。 印刷を考えるのであれば、横幅を640程度に抑えるとか、pdfにしてしまうとかも考えられるのですが、横幅を小さくすれば「画面で見たときに端が空きすぎ」また、「pdfはだめ」と、却下されてしまいます。 横幅を広げて、用紙を横にして印刷というのも、却下。（一々横にしたりしなくてもすむように、印刷設定をしなくてもすむようにしてくれとのこと） ・・・とすれば、cssなんかで印刷用のページを作るとかしかないのかとも思いますが、正直cssはあまり分かりません。（勿論勉強しながらやるつもりですが） また、cssを使うにしても対応しないブラウザがあるのはだめだとのことで、こんなんで本当に出来るのか・・・。 また、スケジュールもかなりタイトな日程を強引に組まれてしまい、時間もありません。 画面上では通常に見え、ブラウザの印刷ボタンで自動的にPページがPDFで印刷されるようにするとかいう方法はあるのでしょうか・・・？ 一体どうすればいいのか、困ってしまいました。 何か良い方法はないでしょうか？
- ベストアンサー
- その他([技術者向] コンピューター)
- Word 背景 フチなし 2ページ印刷
Wordで＜書式＞＜背景＞＜塗りつぶし効果＞ で背景を設定している文章がA4で2ページあります。 この2ページをフチなしで、A4用紙1枚に2ページ分縮小して印刷をしたいです。 ＜印刷＞＜拡大／縮小＞＜２ページ＞ を選び、プリンタのプレビュー機能で確認すると、 A4左に印刷される１ページ目が背景で塗つぶされている様で、 あるべき文字が消えて見えません。 A4右に印刷される２ページ目はきちんと文字、背景とも確認できます。 どの設定を変更したらよいのでしょうか？ よろしくお願いします。
- 締切済み
- Windows XP
- CSSでバックグラウンドを印刷可能にするには...
バックグラウンドで背景画像配置をしましたが、印刷する際には まったく 写らなくなってしまっています。 どのように したらよいでしょうか？ 現在 CSSファイルは１つです。印刷用のＣＳＳファイルも ひとつ作る必要がありますか？また、既存のＣＳＳファイルに 付け足す だけでよいのでしょうか？ 詳細 教えていただきたいです。 合わせて,複数ページ（例えば１ページで済ませたいのに、中途半端に１行だけ２ページ目になってしまい、結果２ページ印刷になている） の時 ページを指定したり、合わせて１ページとして印刷させる方法。あるいはＨＰを用紙にフィットさせる方法があれば 教えてください。
- ベストアンサー
- CSS
お礼
考え方を変えて、リンク先をトライしてみようかと。 ありがとうございます。
補足
かなりキーワードきついＨＰを依頼されていましたので。 軽くというか、背景にして少しでもコードを減らす狙いです。 seo対策です。