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

  • 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. アメーバブログからWordPressへ投稿記事を移行する機会がありましたので、それについてご紹介し…
  2. 今回で3回目のおすすめプラグインのご紹介です。 Classic Editor このプラ…
  3. WordPressで使えそうなプラグインのご紹介 その2ということで、またいくつか紹介したいと思い…
  4. WordPressでサイトを構築、改修するときに、標準の機能だけでは中々自分の思い描く通りにサイト…
  5. 皆さんはwordpressのテーマは何を使っているでしょうか?有料、無料ともにいろんなものが多く作ら…

株式会社タスタスHP

ページ上部へ戻る