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

スポンサーリンク

印刷されないボタン作成

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

1.CSSでセレクタを作成

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

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

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

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

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

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

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

CSS
スポンサーリンク
色白おばけをフォローする

おすすめプログラミングスクール

「侍エンジニア塾」は、未経験者でも結果が出せるプログラミング学習サービスです。
専属のインストラクターとの対面かSkypeでのレッスンを通じてプログラミングスキルを身につけて頂き、就職や転職までサポートします。
「侍エンジニア塾」の『3つ』の大きな特徴

  1. 完全マンツーマンレッスン
  2. フルオーダーメイドカリキュラム作成
  3. 独立・起業・フリーランス支援

誰もが自分の技術で稼げる人材になるための教育プログラム
TECH::EXPERTのこだわりは「実務的な教育コンテンツ」と「徹底したサポート体制」の2つです。

  1. 現場で使える実践的な技術が身につく
    有名企業のエンジニアへヒアリングを重ね、1年かけて創り上げた教育プログラムがあなたを実務レベルの即戦力エンジニアへ高めます
  2. 学習方法はライフスタイルに合わせて学べます
    ・一気にエンジニアへ駆け上がる「短期集中スタイル」
    ・無理なく確実にエンジニアへ「週末集中スタイル」
    ・自分のペースで自由に学ぶ「オンラインスタイル」

TECH::CAMP(エンジニアスクール)。
【Webアプリケーションコース】
全くの未経験からWebアプリケーション開発に必要なスキルを全て学ぶことができます。
【iPhoneアプリコース】
全くの未経験から最新の開発言語Swiftを用いてiPhoneアプリ開発を学ぶことができます。
自分だけのiPhoneアプリつくって世界に向けてリリースしたい方には自信を持っておすすめできる内容です。

ソフトウェア開発日記
タイトルとURLをコピーしました