webページをユーザーが印刷する際、印刷対象となる要素を絞り込みたくなる場合があります。例えばメニュー、ヘッダー、フッター、サイドバーなどのwebページを便利にするためのパーツを隠してメインのコンテンツのみを印刷できるようにする、といった具合です。これを簡素なCSSで実装する方法を紹介します。
CSSの例が次です。#print-tgtの部分には任意のセレクタを使えます。
@media print {
*:not(#print-tgt):not(:has(#print-tgt)):not(#print-tgt *){
display: none;
}
}
印刷時にだけ表示を変更するために@media printを使います。 @media print は印刷時にだけ適用されるCSSルールを指定するためのものでwebページの通常表示には影響しません。
*:not(#print-tgt):not(:has(#print-tgt)):not(#print-tgt *) というセレクタで、#print-tgt というIDが付与された要素以外の全てを非表示にしています。
*:not(#print-tgt)は#print-tgt要素自体を非表示にしないようにします。*:not(:has(#print-tgt))は、#print-tgtを含む親要素が印刷対象から除外されるのを防ぎます。*:not(#print-tgt *)は、#print-tgtの子要素も印刷対象から除外されないようにしています。
このようにすると#print-tgt で指定した要素とその中に含まれるコンテンツだけが印刷されるようにできます。このコードの特に便利な点は印刷対象要素のdisplayのスタイルを壊さないところにあります。表とdivなどが混在していると個々のdisplayを指定するのは難しいです。これを印刷対象の要素のスタイルを変えないことで回避しています。
例ではIDで指定していますが、特定の要素が指定できるならばセレクタは自由です。適宜#print-tgtの部分を変えることで自由に使えます。
