CSS/CSSでブラウザ表示のみ、印刷対象のみを制御する方法

CSSでブラウザ画面のみ表示させる(印刷時は表示させない)、印刷時のみ表示させる(ブラウザ画面には表示させない) †

画面表示では、表示したいけど、印刷時は印刷対象にしたくない！という要望をCSSで実現することができます。
例えば、印刷ボタンはブラウザ上の画面には表示したいけど、印刷時はボタンは印刷の対象外として消したい場合などです。
以下、HTMLとCSSのサンプルを紹介します。

CSSでブラウザ画面のみ表示させる(印刷時は表示させない)、印刷時のみ表示させる(ブラウザ画面には表示させない)
サンプルHTML&CSS

↑

サンプルHTML&CSS †

以下のサンプルでブラウザ表示時と印刷時の印刷対象を制御することができます。

html.zip UTF-8 LF

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>scrren and print</title>
    <style type="text/css">
        /* 印刷用 */
        div.print {
            display: none;
        }
        @media print {
            div.print {
                display: block;
            }
        }
        /* 画面表示用 */
        div.screen {
            display: none;
        }
        @media screen {
            div.screen {
                display: block;
            }
        }
        input.screen {
            display: none;
        }
        @media screen {
            input.screen {
                display: block;
            }
        }
    </style>
</head>
<body>
<h3>画面表示用と印刷用で表示非表示をCSSで実現するサンプル</h3>
<div class="screen">画面表示のみ</div>
<div class="print">印刷時のみ</div>
<div>両方</div>
<input class="screen" type="button" value="印刷" onclick="javascript:window.print();"/>
</body>
</html>

このHTML&CSSでは、h3の見出しと「両方」は、ブラウザ画面表示と印刷対象となります。
@media printと@media screenの記述が今回の重要な点となります。
divとinputに対し、printとscreenのclass定義を指定しています。
@media printでは、印刷だったら、display blockで表示対象とています。
@media screenでは、ブラウザ画面だった場合、display blockで表示対象としています。

実際にブラウザでこのHTMLを開いた時のキャプチャになります。
「画面表示のみ」が表示されており、「印刷時のみ」が表示されていません。
また「印刷」ボタンも表示されています。

印刷ボタンを押下しPDF出力しました。
以下のキャプチャように、「印刷時のみ」が印刷対象となっており、
「画面表示のみ」と「印刷」ボタンが表示されていないのが確認できます。

以上、CSSでブラウザ画面のみ表示させる(印刷時は表示させない)、印刷時のみ表示させる(ブラウザ画面には表示させない)
ようにするHTMLとCSSのサンプルでした。

CSS/CSSでブラウザ表示のみ、印刷対象のみを制御する方法

オンライン数 : 1

ご利用にあたり

公開サイト

最新の30件

今日の30件

人気の30件

CSSでブラウザ画面のみ表示させる(印刷時は表示させない)、印刷時のみ表示させる(ブラウザ画面には表示させない) †

サンプルHTML&CSS †