CSSで印刷されないボタンを作る

HTMLで作成した画面をブラウザー表示し、その画面に印刷ボタンを設けて印刷できるようにします。

印刷されないボタン作成
- 1.CSSでセレクタを作成
- 2.ボタンを印刷時に非表示

印刷されないボタン作成

HTMLで作成した画面をブラウザー表示し、その画面に印刷ボタンを設けて印刷できるようにします。

またそのボタンは印刷時には印刷されないようにCSSのメディアを利用して実現します。

1.CSSでセレクタを作成

.CSSでセレクタを作成します。

<HEAD>
    <STYLE type="text/css">
        @media print{
             .print_button{ display: none;}
        }
    </STYLE>
</HEAD>

2.ボタンを印刷時に非表示

ボタンを印刷時に非表示にします。

<BODY>
    <FORM>
        <INPUT TYPE="button" class="print_button" value="このページを印刷" onClick="window.print();" />
    </FORM>
</BODY>

これで画面には表示されるが、印刷結果には印刷されないボタンができあがりました。

また、メディアの「print」を別のものに変えれば対応したメディアでは表示されなくなります。

CSSで指定できるメディアは以下のものです。

all	すべての環境
screen	パソコン画面
tty	文字幅が固定の機器
tv	テレビベースのウェブブラウザ
projection	プロジェクタ
print	プリンタ
handheld	携帯用機器
braille	点字出力機器
embossed	点字プリンタ
speech	音声出力機器

複数指定する場合は「,」で区切って指定します。

<HEAD>
    <STYLE type="text/css" media="print,projection">
        @media print,projection{
             .print_button{ display: none;}
        }
    </STYLE>
</HEAD>