• ベストアンサー

どなたか助けてください。印刷用CSSについてです。。。

印刷用CSSを作っているのですが、消すのは出来たのですが、逆に出したいイメージor文字列の出したいのですが、.print2には何を入れればよいのでしょうか? @media print { .print { display: none } .print2 { ??? } }

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

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

 印刷されて使用されることが想定されるページには印刷用スタイルシートを用意しておくべきです。  特に難しいわけじぉなく、media="screen"、@medua screen{}にて、ディスプレイに表示したくない内容をdisplay:noneにして置けばよいだけです。  display:noneは、その子要素内での上書きできないので注意!! 参考になる使い方・・ 【参考サイト】 超安価な手作りモーター   http://iruka.la.coocan.jp/craft/motor/index.html

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

回答No.3

display:inlineとかdisplay:blockとか? その要素のデフォルトの値を指定しておけばいいと思いますよ。

全文を見る
すると、全ての回答が全文表示されます。
noname#83877
noname#83877
回答No.1

それは印刷する時に特定の要素を追加したいということでしょうか? もしそうならあらかじめhtml内にそれらの要素を記述しておき、@media screen を利用してdisplay:none;を指定しておけば良いだけです。 ですが印刷のためにHTMLを書き換えるのは、かなり慎重に行わなければHTMLの本質を見誤ってしまいます。 なので、実質的にはやらないほうがいいという返答になります。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 印刷用CSSの作り方。

    今、ホームページ作成をしているのですが、印刷する際に、○○.jpgを右側に印刷するようにしたいのですが、どのようにすればよいのか苦慮しています。 (ただし、印刷する際のみで、モニター上では○○は出ていない状態) CSSでprint要素を作れば良いのは分かっているのですが、別に 「.print { display: none }」 と言う、逆にモニター上では出ているのに、印刷しないようにするCSSが入っているので、これに付け加える感じにしたいのですが、どなたかお力を貸してください。

    • ベストアンサー
    • HTML
  • CSSで一部分だけ印刷指定→ページ全体を印刷できない

    ページ内の表部分だけを印刷したくて、こちらで教えていただき以下のCSSを設置しました。 <style media=screen> .prtOnly {display:none;} </style> <style media=print> .dspOnly {display:none;} </style> html部分は、印刷したい表をclass="prtOnly"で囲んでいます。これで表部分だけの印刷は問題ないのですが、これを設置することによりページ全体を印刷することができなくなってしまっています。 どう解決したらよいでしょうか? クライアントにいわれて気づいてしまったので、できたら急ぎでお願いします。

    • ベストアンサー
    • HTML
  • 印刷曜CSSがどこかおかしい・・・非常に困っています。。。

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <link rel="stylesheet" type="text/css" media="print" href="print.css"> <style type="text/css"> <!-- .style1 { font-family: "MS Pゴシック"; font-size: 12px;} --> <style type="text/css" media="print"> .print { display: "none" } </style> </style> </head> <body> <span class="style1"><p class="print"><p class="print2"><a onclick="window.print();return false;" href="#" >おおお</a></p></p></span> とソースに記載すると、「おおお」が印刷されないと思うのですが、なぜか、「おおお」が印刷されてしまいます。 どうすれば、「おおお」を印刷されなくなるのでしょうか?

    • ベストアンサー
    • 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
  • 印刷制限ができません

    まず~Print.cssとか言う名前でファイル作ってください。(Printってとこの名前はなでもいいですよ)で、そのfileの中に BODY{ display:none } と書きます。後は保存してください。 で、次に印刷させたくないページのHEADの部分に <LINK rel="stylesheet" href="Print.css" type="text/css" media="Print"> って書きます。 という方法を実行したんですが なぜか印刷できてしまいます。 どの点が間違っているのかわかる人いましたら ご指摘お願いいたします。

  • 印刷時に消したいjavascriptがある

    印刷用のcssを読み込んでいるのですが、 困ったことに、javascriptで無理やり表示している要素がありまして、 そのソースは外部サイトを読み込んでいるので、 こちらサーバーで指定したcssのdisplay:noneは一切ききません。 そこで、印刷時には<script></script>を消すみたいな ことをしたいのですが、そのようなことを可能でしょうか。 javascirptでなくてもphpでも大丈夫です。 cssのmediaとprintのように何かフラグが取得できればいいのですが・・・ ご教授お願いいたします。

  • CSSを最近始めました。実は、2P目の印刷表記がおかしいのです。

    CSSを最近始めました。実は、2P目の印刷表記がおかしいのです。 HPの画面上は、全て、見栄えを揃えましたが、いざプリントすると、2枚目の表記がおかしいです。1枚目は変な所から下が空欄になり、2枚目の上部分が空いて、2枚目にCSSで表をくんでますが、途中からきれたまま下部(2枚目の下部)で終わり、そのまま最後の3枚目にはフッター部分のみが表示されて、終わります。2枚目の表記が途中から切れて終わってしまう感じです。サファリ以外は、すべてこの表示になってしまいます。 プリント用のCSS表記がおかしいのでしょうか? 下記に、プリント用CSSでつくってあるものを記しました。 何か足りないもの、もしくは間違っていることがありましたら、教えていただきたいのですが・・・ また、対処法などはありますでしょうか? プリントCSS--------------------------------- @charset "UTF-8"; /* CSS Document */ /*print*/ @media print { body { background:#fff; color:#000; font-size:12pt; zoom:100%;/*ie*/ background-image:none; background-color:none; } .body { background:#fff; color:#000; zoom:100%;/*ie*/ background-image:none; background-color:none; } no-image { display:none; } color-txt { color:#000 !important; } table, tr, td { border-collapse:collapse; border-spacing:0; border:1px solid #666; } .wrapper, .sidenavi, .main-all, .main-light3 .footer { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .wrapper { margin: 0; padding: 0; border: 0; background: transparent; } .sidenavi { display: none; } } ---------------------------------ここまで html 冒頭--------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> body,td,th { font-family: MS Pゴシック, Osaka, ヒラギノ角ゴ Pro W3; } body { background: #c5d7e5 url(..○●●○k.gif) repeat-x; margin-top: 0px; } --> </style> <style type="text/css" media="print"> <!-- body{ background:white; } --> </style> <link href="top_files/base.css" rel="stylesheet" type="text/css" media="all"> <link href="top_files/print.css" rel="stylesheet" type="text/css" media="print"> <link href="top_files/fg1_top.css" rel="stylesheet" type="text/css" media="all"> <title> ○●●○</title> ---------------------

  • 印刷 印刷用css css print.css

    cssを勉強中なんですがいまいち印刷用cssがよくわかりません。 このcssを適用させれば背景で設定した画像もすべてwebと同じように印刷されるのでしょうか? 印刷用のcssを読み込むことはわかるんですがこの印刷用のcss(仮にprint.css)には何を 記述すればいいのでしょうか? どうもいろんなサイトを見てもよくわかりません。 よろしくお願いします。

  • jqueryのcssを動的指定する方法

    いつもお世話になっております。 現在containsの文字列指定が変数で行えないかしらべています 下記のような指定が行えるのはわかっています。 $("label:contains('テスト')").css("display","none"); しかし下記のような指定はできません var moji="テスト"; $("label:contains(moji)").css("display","none"); このように変数に設定した文字を使ってcontainsに指定する方法はあるのでしょうか? できないという回答か、もしくは他の方法があるよという場合でもご教授いただけたらありがたいです。 よろしくお願い致します。

  • 範囲指定印刷での位置(css)

    media printを使って、印刷範囲を指定したいです。 サイトは大きく以下のように構成されています。 サイト全体を囲む div#base(サイズ固定、センターぞろえ) div#baseの中に、 ヘッダ #header(上段、左右いっぱい) メニュー .area_menu(中央段左。float:left) メイン .main(中央段右。float:right) フッタ #footer(下段、左右いっぱい) となっています。 上記各要素の中に子要素は諸々入っていますが、上記の大箱たちはこれ以上入れ子になってはいません。 ※例えば、「メニューとメイン」を合わせて別の箱でくくったりはしていません。 このうちの、メイン部分のみ、印刷したいです。 現在、 @media print{ .area_menu{display:none;} #footer{display:none;} #header{display:none;} .main{width:100%; float:none; color:#666;} } としています。 確かにメイン以外の部分は消えるのですが、本当にそのままの位置で消えただけという感じで、メインの左側に大きな余白ができてしまっています。 印刷サイズを拡大・縮小してみてもやはり同じで、左側の白い部分(メニューがあった部分)も「印刷物」として認識してしまっています。 印刷範囲からはみ出るくらい拡大すると、左に余白を残した状態で、右側は印刷可能範囲からはみ出て次ページに行ってしまいます。 どうすれば、「メイン部分だけ」を左に持ってこれるでしょうか? 検索したのですが見つからなかったため、 適当に指定のfloatの部分を右や左にしてみたり、clearを入れてみたり、「div#baseを読んでるのか?」と思い、div#baseをdisplay:noneしてみたり…。 初心者なりに色々試してはみたのですが、どうにもうまくいきません。 float:rightがかかっているボックスを、左寄せにして印刷する方法をお願いします(><

    • 締切済み
    • CSS