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

プログラミング CSS

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

スポンサーリンク

印刷されないボタン作成

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>
スポンサーリンク
スポンサーリンク
CSS
このサイトをフォローする
スポンサーリンク
ソフトウェア開発日記
タイトルとURLをコピーしました