web-dev-qa-db-ja.com

印刷用CSSで特定の部分のみを表示する方法は？

大量のデータ、テーブル、コンテンツを含むページがあります。選択されたものをほとんど表示しない印刷バージョンを作成したいと考えています。

印刷のためだけに別のページを書く代わりに、「@ media print」のCSSの機能について読んでいました。

まず、どのブラウザがそれをサポートしていますか？これは内部機能なので、最新のブラウザのみがサポートしていれば問題ありません。

いくつかのDOM要素に「印刷可能」クラスのタグを付けることを考えていましたが、基本的には「表示：なし」を「印刷可能」クラスの要素以外のすべてに適用しました。それは可能ですか？

どうすればこれを達成できますか？

編集：これは私がこれまでに持っているものです：

<style type="text/css">
@media print {
    * {display:none;}
    .printable, .printable > * {display:block;}
}
</style>

しかし、それはすべてを隠します。これらの「印刷可能な」要素を表示するにはどうすればよいですか？

編集：今否定的なアプローチを試す

<style type="text/css">
@media print {
    body *:not(.printable *) {display:none;}
}
</style>

これは理論的には良さそうですが、機能しません。多分「ない」は高度なCSSをサポートしていません...

cssprintingcss-selectors
31
Nathan H

開始 ここ 。しかし、基本的にあなたが考えているのは正しいアプローチです。

おかげで、私の質問は実際になっています：CSSをクラスとそのすべての子孫要素に適用するにはどうすればよいですか？ 「display：block」を「printable」ゾーンにあるものに適用できるようにします。

要素がdisplay:none;に設定されている場合、そのすべての子も非表示になります。しかし、いずれにせよ。他のすべての子にスタイルを適用する場合は、次のようにします。

.printable * {
   display: block;
}

これにより、「印刷可能」ゾーンのすべての子にスタイルが適用されます。

13
Strelok

Chart.jsで生成されたグラフの印刷に興味があったので、ここに行きました。ページの他のすべてのコンテンツなしで、ページから直接（「window.print」を実行するボタンを使用して）チャートを印刷したかったのです。

だから、私はここの答えからテクニックを使用して近づきました： アスタリスクを介して適用された表示プロパティをオーバーライドできないのはなぜですか？ 。

「アスタリスク」を単独でではなく「body」要素に適用する必要があります。そこで、OP（ネイサン）が質問に追加したCSSの例を使用して、次のように変更しました。

<style type="text/css">
@media print {
    body * {display:none;}
    .printable, .printable > * {
    display: block !important;
  }
}
</style>

次に、「印刷可能」クラスをチャート自体に追加します。

<canvas id="myChart" class="printable" width="400" height="400"></canvas>

これにより、「印刷」ボタンがクリックされたときに（これを介して）チャートを除く印刷出力のすべてのページ要素が削除されました。

<script>
    myChart.render();
    document.getElementById("printChart").addEventListener("click",function(){
        window.print();
    });     
</script>

だから、おそらくこれはグーグル経由でこの質問に行く人を助けるでしょう。

4
Rick Hellewell

簡単な方法：

<style>
    .print-only{
        display: none;
    }

    @media print {
        .no-print {
            display: none;
        }

        .print-only{
            display: block;
        }
}
</style>
3
Polle

ほぼすべてのブラウザでサポートされています。 mediaタグでlink属性を使用すると有利な場合があります。

一部のルールでdisplay: none;を使用することは、状況を処理する適切な方法です。

2
Daniel A. White

印刷しない要素を非表示にすることをお勧めします。

HTML

<h1 class="no-print" >Welcome Just Screen</h1>
<div> I want print this section :)</div>
<div class="no-print">It's display only on screen</div>

CSS

@media print {     
    .no-print {
        display: none;
    }
}
2
pixparker

ブラウザでリンクなどを表示したい場合は、印刷したくない。さらに、印刷されたページにのみ表示されるロゴとレターヘッド情報がいくつかあります。これはうまくいくようです：

例：

CSS：

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

HTML：

<div class="noPrint" id="this_is_not_printed"  >
   <a href=links.html>
</div>
<div class="onlyPrint"  id="this_is_only_seen_on_printer" >
   <img scr=logo.png >
   <img scr=letterhead.png >
</div>
2
oleviolin