Bootstrapで印刷時だけ表示・非表示を切り替える方法完全ガイド！d-print-noneとd-print-blockを初心者向けに解説
生徒
「Webページを印刷すると、ボタンやメニューまで全部紙に出てしまうんですが、消す方法はありますか？」
先生
「ありますよ。Bootstrapには、印刷のときだけ表示を切り替えるための便利なクラスが用意されています。」
生徒
「印刷のときだけ、というのができるんですか？」
先生
「はい。d-print-none や d-print-block を使うと、とても簡単に実現できます。順番に見ていきましょう。」
1. Bootstrapの表示・可視性・レスポンシブユーティリティとは
Bootstrapには、画面の表示を簡単にコントロールできる「表示ユーティリティ」が用意されています。 これは、要素を表示したり隠したりするための仕組みです。 専門的には可視性やレスポンシブ対応と呼ばれますが、難しく考える必要はありません。 「この場面では見せる」「この場面では隠す」という指示を、クラス名だけで書ける便利な機能です。
印刷時だけ使えるクラスも用意されており、Webページを紙に印刷するときに不要な情報を消したり、 逆に印刷専用の情報を表示したりできます。 これにより、請求書や申込書、説明資料などをきれいに印刷できます。
2. 印刷時だけ非表示にする d-print-none の基本
d-print-none は「印刷するときは表示しない」という意味のBootstrapクラスです。 普段ブラウザで見ているときは表示されますが、印刷プレビューや実際の印刷では消えます。 例えるなら、普段は机の上に置いてあるメモを、コピーするときだけ引き出しにしまうようなイメージです。
<button class="btn btn-primary d-print-none">
印刷時には表示されないボタン
</button>
この例では、ボタンは画面上では見えますが、印刷すると紙には出てきません。 操作ボタンやナビゲーションメニューなど、印刷に不要なものに使うと便利です。
3. 印刷時だけ表示する d-print-block の基本
d-print-block は「印刷するときだけ表示する」というクラスです。 普段の画面では見えませんが、印刷するときだけ現れます。 これは、紙に印刷したときにだけ必要な注意書きや補足説明に向いています。
<p class="d-none d-print-block">
この文章は印刷したときだけ表示されます。
</p>
ここでは d-none を一緒に使っています。 d-none は「通常は表示しない」という意味です。 それに d-print-block を組み合わせることで、印刷時限定の表示が完成します。
4. 印刷用の注意書きや署名欄を作る例
実務では、印刷時に署名欄や確認欄を表示したいケースがよくあります。 Web画面では不要ですが、紙では重要な情報です。 d-print-block を使うと、こうした要素も簡単に実装できます。
<div class="d-none d-print-block mt-4">
<p>ご署名：</p>
<p>日付：</p>
</div>
このように、印刷専用の要素を用意しておくと、 Webと紙の両方で使いやすいページを作れます。
5. d-print-noneと通常表示クラスの組み合わせ方
Bootstrapの強みは、クラスを組み合わせられる点です。 例えば、画面では表示し、スマートフォンでは非表示、 さらに印刷時も非表示、という指定も可能です。 ただし、初心者のうちは印刷に関する指定だけ覚えれば十分です。
<div class="d-print-none">
<img src="/img/sample150-100.jpg" alt="装飾用画像">
</div>
装飾目的の画像は、印刷するとインクを無駄にすることがあります。 そのため、印刷時に非表示にするのはよくある使い方です。
6. 印刷プレビューで必ず確認する重要性
d-print-none や d-print-block を使ったら、必ず印刷プレビューで確認しましょう。 ブラウザの印刷画面を見ることで、意図した通りに表示が切り替わっているか確認できます。 これは、料理でいう味見のようなものです。 作っただけで満足せず、最後にチェックすることで失敗を防げます。
7. Bootstrapで印刷対応を行うメリット
Bootstrapを使うと、難しい設定を書かなくても、 クラス名を付けるだけで印刷対応ができます。 CSSを一から書く必要がなく、初心者でも安心です。 特に、請求書、申請書、学習用資料など、 印刷される前提のページでは大きなメリットがあります。
d-print-none と d-print-block を覚えておくだけで、 Webと紙の両方に対応したページを作れるようになります。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
