/ / CSSを使って印刷内容を隠す - css、printing

CSSを使用して印刷上のコンテンツを非表示にする - css、印刷

特定のdivとその内容以外のすべてを隠す簡単な方法を探しています。

<html>
<head></head>
<body>
<div class="header">...</div>
<div class="menu">...</div>
<div class="content">...</div>
<div class="footer">...</div>
</body>.
</html>

だから、たとえば、私だけを印刷したい場合 div.content、私はこのようにするでしょう:

.header, .menu, .footer {
display: none;
}

そしてレイアウトが複雑な場合、それは面倒になります。 CSSでこれを行うもっと簡単な方法はありますか?

回答:

回答№1は26
@media print {
.noPrint {
display:none;
}
}

今度はクラスを適用する必要があります noPrint あなたが印刷で隠したい要素に。


特に印刷専用のスタイルシートを使用し、そのメディア属性を print.

例:

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

回答№2の6

Webページを印刷するときの動作を定義する別のCSSファイルを割り当てます。

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

そしてそのファイルの中でちょうど定義する:

.header, .menu, .footer { display: none; }

回答№3の6

私はそれをcss3のやり方でやった:疑似クラスではなく直接の先祖を使う(子供たち)

/* hide all children of body that are not #container */
body > *:not(#container) {
display: none;
}
/* hide all children of #container that are not #content */
#container > *:not(#content) {
display: none;
}
/* and so on, until you reach a div that you want to print */
#content > *:not(#print_me) {
display: none;
}

これにより、非常に複雑なレイアウトでも、印刷したいもの以外のすべてを削除できます。 :htmlの将来の変更に注意するので、ここではあまり効率的ではありません。


回答№4の場合は0

あなたはクラスを使うことができます。

.classHide{display: none}

使用している言語によっては、== trueの場合、ヘッダー、メニュー、フッターにクラスを追加できます。

だからあなたは別のcssファイルを使う必要はありませんでした。


回答№5の場合は0

HTMLの構造(およびIE 6ではこれがサポートされていないため、サポートする必要があるブラウザ)によっては、最上位のdivをすべて非表示にして、表示したい部分をいくつか表示することもできます。

body > div {
display: none;
}

#content {
display: block;
}