#author("2019-11-05T23:56:43+09:00","","")
#author("2019-11-05T23:59:06+09:00","","")
#navi(../)
* CSSでブラウザ画面のみ表示させる(印刷時は表示させない)、印刷時のみ表示させる(ブラウザ画面には表示させない) [#k8ee585b]
画面表示では、表示したいけど、印刷時は印刷対象にしたくない！という要望をCSSで実現することができます。~
例えば、印刷ボタンはブラウザ上の画面には表示したいけど、印刷時はボタンは印刷の対象外として消したい場合などです。~
以下、HTMLとCSSのサンプルを紹介します。

#htmlinsert(web-top.html)
#contents

* サンプルHTML&CSS [#tdb6f119]
以下のサンプルでブラウザ表示時と印刷時の印刷対象を制御することができます。~
#br
&ref(html.zip); UTF-8 LF
 <!DOCTYPE html>
 <html lang="ja">
 <head>
     <meta charset="UTF-8">
     <title>scrren and print</title>
     <style type="text/css">
         /* 印刷用 */
         div.print {
             display: none;
         }
         @media print {
             div.print {
                 display: block;
             }
         }
         /* 画面表示用 */
         div.screen {
             display: none;
         }
         @media screen {
             div.screen {
                 display: block;
             }
         }
         input.screen {
             display: none;
         }
         @media screen {
             input.screen {
                 display: block;
             }
         }
     </style>
 </head>
 <body>
 <h3>画面表示用と印刷用で表示非表示をCSSで実現するサンプル</h3>
 <div class="screen">画面表示のみ</div>
 <div class="print">印刷時のみ</div>
 <div>両方</div>
 <input class="screen" type="button" value="印刷" onclick="javascript:window.print();"/>
 </body>
 </html>
このHTML&CSSでは、h3の見出しと「両方」は、ブラウザ画面表示と印刷対象となります。~
''@media print''と''@media screen''の記述が今回の重要な点となります。~
divとinputに対し、printとscreenのclass定義を指定しています。~
''@media print''では、印刷だったら、display blockで表示対象とています。~
''@media screen''では、ブラウザ画面だった場合、display blockで表示対象としています。~

実際にブラウザでこのHTMLを開いた時のキャプチャになります。~
「画面表示のみ」が表示されており、「印刷時のみ」が表示されていません。~
また「印刷」ボタンも表示されています。
#ref(01.png)
#br

印刷ボタンを押下しPDF出力しました。~
以下のキャプチャように、「印刷時のみ」が印刷対象となっており、~
「画面表示のみ」と「印刷」ボタンが表示されていないのが確認できます。
#ref(02.png)

以上、CSSでブラウザ画面のみ表示させる(印刷時は表示させない)、印刷時のみ表示させる(ブラウザ画面には表示させない)~
ようにするHTMLとCSSのサンプルでした。

#htmlinsert(web-btm.html)
トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS