Webページを印刷するときに特定の要素を非表示にする方法【CSS】

印刷時に要素を非表示にする基本の考え方

Webページを印刷する際、「画面では必要だけど紙面には不要」という要素（ナビゲーションやボタンなど）を隠したいケースはよくあります。そんなときは、CSSのdisplay:noneやvisibility:hiddenを@media printと組み合わせて使うことで、印刷時だけ特定の要素を非表示にできます。

@media print を使った実装例

まず、スタイルシート内で@media printを定義し、非表示にしたいクラスに対してスタイルを指定します。

<style>
@media print {
    .noprint {
        visibility: hidden;
    }
}
</style>

次に、印刷したくない要素を、このクラスを適用した<div>タグで囲みます。

<div class="noprint">
    ここに非表示にしたい要素を記述します。
</div>

visibility:hidden と display:none の違い

visibility:hiddenは要素を見えなくしますが、レイアウト上のスペースはそのまま残ります。一方、display:noneは要素が存在しないものとして扱われるため、余白も詰めて表示されます。印刷物に空白を残したくない場合は、次のようにdisplay:noneを指定するのがおすすめです。

.noprint {
    display: none;
}

実装時の注意点

• CSS側で.noprint（クラスセレクタ）を指定している場合、HTML側もclass="noprint"と統一しましょう。id="noprint"と書くとスタイルが適用されません。
• 複数の箇所で同じ設定を使い回したい場合は、idよりもclassの方が便利です。
• ブラウザの印刷プレビュー機能で、意図どおりに要素が消えているか必ず確認してから公開しましょう。