情報を繋げる扉 ウェブトビラ

*

レスポンシブウェブデザインで印刷(プリント)に対応させるCSSの読み込み指定

      2018/06/18

-shared-img-thumb-GREEN_YA20140125_TP_V

レスポンシブ対応でサイト制作をしてる際、お客様からプリントしてもレイアウト崩れていているので何とかならないか?といった要望があったので対応した方法をメモっておきます。

お客様からいただくサイトの修正指示で、一旦プリントしたものに手書きで記入し、PDF化してメールで送ってくることもあります。また、お客様自身が社内で資料として使う場合もありますのでプリントに対応させることも需要としては充分に考えられますので、利便性を考えると対処しておくに越したことはありません。

印刷時に崩れていた原因

実は、私は今までmedia指定をallにしていました。allにしてしまえば全てのデバイスで読み込んでくれるので、特に細かい指定をする必要もありませんでした。昔htmlを習得した際の教材か何かにallにしておけばとりあえず大丈夫みたいな事が書いてあってずっとそうしてた経緯もありますが、レスポンシブに関して言えば、モバイル対応したcssが印刷時に効いてしまっているのでダメだったということです。

↓プリント時に崩れてしまったcssの読み込み指定

 

レスポンシブウェブデザインではデバイスの幅によって読み込むcssを切り替えています。私の場合良く利用するブレイクポイント(切り替え起点の幅)は769px以上をPC、768px以下をモバイルとしていました。そしてプリントするサイズは一般的にA4サイズが多いと思うのですが、どうやらこのサイズでプリントしようとするとピクセル幅的には768px以下と判断されてモバイル用のcssを読み込んでいるのです。

試しにブレイクポイントを変えて探ってみたら、A4サイズはプリント時の幅を539pxとしているようでした。※私の環境(Windows7 Chrome)になります。

まぁ行ってしまえばモバイル用のcssは効いているのですが、お客様的にはPCレイアウトのものをプリントしようとしているのに、モバイルレイアウトになっているので、崩れていると判断していたと言う事です。

解決手段

今回お客さま的にはPCレイアウトでプリントできれば良いとのことでしたので、プリント時に読み込むcssをPC用のものをそのまま読み込むように設定することで解決させました。

<link>要素内のmedia指定をしっかり指定してあげます。

ブレイクポイントを入れた<link>要素PC/MOBILEのmedia指定をscreenにして印刷時には読み込まないようにしています。印刷時に読み込みたいcssはPCと同じpc.cssを読み込むパスにしていますが、mediaの指定はprintを入れて、印刷時にのみ読み込むようにしました。印刷時は一律PCレイアウトですのでブレイクポイントの指定は不要です。

ファイルの中で分ける場合(2018/6/18 追記)

上記の方法は、PC用cssとモバイル用cssと印刷用cssとhtmlへ読み込む記述を分けていますが、トップ用や下層用のcssファイルを読み込んでファイルのなかでメディアクエリを使って幅によってスタイルを切り分けているやり方での対処方法です。

PCと印刷用のスタイルが同じであれば下記のようにメディアクエリで指定することもできます。

「screen and (min-width: 769px)」に「, print」を追記して769px以上のスタイルにはscreen(PC)とprint(印刷)が適用されるようになります。

 

最後に

今回わざわざこういった対応をすることになった原因は私のmedia指定の認識不足にあります。普段から表示させるデバイスを意識してmediaの指定をしている人にとっては特に問題にならないような事かもしれませんが、解決方法をググっている中で同じように悩んでいる人もいるようでしたので、私なりのやり方になりますが一つの方法として紹介しました。

レスポンシブウェブデザインのやり方など、人によってバラバラですが誰かのお役にたてれば幸いです。

※レスポンシブウェブデザインをレスポンシブに訳したり、プリントや印刷と書いてますが、気分で言い分けてるだけですのであしからず。

 - Web制作

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

jQueryの処理が二回起こってしまった原因

jQueryの処理でリストを6つ表示してボタンを押すごとに6つずつ表示させていこ …

WordPressでサイトを作成すると高くもなるし安くもなる

このエントリーはWeb初心者向けです。 WordPressを利用すれば簡単にでき …

MW WP Formでメールが飛ばないと思ったらformがいらなかった

メールお問い合わせのフォームはいつもcgiとか自社製システムとか使ってたのですが …

技術職のコストが高い理由?

お客様に見積もりを提案してこちらは一般的な料金で提案したにもかかわらず、高いと思 …

よく広告で見かける「格安ホームページ(サイト)制作」の中身とは

ネットを閲覧していると、制作の仕事をしている関係上よくホームページを「49,80 …

WordPressマルチサイト化で必要になった独自設定

とある案件でマルチサイト化したWordPressに初期状態である程度の設定を反映 …

利用頻度の高いWordPressのプラグイン紹介

私が普段仕事でWordPressのサイト構築をするにあたって良く使うプラグインを …

WordPressで条件分岐で使ってメタ情報とタイトルをページごとに出し分ける

WordPressでSEOを考慮して各ページごとにタイトルやメタ情報を条件分岐で …

WordPressプラグイン「Search Everything」を使ってキーワード検索をカスタマイズ

WordPressのキーワード検索機能について WordPressのデフォルトの …

no image
npmでのインストールが404エラーになってたが原因はregistryの設定ファイルだった

node-sassを使おうと思ってnode.jsをインストールし、npmを使って …