印刷用スタイルシートの指定にもメディアクエリーが使えます - 専門家回答 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。
井上 みやび子

井上 みやび子
Webエンジニア

2 good

印刷用スタイルシートの指定にもメディアクエリーが使えます

2013/09/06 10:40

初めまして。Webエンジニアの井上です。

印刷時のスタイルシートは、@media を 'print' にして設定します。

旧来から、以下のようなタグで印刷用のスタイルシートを指定する手法がありました。
linkタグに「media="print"」を指定するのがポイントです。

---------------------------------
<link type="text/css" rel="stylesheet" href="/css/print.css" media="print">
---------------------------------

上記のように印刷用に別のCSSファイルを指定する方法もまだ使用できますが、メディアクエリー(「@media ...」での指定)を使用してCSSファイルの末尾に以下のように追加指定すると、同じように印刷時のみ適用されるスタイルシートの指定が可能です。

---------------------------------
@media print {
body {
width: 960px;
}
/* 印刷時に画面と変更するスタイルを定義 */
}
---------------------------------

このとき、スタイルシート読み込み用のリンクタグに「media="screen"」の指定があれば削除して下さい。
なお、現在印刷時にCSSが全く適用されていないのであれば、この指定が付いてしまっているのかもしれません。これは、「ディスプレイ上だけでこのCSSファイルを適用する」という指定です。



あと、ご質問はもしかしたら印刷用スタイルシートと幅960px以上で設定したスタイルシートを共通して指定する方法でしたでしょうか?
実は私はやった事が無いのですが、理屈としては、半角カンマで @media の条件をつなぐ事ができる筈なので、試してみて下さい。

---------------------------------
@media print, screen and (min-width: 961px) {
/* 印刷時と、961px以上のみに適用するスタイル */
}
---------------------------------

ただ、レスポンシブWebデザイン用のCSS構成は幅広をデフォルト(=メディアクエリー無しがデフォルト)にし、スマホなどのスタイルを「max-width: 480px」...と指定していきますので、上の「min-width」の指定は構成を複雑にしてしまいます。
このため、先にご説明した2つの方法のいずれかを使用する方がすっきりしておすすめです。

CSS
印刷

(現在のポイント:3pt このQ&Aは、役に立った!

この回答の相談

レスポンシブWebデザインの印刷について

スキル・資格 WEBデザイン・プログラミング 2013/09/06 09:38

レスポンシブWebデザインの印刷についてなんですが
レスポンシブWebデザインでホームページをなんとか作成したのですが、印刷をしてみるとcssが適用されていない状態で印刷されてしまいます。960px以上の固定レイアウト設定の状態で印刷するにはどのようにすれば可能でしょうか?

アドバイス宜しくお願い致します。

plussmanさん (東京都/53歳/男性)

このQ&Aに類似したQ&A

ホームページの印刷について plussmanさん  2013-10-15 14:55 回答1件
リキッドデザインの必要性とwidthの主流について よっきーさん  2012-03-26 18:36 回答1件
ホームページの自動ジャンプについて plussmanさん  2013-10-08 04:54 回答1件
ホームページを作ってほしい spyauctionさん  2013-03-05 22:25 回答2件