CSSのメディアタイプ完全ガイド！画面表示と印刷用スタイルを切り替える方法

メディアタイプ（screen・print）を指定する方法

先生と生徒の会話形式で理解しよう

生徒

「ウェブサイトを紙に印刷しようとしたら、メニューボタンや広告まで印刷されて見づらくなってしまいました。どうにかできませんか？」

先生

「それはＣＳＳのメディアタイプという機能を使えば解決できますよ。画面で見るときと印刷するときでデザインを使い分けられるんです。」

生徒

「印刷のときだけ特定のものを消したり、色を変えたりできるんですね！具体的にはどう設定するんですか？」

先生

「主にｓｃｒｅｅｎとｐｒｉｎｔという言葉を使います。基本的な使い方をマスターしましょう！」

1. メディアタイプとは何かを分かりやすく解説

メディアタイプとは、ウェブサイトが表示される「媒体」の種類を指定するためのルールのことです。私たちは普段、パソコンやスマートフォンの「画面」を通してサイトを見ていますが、時にはその内容を「紙」に印刷して手元に残したいこともあります。しかし、画面上では便利なナビゲーションメニューやキラキラした広告も、紙の上ではただの邪魔な要素になってしまうことが少なくありません。

そこでＣＳＳ（スタイルシート）には、表示する相手が画面なのか、それともプリンターなのかを判断して、デザインを自動で切り替える機能が備わっています。これを利用することで、画面ではフルカラーの豪華なデザインを楽しみ、印刷するときはインクを節約するために背景を白くし、必要な文章だけを読みやすく配置するといった「おもてなし」が可能になります。プログラミング未経験の方でも、この切り替えの考え方を覚えれば、ワンランク上のウェブサイトが作れるようになります。

2. 画面表示用の指定にはscreenを使おう

メディアタイプの中で最も頻繁に使われるのが「ｓｃｒｅｅｎ（スクリーン）」です。これはその名の通り、パソコンのモニター、スマートフォンの画面、タブレットなど、光を発するディスプレイ全般を指します。私たちが普段目にするウェブサイトのデザインのほとんどは、このスクリーン用として作られています。

ＣＳＳでメディアクエリという仕組みを使い、「アットマークメディア・ｓｃｒｅｅｎ」と記述することで、「これは画面で見ているときだけの特別なルールですよ」とブラウザに伝えることができます。背景に動画を流したり、複雑なアニメーションを動かしたりといった、画面ならではの装飾はすべてこのスクリーン用の設定の中に書き込んでいくことになります。


<style>
/* 画面で見ているときだけ適用されるスタイル */
@media screen {
    .sample-box {
        background-color: #e3f2fd;
        border: 2px solid #2196f3;
        padding: 20px;
        color: #0d47a1;
        font-weight: bold;
    }
}
</style>

<div class="sample-box">
    <i class="bi bi-display"></i> このボックスは画面表示用のスタイルが適用されています。
</div>

ブラウザ表示

3. 印刷用の指定にはprintを使って読みやすくする

もう一つ、非常に重要なのが「ｐｒｉｎｔ（プリント）」です。これは、ユーザーがブラウザの印刷機能を使って紙に出力しようとしたときに適用されるルールです。ウェブサイトには、クリックするためのボタンや、ページを移動するためのメニューなど、印刷しても機能しない要素がたくさんあります。これらをｐｒｉｎｔ用のＣＳＳで非表示に設定することで、紙面をスッキリと整理できます。

また、ウェブサイトの背景に濃い色が塗られている場合、そのまま印刷するとプリンターのインクを大量に消費してしまいます。ｐｒｉｎｔ指定を使って、印刷時だけ背景を白、文字を黒に設定し直すことは、ユーザーにとって非常に親切な設計となります。プログラミングの初心者の方は、「画面用」と「印刷用」という二つの衣装を準備して、状況に合わせて着せ替えるイメージを持つと分かりやすいでしょう。


<style>
/* 画面では目立つ色にする */
@media screen {
    .print-check {
        background-color: #ffc107;
        padding: 15px;
    }
}

/* 印刷するときだけ適用される特別なルール */
@media print {
    .print-check {
        background-color: white; /* 背景を白くしてインク節約 */
        border: 1px solid black; /* 枠線だけ描く */
        color: black;
    }
    .no-print {
        display: none; /* 印刷したくない要素を消す */
    }
}
</style>

<div class="print-check">
    <p>印刷プレビューで見ると、背景が白くなり枠線が表示されます。</p>
</div>
<div class="no-print">
    <p><i class="bi bi-eye-slash"></i> この部分は印刷されません。</p>
</div>

ブラウザ表示

4. リンクされたCSSファイルでメディアタイプを指定する方法

これまではＣＳＳの中に書き込む方法を紹介しましたが、実はＨＴＭＬでＣＳＳファイルを読み込むときにもメディアタイプを指定することができます。外部のスタイルシートファイルを読み込むときに使う「リンク」というタグに、「メディア」という設定項目（属性）を追加するだけです。

例えば、「ｓｃｒｅｅｎ．ｃｓｓ」という画面用ファイルと、「ｐｒｉｎｔ．ｃｓｓ」という印刷用ファイルを作っておき、それぞれを適切なメディアタイプで読み込むように設定します。こうすることで、ファイルの管理がしやすくなり、印刷のときだけ必要な命令をまとめて読み込ませることができるようになります。大規模なサイトを作るプロの現場でもよく使われる手法ですので、基本の形を覚えておきましょう。


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

<div class="p-3">
    <p><i class="bi bi-info-circle"></i> HTMLの読み込み段階で振り分けることもできます。</p>
</div>

5. 印刷時に特定の要素を消すメリットと活用例

なぜ印刷時に要素を消す必要があるのでしょうか。最大の理由は「紙のスペースの有効活用」です。ウェブページには、サイドバーやバナー広告、ＳＮＳのシェアボタンなど、印刷しても意味をなさない情報が多く含まれています。これらを「ディスプレイ：ノーネ」という命令で消すことで、本来読者が紙で読みたかったメインの文章や図表を、より大きく、欠けることなく印刷できるようになります。

具体的な活用例としては、レシピサイトの「材料と手順だけを印刷する」機能や、ニュースサイトの「記事本文だけを印刷する」設定などが挙げられます。地図サイトでも、周辺の検索バーなどを消して地図本体だけを大きく印刷できるように工夫されています。こうした配慮があるサイトは、ユーザーからの満足度も高く、検索エンジンからも「質の高いコンテンツ」として認識されやすくなります。

6. 印刷用フォントサイズの調整と改ページ制御

印刷用のスタイルで忘れてはいけないのが、文字の大きさと「改ページ」のコントロールです。画面上ではスクロールしてどこまでも読み進められますが、紙には必ず「切れ目」があります。中途半端な場所で文章が途切れて、次のページの一行目だけが残ってしまうような現象を「未亡人行」と呼びますが、ＣＳＳを使えばこれを防ぐことができます。

「ブレイク・ビフォア」や「ブレイク・アフター」という命令を使うと、特定の項目の前で必ず新しいページに切り替えるといった指定が可能です。また、印刷時は画面よりも少し文字を小さくしたり、明朝体のような「紙で読みやすい書体」に切り替えたりするのも良いアイデアです。パソコンに詳しくない方が印刷ボタンを押したときに、まるで本のように美しく整った書類が出てきたら、きっと感動してくれるはずです。


<style>
@media print {
    h2 {
        break-before: page; /* H2見出しの前で必ず改ページする */
        color: black;
        font-family: serif; /* 印刷に適した明朝体系フォント */
    }
    p {
        font-size: 11pt; /* 印刷に最適な単位ptを使う */
        line-height: 1.5;
    }
}
</style>

<section>
    <h2>印刷時の改ページ設定</h2>
    <p>このセクションがページの途中にあっても、印刷時は新しいページの先頭から始まります。</p>
    <img src="/img/sample150-100.jpg" alt="印刷サンプル">
</section>

ブラウザ表示

7. 背景画像と背景色の印刷を許可するかどうかの設定

実は、ブラウザの標準設定では「背景の画像や色は印刷しない」ようになっています。これはインク節約のための親切心なのですが、デザインによっては背景色がないと内容が伝わらないこともあります。例えば、グラフの色分けや、重要な警告メッセージの背景色などです。これを強制的に印刷させたい場合には、「プリント・カラー・アジャスト」という特殊な設定をＣＳＳに書き込みます。

ただし、これを乱用するとユーザーに大量のインクを使わせてしまうため、本当に必要な部分だけに絞って使うのがマナーです。プログラミングの初心者の方は、「基本は白背景で黒文字」を原則にしつつ、どうしても必要なアクセントがあるときだけこの機能を使う、というバランス感覚を身につけていきましょう。最新のブラウザであれば、この設定を一行加えるだけで、画面とほぼ同じ色合いを紙の上に再現できます。

8. 印刷プレビューでこまめに確認する習慣をつけよう

メディアタイプの設定が正しくできているかを確認するには、実際に紙に印刷する必要はありません。ほとんどのブラウザには「印刷プレビュー」という機能があり、パソコンの画面上で印刷結果をシミュレートできます。コードを一行書き換えるたびにプレビューを開いて、「このメニューは消えたかな？」「文字の大きさはちょうど良いかな？」とチェックする習慣をつけましょう。

最近のグーグルクロームなどの開発者用ツールを使えば、画面を見たまま「今だけ印刷用のＣＳＳを適用した状態にする」といった便利な切り替えも可能です。パソコンを触り始めたばかりの方にとっては少し高度な操作かもしれませんが、こうしたツールを少しずつ使いこなせるようになると、ウェブ制作がどんどん楽しく、スムーズになっていきます。画面の向こう側にいる読者が、紙に印刷してまで大切に読もうとしてくれる姿を想像しながら、丁寧なスタイル作りを続けていきましょう。

2026年最新スキルアップ・実践セミナー