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

公開日: : 最終更新日:2013/11/19 CSS全般

印刷されないボタン作成

HTMLで作成した画面をブラウザー表示し、
その画面に印刷ボタンを設けて印刷できるようにします。
またそのボタンは印刷時には印刷されないように
CSSのメディアを利用して実現します。

1.CSSでセレクタを作成

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

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

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

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

また、メディアの「print」を別のものに変えれば
対応したメディアでは表示されなくなります。
CSS2.1で指定できるメディアは以下のものです。

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

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • 14 follow us in feedly

関連記事

no-img

スタイルシート(CSS)で背景色を変更する

スタイルシート(CSS)を使って背景色を変更します。 背景色を変更するには「background-

記事を読む

no-img

スタイルシート(CSS)で<h1>から<h6>タグにアンダーラインを引いてみる

少し使用しているテーマの<h1>~<h6>タグをスタイルシート(CSS)を使ってでアンダーラインを引

記事を読む

not_found

Google ChromeでCSSが反映されない場合の対処

Google ChromeでCSSが適応されない Internet Explorer では問題なく

記事を読む

a0001_013635

CSSで複数のclassを同時に指定する方法

CSSで複数のclassを同時に指定する HTMLで1つの要素に同時に複数のスタイルを指定したい場

記事を読む

no-img
スタイルシート(CSS)で<h1>から<h6>タグにアンダーラインを引いてみる

少し使用しているテーマの<h1>~<h6>タグをスタイルシート(CSS

no-img
スタイルシート(CSS)で背景色を変更する

スタイルシート(CSS)を使って背景色を変更します。 背景色を変更す

not_found
Google ChromeでCSSが反映されない場合の対処

Google ChromeでCSSが適応されない Internet

a0001_013635
CSSで複数のclassを同時に指定する方法

CSSで複数のclassを同時に指定する HTMLで1つの要素に同時

→もっと見る



PAGE TOP ↑