印刷曜CSSがどこかおかしい・・・非常に困っています。。。

解決済

質問者：goldwin510
質問日時：2009/01/27 14:11
回答数：3件

<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">



<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>

とソースに記載すると、「おおお」が印刷されないと思うのですが、なぜか、「おおお」が印刷されてしまいます。

どうすれば、「おおお」を印刷されなくなるのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： dezimac
回答日時：2009/01/27 14:30

失礼ながら、それだとHTMLの文法もかなり無茶苦茶になっていて自ら複雑怪奇にしてしまっています。

例）

…前略…
<style>
@media screen {/* 画面表示用 */
　.sty1{font-family: "ＭＳＰゴシック";font-size: 12px;}
}
@media print {/* 印刷用 */
　.sty1{display: none;}
}
</style>
</head>
<body>
<p class="sty1">画面では表示されるけど、印刷されないよ。</p>
<p>試してみて</p>
…後略…

外部CSS使った方が印刷用と画面用で別々に管理できてスッキリとして楽かも。
<link rel="stylesheet" type="text/css" href="画面用外部スタイルシート.css" media="screen">
<link rel="stylesheet" type="text/css" href="印刷用外部スタイルシート.css" media="print">

画面用外部スタイルシート.css
.sty1{font-family: "ＭＳＰゴシック";font-size: 12px;}

印刷用外部スタイルシート.css
.sty1{display: none;}

http://hp.vector.co.jp/authors/VA022006/css/medi …
http://allabout.co.jp/internet/hpcreate/closeup/ …

この回答への補足

すいません。外部用は良いですね。ですが・・・両方とも、sty1ではどちらを適用して良いのか分からなくなる気がします。なので、どのように「おおお」に適用すればよいのでしょうか？

<div class="print"><a onclick="window.print();return false;" href="#" >このページを印刷する</a></div>
<p></p>
<div class="screen"><img src="index_rogo.jpg"></div>

画面用
.screen{font-family: "ＭＳＰゴシック";font-size: 12px;}
印刷曜
.print{display: none;}

と記載してのですが、うまく行きませんでした。

補足日時：2009/01/27 15:57

通報する

- 0
- 件

通報する

No.3

回答者： t_ohta
回答日時：2009/01/27 14:39

styleタグが入れ子になっているので

- 0
- 件

通報する

No.2

回答者： himajin100000
回答日時：2009/01/27 14:36

二つの点で問題があります

http://www.ne.jp/asahi/minazuki/bakera/html/sgml …
http://www.satoshii.org/markup/notes/2003/12#dat …

p要素はp要素を子として持てないので
http://www.w3.org/TR/REC-html40/struct/text.html …

<span class="style1"><p class="print"><p class="print2"><a onclick="window.print();return false;" href="#" >おおお</a></p></p></span>

は
<span class="style1"><p class="print"></p><p class="print2"><a onclick="window.print();return false;" href="#" >おおお</a></p></p></span>

と補完されます。print2の要素を含みません。一番最後のp要素終了タグは文法エラーとなるでしょう。

よって、(まだ間違っているんですが)正しく書いても「おおお」は消えません。

また、CSSのdisplayプロパティの値はnoneであって"none"ではありません

http://www.w3.org/TR/CSS21/visuren.html#propdef- …

display:none;
は正解ですが
display:"none";
は誤りです。

参考までに
contentプロパティを示しておくと
http://www.w3.org/TR/CSS21/generate.html#propdef …
<string>をとり、
http://www.w3.org/TR/CSS21/syndata.html#value-de …
これはダブルクオートかシングルクオートでくくれる、と書いてあります。(改行とか、ダブルクオートが中にある場合とかについても書かれているが解説省略)