• ベストアンサー

印刷用ページを作る際のCSSの使い方について

Webサイトで申込用紙を印刷できるページを作りたいと思ってます。 この場合、閲覧用には固定スタイルシートと標準スタイルシートを使い、 印刷用には代替スタイルシートを使えば良いのでしょうか? その場合、代替スタイルシートに記述する場合、どうやって印刷範囲を指定するのでしょうか? ブラウザごとに印刷範囲が異なるということはあるのでしょうか? また、他に注意点はあるのでしょうか?

noname#233083
noname#233083
  • CSS
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

固定(persistent)スタイルシートは、mediaもtitleもなく、relの値がstylesheetであるものです。 優先(preferred)スタイルシートは、relの値がstylesheetで、title属性の値を持つもの です。  それぞれにmediaの値を指定してもよいのですが、印刷用に関しては代替スタイルシートの手段は用意されていません。 よって外部スタイルシートでは、 <link rel="styleSheet" type="text/css" media="print" href="./styleSheet/print.css"> になります。 そのときに、固定スタイルシートが指定されていれば、その指定も引き継ぎます。 ブラウザのデフォルトのスタイルシートは、概ね A. HTML 4.0におけるスタイルシートの例 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html ) のようなものですから、カスケーディングの仕組みから、これに追記する形で記述すると良いでしょう。  印刷用スタイルシートの場合は、screenと異なるプロパティがいくつかありますので、それを活用しましょう。 13. ページ媒体 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/page.html )

noname#233083
質問者

お礼

ありがとうございます!! 早速やってみましたが、疑問点がでてきました!! 別で質問を致しましたので、アドバイス頂けないでしょうか? http://okwave.jp/qa/q7828594.html

noname#233083
質問者

補足

ありがとうございます!! 早速やってみましたが、疑問点がでてきました!! 別で質問を致しましたので、アドバイス頂けないでしょうか? http://okwave.jp/qa/q7828594.html

関連するQ&A

  • 固定CSSと標準CSSに分けたら印刷画面がずれる

    今までスタイルシートは一つだけしか使っておりませんでしたが、固定と優先にスタイルシートを分けてみました。 固定スタイルシートには、ヘッダー、サイドバー、フッターの部分を記述し、 優先スタイルシートには、ページごとに中身がちがう部分を記述しました。 これでページを閲覧すると、今まで通り表示されていたので、「よし、これから管理が楽になるぞ!」と思いました。しかし、この状態で印刷プレビューをすると、ヘッダーの部分は改行されるし、サイドバーは下に表示されておりました。 ちなみに、一つだけでスタイルシートを使っている時の印刷プレビューは、閲覧している時と、ほぼ同じように表示されておりました。 私としては、固定スタイルシートと優先スタイルシートに分けて、印刷プレビューも閲覧用と同じように表示されているなら、そのまま印刷用として使いたいと思っております。 なぜ、固定スタイルシートと優先スタイルシートに分けたら、閲覧用の表示はきちんとされているのに、印刷プレビューの表示だけおかしくなってしまったのでしょうか?

    • ベストアンサー
    • CSS
  • 印刷用スタイルシートの作り方

    スタイルシートを使ってWEBページを作り、印刷プレビューにすると、画像とかが、飛んでしまって、印刷範囲にないのですが、スタイルシートの記述で、印刷用に、外部スタイルシートを作るにはどうすればよいのでしょうか?よいサイトがあれば教えてください。

  • 印刷用のwebページを作りたい

    ホームページを作成運営して楽しんでいる者です。ちょっと困ったことがあり、皆様の知恵をお貸しください。 縦に長いwebページ(A4で5ページくらい)を印刷する場合、任意の行で改ページさせて印刷させたいのです。 閲覧者さんのブラウザの設定に影響されること無く、閲覧者さんがプリンタの設定もすることなく、ごく自然に印刷していただける方法が知りたいです。 htmlは、なんとなく理解しています。スタイルシートは、理屈はわかるのですが慣れていません。Javaとcgiは、コピペする程度、それ以外は素人です。 現在は、GoLive5.0を使ってます。 よろしくお願いします。

    • ベストアンサー
    • 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
  • CSSでファイヤフォックスの文字の大きさを固定

    スタイルシートで ブラウザに表示される文字の大きさを制御しております。 IEでは完全にサイズ固定できますが、 ファイヤフォックスでは 完全な固定ができません。 スタイルシートからの指定で 固定する方法ってあるんでしょうか…? ご存知の方お教えください。

    • ベストアンサー
    • HTML
  • CSSを使用しているページで印刷すると強制終了します。

    こんにちは。今、解決策を探している最中です。何かご存知の方、ご教示ください。 外部スタイルシートを使用しているあるホームページで、ブラウザの印刷機能を使用(プレビューでも)すると、ブラウザが強制終了してしまいます。 WindowsXP、IE6です。IE5では大丈夫そうなのですが・・・。他のパソコンで試しても同じなので、ページ自体に問題がありそうです。同じサイトの同じレイアウト(テキストなどが違う)のページでも、印刷できるものと、そうでないものがあります。 タグの対応など今チェックしています。 スタイルシートを参照しないようにすると、印刷レイアウトできます。 漠然とした質問で恐縮なのですが、なにか気づかれた方、ご回答をお願いいたします。

  • 印刷にて1枚に並べて同じページを印刷するには?

    お世話になります WEBのページを印刷にて1枚に並べて同じページを印刷するには ページ指定で1,1と設定を行えば可能だと思うのですが、これを 5ページ等複数ページ行うときは1,1-2,2・・・と設定をしないで 一括で指定できる方法はありますでしょうか? ブラウザであればソフト等の指定はないのですが、設定を 1つづつ行っているため、大変効率が悪いので、ご教示の程 よろしくお願いいたします

  • ウェブページの範囲指定部を印刷したい

    Windows使用時はブラウザが何であろうと、範囲指定してから印刷時に指定部分を印刷できたのですが、Macではどうすればいいのか分かりません。 プリントを押して設定画面を見ても範囲指定印刷をできそうな設定箇所が見つかりません。やり方を教えて下さい。 ブラウザはFirefox2です。

    • ベストアンサー
    • Mac
  • Firefoxから印刷で範囲の指定

    FirefoxからWebページを印刷するときに、 不要なカラー広告などを除いた範囲を指定して印刷したいときがありますが、 そういう風にできないのでそのまま全部印刷しています。 範囲を指定してブラウザから直接印刷する方法はありますか? アドオンでもいいです。 あれば教えて頂きたいです。

  • CSSとFirefox

    外部スタイルシートを使用して、xhtmlでサイトを制作したのですが、Internet Explorerのブラウザで見るのと、Firefoxで見るのとで違いが出てしまいます! Internet Explorerで見ると普通に写るのですが、Firefoxで見ると背景画像が写らない部分が出てしまいます! スタイルシートの記述に違いがあるのですか??詳しい方よかったら教えてください!お願いします。

専門家に質問してみよう