• ベストアンサー
  • 暇なときにでも

IEの画面表示どおりに印刷ができない

最近ホームページ制作を勉強しはじめた初心者なのですが、なんとかページの大部分が作成できました。 ところがIEで表示させてから、ブラウザの印刷を実行すると、画面表示のとおりに印刷することができません。どこを直せばよいのでしょうか? ちなみに、ヘッダのCSS関連の記述は以下のようになっています。(これが何を意味しているのかはよく分かっていませんが。。。) <link href="style.css" rel="stylesheet" type="text/css" media="all" /> 制作ソフトはDreamWeaver8を使っています。 おこころあたりがありましたらご指導ください。よろしくお願いします。

共感・応援の気持ちを伝えよう!

  • 回答数3
  • 閲覧数654
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.2

 ブラウザに表示して確認をなさっていると思いますが、 そのときブラウザを最大化して確認していませんか?  A4で普通に印刷できるのは、幅700ピクセル程度です。 たとえば、yahooのトップページを開いて、横幅全部が表示できる程度まで、 ブラウザのウィンドウをマウスで小さくしてみてください。 A4で普通に印刷できるのはこの程度です。  次にこのウィンドウサイズに合わせて、質問者さんの ページを表示させてみましょう。 どうでしょうか?印刷したような状態になりませんか?

共感・感謝の気持ちを伝えよう!

その他の回答 (2)

  • 回答No.3

「IEの画面表示どおりに印刷ができない」だけではどうおかしいのかわかりません。 背景画像が印刷されない、背景以外の画像が表示されない、色が印刷されない、色が変、テキストの位置がおかしい、などいろいろあると思いますが、どうおかしいのかわからなければ、アドバイスのしようもないです。 背景画像が印刷されないとかだったら、それはプリント設定の問題が考えられます。背景画像は印刷しない設定になってると(たぶんデフォルトはそうなってるはず)印刷されません。背景色も印刷されません。黒バックに白文字のページだと、真っ白に出たりします。 画像が重なってたりするようなことがあるなら、イメージを縮小表示にしているということも考えられます。(元のサイズで印刷されたりします)この場合はイメージタグの問題とやっぱりプリンタの設定の問題がかかわります。 ちなみに、お書きのヘッダでわかるのは、「このページと同じ階層にある『style.css』というファイルにcssの設定が記述されています」ということくらいです。どんな内容のcssが記述されているのかもわかりません。これでは回答もできませんよ。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

状況説明に関して言葉足らずな点があり、失礼しました。 No.2様のアドバイスにしたがいサイズ調整をいろいろ試してみたところ、無事解決することができました。 補足しますと、ページをスタイルシートを使ってサイドバー部分とメイン部分に分けて組んでおり、画面表示上は正しく表示されていたのですが、印刷するとサイドバー部分とメイン部分とが縦に並んで表示され、レイアウトが崩れるということが起こっていました。 幅の微調整をいろいろ試してみたところ、うまく表示されました。皆様ご回答ありがとうございました。

  • 回答No.1
noname#17648
noname#17648

印刷は <link href="style.css" rel="stylesheet" type="text/css" media="print" /> ですね。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • css media screen、all 使い分け

    <link rel="stylesheet" href="/css/★★.css" media="all"> <link rel="stylesheet" href="/css/★★.css" media="screen"> の使い分けが良く分かりません。 印刷を分けたい時の画面用として「media="screen"」があると思うのですが、 仮に、「screen」指定だけした場合(print指定なし)は、印刷するとcssが全く適用されないのでしょうか? と言うことは、「screen」指定した際は、必ず「print」指定もすべきなのでしょうか? また、そもそもデフォルトの挙動はどうなっているのでしょうか? <link rel="stylesheet" href="/css/★★.css"> と書くことも出来るのでしょうか?

    • ベストアンサー
    • CSS
  • フォントのサイズが変わってしまいサイトが崩れる

    IEとファイヤーフォックスでフォントのサイズが変わってしまい、自作サイトが崩れてしまいます。 調べたところ下記のような情報があったのですが、この方法がよいのでしょうか? http://kudox.jp/html-css/font-size-css また上記通りにする場合下記は <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> 最優先させるのでしょうか?最優先なら下記のような感じでよいのでしょうか? <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" /> <link rel="stylesheet" href="page.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> またmedia="all"はとりあえずすべてにつけておいたほうがよい属性と考えてよいのでしょうか? 教えてください。

    • ベストアンサー
    • HTML
  • 閲覧用CSSと印刷用CSSを分けることは可能ですか?

    現在、WEBページをtable無しのCSSで作成しています。 普通に閲覧する場合には問題ないのですが、 印刷しようとすると外部CSSで指定している画像が 印刷できないため、#fff部分が消えてしまいます。。 その為、media="screen"とmedia="print"で使い分けて 印刷時には#fffを#999などにしようと思ったのですが、 閲覧時にそれが反映されてしまって、黒い画像に#999文字になってしまい上手くいきません。 現在の記述は、 <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> <link rel="stylesheet" href="print.css" type="text/css media="print"> です。 色々サイトを見たところこの方法であってると思ってたのですが 何が間違っているのでしょうか?? もしくは、他に印刷時も閲覧画面と同じように見せる方法があれば 教えてください。よろしくお願い致します。

    • ベストアンサー
    • HTML
  • ドリームウィーバー html5

    ドリームウィーバーでhtml5 で制作しているサイトがあります。 ・style.css ・class.css のふたつでcssの管理をしているのですが、 ドリームウィーバー上では綺麗に組めているのに、 ネットにUP、プレビューすると style.cssだけ反映されて、class.cssが無視されます。 index.htmlと同階層にあるので、リンクも問題ないと思うのですが、なぜでしょうか?お力お貸しください。 <link href="style.css" rel="stylesheet" type="text/css"> <link href="class.css" rel="stylesheet" type="text/css"> ちなみにリンクです。。

  • 表示用ページと印刷用ページ

    表示用ページと印刷用ページがあります、印刷用ページには、 <link rel="stylesheet" href="css/print.css" media="print">で印刷用cssを適用しています。 表示用ページにあるprintボタンを押しと自動的に印刷用ページの印刷プレビュー画面を表示したいのですが、うまくいきません。ご教授お願い致します。

  • widthでcss,js切換可能でしょうか。

    【Web製作】widthでcssやjavascriptを切換えたいです。 マルチデバイス対応のWebSiteを製作しようと思うのですが、 widthによって、cssやjavascriptを切り替えたいのですがどのようにすれば良いでしょうか。 横幅が【959px以下】の場合は【style-1.css】と【base1.js】 横幅が【960px以上】の場合は【style-2.css】と【base2.js】を適応させたいです。 htmlに <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> と記述してもうまく動作しません。(確認は【PC】【iPhone】【iPad】です。) 私の解釈ですと、 1.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> ↑PCの場合、ウィンドウサイズが959px以下の場合【style-1.css】 2.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> ↑PCの場合、ウィンドウサイズが960px以上の場合【style-2.css】 3.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> ↑PC以外で、画面表示サイズが最大959px以下のデバイスの場合【style-1.css】 4.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのポートレートモードの場合【style-1.css】 5.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのランドスケープモードの場合【style-2.css】 と、解釈し指定しているのですがうまく動作しません。 そしてもう一つなのですが、 widthやポートレートモード、ランドスケープモードを判別しjsを切り替える事は可能でしょうか。 よろしくお願いいたします。

  • <!--[if lte IE 9]>

    たまに、人の作ったサイトの中のソースに <!--[if lte IE 9]> <link rel="stylesheet" href="https://○○min.css" media="all"> <![endif]--> というのを見かけるのですが、これはどういう意味ですか?

    • ベストアンサー
    • HTML
  • base hrefとlink rel

    テキストエディタでhtmlを書いています。 外部cssを使うので、 <link rel="stylesheet" href="style.css" type="text/css"> をヘッダ部に入れていますが、これより上に <base href="~"> で基準URIを指定しようとすると、cssが反映されなくなってしまいます。 先に <link rel="~ を入れてしまうと、文法チェックで引っ掛かるのですが、どうしたら良いのでしょうか? ソースは、 <Head> <base href="絶対パス"> <link rel="stylesheet" href="style.css" type="text/css"> で、この後にmeta属性を入れています。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • IEのセキュリティにブロックされないようにするには

    皆さん、お力をお貸し下さい。 javascriptで以下のようなプログラムを持つウェブページを作成しているのですが、IEのセキュリティ保護(セキュリティ保護のため、コンピュータにアクセスできるアクティブ コンテンツは・・・)に引っ掛かってしまいます。このプログラムにウィルス等の脅威が含まれないことを示してブロックされにくくするといったことは出来ないでしょうか?全てのjavascriptがブロックされる訳ではないようですが、不勉強なもので、ブロックされる場合とされない場合の差が分かりません。妙案お授け下さいます様、お願い致します。 <script type="text/javascript" language="JavaScript"> <!-- today=new Date(); allseconds=today.getTime(); surplus=Math.floor(allseconds/(24*60*60*1000)); flag=surplus%5; style=new Array(5) style[0]='<link href="index_style/style01.css" rel="stylesheet" type="text/css">'; style[1]='<link href="index_style/style02.css" rel="stylesheet" type="text/css">'; style[2]='<link href="index_style/style03.css" rel="stylesheet" type="text/css">'; style[3]='<link href="index_style/style04.css" rel="stylesheet" type="text/css">'; style[4]='<link href="index_style/style05.css" rel="stylesheet" type="text/css">'; document.write(style[flag]); //--> </script>

  • プリント用CSSについて

    いつもお世話になります。 プリント用のCSSを作成しようと思うのですが、 複数記述してもエラーは出ないのでしょうか? 説明がうまくないので具体例を書かせていただきます。 “a.css”“b.css"の各々のプリント用cssを “aprint.css”と“bprint.css"とした場合に <link rel="stylesheet" href="css/a.css" type="text/css" media="all"> <link rel="stylesheet" href="css/b.css" type="text/css" media="all"> <link rel="stylesheet" href="css/aprint.css" type="text/css" media="print"> <link rel="stylesheet" href="css/bprint.css" type="text/css" media="print"> この記述で不具合はないものかと悩んでいます。 それともa,bを統合して“c.css”という新たなものを作り、 プリント用“cprint.css”を設けるべきでしょうか? できれば複数記述できると助かるのですが。 要領を得ない質問ですみませんが、ご教授いただけると嬉しいです。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML