【簡単】印刷時に特定の箇所を非表示にしたい！CSSを追加すればOK
コードのこと
WEBサイトを複数枚のかみに印刷したら、どのページにも追従ヘッダーが表示されてる…！消したい…！
WEBサイトを印刷した時の表示を調整したいこと、ありますよね。
非表示の設定、実は、CSSをちょっと追加するだけで簡単にできちゃうんです。
ぜひ試してみてくださいね！
CSSのメディアクエリで特定の要素を印刷時にだけ非表示にする
印刷時に特定の要素を非表示にする最も簡単な方法は、CSSのメディアクエリを使うことです。以下のコードを見てみましょう。
@media print {
.no-print {
display: none;
}
}このコードをCSSファイルに追加するだけで、クラス名がno-printの要素は印刷時に表示されなくなります。簡単ですよね！
実際の例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>印刷時に非表示</title>
<style>
@media print {
.no-print {
display: none;
}
}
</style>
</head>
<body>
<header class="no-print">
<h1>これは印刷されません</h1>
</header>
<main>
<p>この内容は印刷されます。</p>
</main>
</body>
</html>実際には以下のような設定をすることが多いかと思います。
@media print {
header {
display: none;
}
#sidebar {
display: none;
}
}上のような設定を行うことで印刷上でヘッダーやサイドバーが非表示になりすっきりします。
印刷時に特定の箇所を非表示にする方法のまとめ
この記事のポイントをまとめます。
- @media print {}というメディアクエリで印刷時のみのCSS設定ができる
- @media print {}のメディアクエリ内で要素にdisplay:none;を設定すれば印刷時のみ非表示にすることが可能です。
いかがでしたか？
CSSをちょっと追加するだけで、印刷時に特定の要素を非表示にすることができました。
これで、印刷がもっとスッキリとしたものになりますね。ぜひ試してみてくださいね！
