印刷用スタイルシートについて

  • 2018/8/30

データでのやり取りが主流になりつつある昨今ですが、
中にはそうでないケースもあって、

「このサイトのこのページだけ印刷したい」

なんてことも割とまだあります。
そんな時、サイトに共通でサイドメニューが入っていたりすると
紙のサイズに収まらなかったり、スタイルが崩れたりすることがあります。

そんな時に使うのがprint.cssです。

正確にはcssのmedia type指定の一つである「print」なんですが、
これは印刷時にのみ適用されるスタイルになります。
上記の例でいくなら

サイドメニューのIDかクラス[display:none;}

みたいに書けば、印刷の時はサイドメニューが非表示になります。

後、printもメディアクエリ―なので、head内に

<link href=”../css/print.css” media=”print”/>

とmediaの指定をしてやる必要があります。
もしくは他のスタイルとファイルを統一するのであれば、

@media print{}で囲む必要があります。

また、ファイル統一の場合はいいですが、
print.cssのようにファイルを分ける場合は、
既存のスタイルが印刷時に適用されない可能性があります。
その場合は、

<link href=”../css/style.css” media=”screen print”/>

みたいに既存のスタイルのmediaプロパティにprintを追加すると、うまく表示されます。

print.cssを使うと印刷時に改ページ位置を選んだり、
「印刷だとこうしたほうがきれいかも」みたいなところを他のスタイルへの影響を考えずに入力することができます。

 

印刷する機会はあまりないかもしれませんが、機会があったら是非ご活用ください!

この著者の最新の記事

関連記事

ピックアップ記事

  1. MayaとBlenderは、映画やアニメーション制作の分野で広く使用されている競合するソフトウェア…
  2. SEO(検索エンジン最適化)とAIチャットボットの組み合わせは、オンラインビジネスにおいて重要な役…
  3. . htaccessファイルは、ウェブサイトのパフォーマンスとユーザーエクスペリエンスを向上させる…
  4. . htaccessファイルは、ウェブサーバーで重要な役割を果たすファイルの一つです。 このファイ…
  5. SEO(検索エンジン最適化)は、オンラインビジネスの成功において非常に重要な要素です。 しかし、多…

株式会社タスタスHP

ページ上部へ戻る