レスポンシブWebデザインの印刷について - WEBデザイン・プログラミング - 専門家プロファイル

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

注目のQ&AランキングRSS

対象:WEBデザイン・プログラミング

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

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

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

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

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

回答:1件

井上 みやび子

井上 みやび子
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は、役に立った!

この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件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

英語圏の大学で通用するエッセイの書き方指導

論理的なエッセイを英語で書くとはどういうことかを体験

大澤 眞知子

Super World Club

大澤 眞知子

(カナダ留学専門家・英語教育者)

レッスン・教室

マンツーマン「女性が私らしく働くためのスキルアップ講座」

ワークライフバランス実現。女性が私らしく働くためのスキルを身に付けます。

松井 千恵美

桜ことスクール

松井 千恵美

(国際マナー専門家)

掛川 幸子

株式会社イーアンドシーエスサポート

掛川 幸子

(現場力強化・EQ人材育成スペシャリスト)

セミナー 「「教える」を教える、トレーナー育成講座」
掛川 幸子
(現場力強化・EQ人材育成スペシャリスト)