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 | プロジェクタ |
プリンタ | |
handheld | 携帯用機器 |
braille | 点字出力機器 |
embossed | 点字プリンタ |
speech | 音声出力機器 |
複数指定する場合は「,」で区切って指定します。
<HEAD> <STYLE type="text/css" media="print,projection"> @media print,projection{ .print_button{ display: none;} } </STYLE> </HEAD>