【コピペOK】CSSで印刷時だけ非表示にする方法｜追従ヘッダー・画像・サイドバー対応も解説

はじめに：この記事でできること
CSSで印刷時に非表示にする基本方法（@media print）
よくある非表示にしたい要素とその対策
本文だけを横幅いっぱいに表示したいときの調整方法
1. 例：2カラム構成（メイン＋サイドバー）のレイアウト
2. 注意：印刷結果に「float」や「flex」が影響する場合も
印刷専用CSSファイルを分けて管理する方法
まとめ：CSSで印刷用スタイルを整えて、無駄のないプリントを実現しよう

はじめに：この記事でできること

Webサイトを運営していると、「画面上では見せたいけど、印刷のときには表示させたくない」という要素が出てくることがあります。

例えば以下のようなケース

追従ヘッダーが全ページに印刷されて邪魔になる
サイドバーや広告など、本文と関係ない情報まで印刷されてしまう
印刷用のレイアウトにしたいのに、思った通りに整わない

こういった印刷時の問題は、CSSだけで簡単に解決できます。

CSSの@media print を使って「印刷時にだけ特定の要素を非表示にする方法」について、初心者にもわかりやすく解説していきます。

この記事を読んでわかること

CSSで印刷時だけ表示を切り替える基本の書き方
実務でよくある「追従ヘッダー・サイドバー・画像」などを非表示にする方法
レイアウト崩れを防ぎながら、印刷に最適なスタイルを適用するコツ
印刷プレビューで確認できない場合の対処法

コピペできるコードも用意しているので、すぐに実践に使えます。
これから印刷対応をしたいWeb担当者・コーダーの方にとって、作業効率を高めるヒントになれば幸いです。

CSSで印刷時に非表示にする基本方法（@media print）

Webページの要素を「印刷時だけ非表示」にしたい場合、CSSのメディアクエリ @media print を使うのが基本です。

基本構文

@media print {
  .print_none {
    display: none;
  }
}

このコードは、印刷時に .print_none クラスが付いた要素だけを非表示にします。
つまり、次のようにHTML側でクラスを指定するだけで、印刷時にその要素が表示されなくなります。

<p>この段落は印刷されます。</p>
<p class="print_none">この段落は印刷時には表示されません。</p>

この方法を使えば、特定のパーツ（例：広告、SNSボタン、追従ヘッダーなど）を簡単に印刷時だけ非表示にできます。

実務での活用例

例えば、スマホ向けサイトでよくある「画面下部に追従する固定ナビ」は、印刷には不要な要素です。
以下のように .fixed-bottom に対して非表示スタイルを指定します。

@media print {
  .fixed-bottom {
    display: none;
  }
}

これで、印刷時にはナビゲーションが消え、本文だけをきれいに印刷することができます。

複数の要素を一括で非表示にするには？

複数の要素をまとめて非表示にしたい場合は、カンマ区切りでセレクタを指定すればOKです。

@media print {
  .print_none,
  .ad-banner,
  .footer,
  .sidebar {
    display: none;
  }
}

このようにしておけば、「広告バナー、フッター、サイドバーなど印刷に不要な要素」をまとめて非表示にできます。
この基本を押さえておけば、ほとんどの印刷レイアウト調整に対応できます。

よくある非表示にしたい要素とその対策

印刷時に非表示にしたい要素は、Webサイトの種類や構成によって異なりますが、共通してよく出てくるのが以下のような項目です。

固定ヘッダー・フッター（追従ナビゲーション）

画面上や下に常に表示されるヘッダーやナビゲーションは、印刷には不要なことがほとんどです。

@media print {
  .fixed-header,
  .fixed-footer {
    display: none;
  }
}

<header class="fixed-header">メインナビ</header>
<footer class="fixed-footer">固定フッター</footer>

これにより、画面上では便利な固定要素も、印刷には影響を与えずスッキリした見た目にできます。

サイドバーやウィジェット

サイドバーや関連リンク、最近の投稿など、印刷時にはノイズになりがちな補助コンテンツも、非表示にすることが一般的です。

@media print {
  .sidebar,
  .widget-area {
    display: none;
  }
}

広告バナー・SNS共有ボタン

広告やSNS共有用のボタンは印刷には不要どころか、読みにくさや無駄なインクの消費につながることも。

@media print {
  .ad-banner,
  .share-buttons {
    display: none;
  }
}

モーダルウィンドウ・ポップアップ・ツールチップ

JavaScriptで表示される案内やツールチップ、ポップアップなども、印刷時に表示されると不要なゴミ情報になってしまうことがあります。

@media print {
  .modal,
  .tooltip {
    display: none;
  }
}

ページネーションやパンくずリスト

ページネーション（ページ送り）やパンくずリストも、印刷には必要ない要素です。
特に複数ページにまたがる場合、途中のUIが挟まると読みにくくなります。

@media print {
  .pagination,
  .breadcrumb {
    display: none;
  }
}

こうした「ユーザーには便利でも、印刷には邪魔な要素」を整理して、印刷専用のスタイルを設けることで、読みやすく見栄えの良い印刷レイアウトを作ることができます。

本文だけを横幅いっぱいに表示したいときの調整方法

印刷時にはサイドバーやナビゲーションなどの補助的なコンテンツを非表示にして、本文エリアだけを用紙の横幅いっぱいに表示したいというケースはよくあります。

そのようなときは、単に不要な要素を非表示にするだけでなく、残したい要素の幅を調整することがポイントです。

例：2カラム構成（メイン＋サイドバー）のレイアウト

たとえば、以下のようなHTML構造だったとします。

<div class="container">
  <div class="col-main">本文エリア</div>
  <div class="col-side">サイドバー</div>
</div>

通常の画面表示では、CSSで以下のようなレイアウトになっているでしょう。

.col-main {
  width: 70%;
  float: left;
}
.col-side {
  width: 30%;
  float: right;
}

これを印刷用に調整するには、次のように記述します。

@media print {
  .col-side {
    display: none;
  }
  .col-main {
    width: 100%;
    float: none;
  }
}

ポイント

display: none; で不要なカラム（.col-side）を非表示に。
.col-main に width: 100%; を指定し、横幅をフルに使用。
float: none; を指定して浮動配置を解除。

こうすることで、印刷時には本文が見やすく、無駄な余白がない1カラムレイアウトになります。

注意：印刷結果に「float」や「flex」が影響する場合も

floatやflexを使っているレイアウトでは、印刷時に思わぬ崩れが起きることがあります。
印刷用のCSSでdisplay: blockやwidth: 100%、clear: bothなどを適用すると安定します。

@media print {
  .col-main {
    display: block;
    clear: both;
  }
}

印刷に最適なレイアウトは、画面表示とは分けて考えましょう。

印刷専用CSSファイルを分けて管理する方法

印刷用のスタイルは、画面表示用と分けて専用のCSSファイルとして管理することで、可読性・保守性が格段にアップします。
特に大規模なサイトや複数ページで一貫した印刷スタイルを適用したい場合は、この方法がおすすめです。

方法：media="print" を指定して読み込む

以下のように、HTMLの <head> 内で印刷専用のCSSファイルを読み込みます。

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

これだけで、通常の画面表示では読み込まれず、印刷や印刷プレビュー時のみ自動で反映されます。

画面用と印刷用を分けるメリット

コードがすっきりする
画面用のCSSと印刷用のCSSが混在せず、どちらも見やすくなります。
印刷用のルールを一括管理できる
サイドバーやヘッダーの非表示、本文の横幅調整、余白やフォントサイズの変更など、印刷専用ルールを明示的に分けて記述できます。
デバッグがしやすい
印刷時にだけ発生する崩れや不具合も、印刷用ファイルを個別に修正すれば済みます。

例：print.css に記述する内容

@media print {
  .header,
  .footer,
  .sidebar {
    display: none;
  }

  .main-content {
    width: 100%;
    float: none;
    font-size: 14pt;
    color: #000;
  }

  body {
    background: none;
    margin: 10mm;
  }
}