「これはヤバかったな」という遅刻エピソード

Firefox17の画面で、印刷を不可にしたいと思っています。

スタイルシートで設定(文末に記載)し、
印刷表示不可する箇所(divタグ内)に
STYLE="@media print"として登録しました。

前回確認時は、それで対応出来たと思っていたのですが、
この間確認したら、印刷時に画面が表示されてしまいました。

皆様の中で、解決策または、代替案をお持ちの方はおりますでしょうか?

cssの設定
----------------------------------
@media print {
display: none !important;
}
----------------------------------

A 回答 (1件)

>前回確認時は、それで対応出来たと思っていたのですが、


 そんなはずはありません。
[HTML]
 style属性には%StyleSheet;しか書けません!!
[CSS]
 対象となるセレクタが書かれていません。
 @media printはセレクタではありません。

<div class="header">
  <h1>タイトル</h1>
  <div class"abstract">
   <h2>要約</h3>
   ・・・
  </div>
</div>
に対して
div.header div.abstruct{display:none;}
と言う風に指定します。「ヘッダ部の要約部分は印刷しない」
最重要宣言は要らないでしょう。

STYLE="@media print"はさすがに論外(こんなもの書けない)
 ⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )
 で@media printと入力してチェックすればたちどころに分かる。
  文法解析エラーが発生しました [empty string]

<div class="@media print">
 としたならば、セレクタは
 div.@media.print{}
 *.@media.print{}
 .@media.print{}
 div[class="@media print"]{}
 *[class="@media print"]{}
の何れかの書き方になります。

<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css">
<link rel="styleSheet" type="text/css" media="print" href="./styleSheet/print.css">

と組み合わせる。
@media print{
 div.@media.print{display:none;}
}
でもよいが、@media print{}を理解できないブラウザもある。

★class="@media.print"なんてclass名はつけない。将来印刷することになったらHTMLまで書き直す羽目になる。
 <div class="aside"><!-- asideは本文と関係ない内容を示す -->
 ↓
 div.aside{display:none;}

 <div class="nav siteMap">
 ↓
 div.siteMap{display:none;}
 とするほうが良いでしょう。文書構造上意味のあるclass名やidをつけましょう。
 
    • good
    • 0
この回答へのお礼

お返事が遅くなってしまい申し訳ございませんでしたm(_ _)m

教えて頂いた通りの方法で解決できました。

ありがとうございます(^^)/~

お礼日時:2013/04/29 21:37

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!