CSS全般

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

投稿日:2013/08/27 更新日:

印刷されないボタン作成

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

1.CSSでセレクタを作成

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

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

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

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

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

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

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

当サイトのおすすめ記事

レンタルサーバー 1

当サイトは約5年間、さくらのレンタルサーバで運用させて頂きました。 何かトラブルがあったわけではないのですが、WordPressの表示速度を速くしたくてSSD搭載のレンタルサーバーで運用してみることに ...

プログラミング 2

SQLでIFを使わずに条件分岐する SQLでIFを書けばWHERE句の内容を変えて検索できますが、条件ごとに同じようなSQLを 複数回書くのは面倒なので、1行で分岐できないかと言う事でSQLを作って見 ...

SQLServer 3

SQLServerで発生するエラーコードをSQLで取得する SQLServerで発生したエラーコードの内容を メッセージが定義されているテーブルから取得します。 エラーコードを取得するSQL SQLs ...

4

SQLServerでテーブル型を戻り値とする関数を作る SQLServerではINT型やVARCHAR型などを返す関数と同様に ユーザー定義テーブル型を戻り値とする関数を作成できます。 テーブル型を戻 ...

5

アフィリエイトで即効成果を出す アフィリエイトで成果を出す、なかなか難しいですよね。 サイトをいくつも立ち上げてすでにコツをつかんでいる人なら チョチョイっとやっていけるんでしょうけど。 でも実際はこ ...

-CSS全般
-

Copyright© ソフトウェア開発日記 , 2017 AllRights Reserved.