CSS/CSSでブラウザ表示のみ、印刷対象のみを制御する方法
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
#navi(../)
* 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で実現するサンプ...
<div class="screen">画面表示のみ</div>
<div class="print">印刷時のみ</div>
<div>両方</div>
<input class="screen" type="button" value="印刷" onclick...
</body>
</html>
このHTML&CSSでは、h3の見出しと「両方」は、ブラウザ画面表...
''@media print''と''@media screen''の記述が今回の重要な点...
divとinputに対し、printとscreenのclass定義を指定していま...
''@media print''では、印刷だったら、display blockで表示対...
''@media screen''では、ブラウザ画面だった場合、display bl...
実際にブラウザでこのHTMLを開いた時のキャプチャになります。~
「画面表示のみ」が表示されており、「印刷時のみ」が表示さ...
また「印刷」ボタンも表示されています。
#ref(01.png)
#br
印刷ボタンを押下しPDF出力しました。~
以下のキャプチャように、「印刷時のみ」が印刷対象となって...
「画面表示のみ」と「印刷」ボタンが表示されていないのが確...
#ref(02.png)
以上、CSSでブラウザ画面のみ表示させる(印刷時は表示させな...
ようにするHTMLとCSSのサンプルでした。
#htmlinsert(web-btm.html)
終了行:
#navi(../)
* 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で実現するサンプ...
<div class="screen">画面表示のみ</div>
<div class="print">印刷時のみ</div>
<div>両方</div>
<input class="screen" type="button" value="印刷" onclick...
</body>
</html>
このHTML&CSSでは、h3の見出しと「両方」は、ブラウザ画面表...
''@media print''と''@media screen''の記述が今回の重要な点...
divとinputに対し、printとscreenのclass定義を指定していま...
''@media print''では、印刷だったら、display blockで表示対...
''@media screen''では、ブラウザ画面だった場合、display bl...
実際にブラウザでこのHTMLを開いた時のキャプチャになります。~
「画面表示のみ」が表示されており、「印刷時のみ」が表示さ...
また「印刷」ボタンも表示されています。
#ref(01.png)
#br
印刷ボタンを押下しPDF出力しました。~
以下のキャプチャように、「印刷時のみ」が印刷対象となって...
「画面表示のみ」と「印刷」ボタンが表示されていないのが確...
#ref(02.png)
以上、CSSでブラウザ画面のみ表示させる(印刷時は表示させな...
ようにするHTMLとCSSのサンプルでした。
#htmlinsert(web-btm.html)
ページ名: