編集長ブログ―安田英久

印刷用CSS(@media print)を確認・デバッグする方法

画面用とは別に印刷用のCSSを設定しているけれども、どうも表示がおかしい。そんなときにこの方法

今日は、CSSの話題を。画面用とは別に印刷用のCSSを設定しているけれども、どうも表示がおかしい。そんなときに、どのCSS指定に問題があるのか、確認する方法を解説します。

印刷時にだけ適用されるCSSを設定する方法おさらい

まず、印刷用CSSのおさらいです。

ディスプレイで表示されたときとは別に、印刷されるときだけに適用されるCSSを指定するには、次の4つの方法があります。

  • CSSファイルを別に作ってlink media="print"で読み込む

    画面用CSSとは別に印刷用CSSを別ファイルとして作り、次のようにして読み込む。

    <link rel="stylesheet" type="text/css" media="print" href="print.css">
    HTMLのheadセクションに記述
  • style要素にmedia属性でprintを指定する

    HTML上で、<style>要素にmedia="print"を指定してスタイル定義を記述する。

    <style type="text/css" media="print">
      印刷用CSSの定義を指定する
    <style>
    HTMLのheadセクションに記述
  • CSSファイルを別に作って@import printで読み込む

    画面用CSSとは別に印刷用CSSを別ファイルとして作り、次のようにして読み込む。

    @import url("print.css") print;
    既存のCSSファイル内に記述、またはHTMLのheadセクションに記述した<style>で
  • CSSファイルはmedia="all"で読み込んで、@media printで指定する

    レスポンシブと同様にCSS3のMedia Queriesを使って既存のCSS内で印刷用CSSを指定する。

    @media print{
      印刷用CSSの定義を指定する
    }
    既存のCSSファイル内に記述、またはHTMLのheadセクションに記述した<style>で

印刷用CSSをデバッグするには

前述のようにしたCSSは、通常の画面表示には反映されません。そのため、どのCSS指定がどこに反映されているのかを確認したり、うまくいっていない部分を見つけて修正したりするのは大変です。

しかし、次のようにすれば、印刷用CSSを簡単にデバッグできます。

Google Chromeの場合

※2016-07-15 最新のインターフェイスにあわせて修正

  1. ページを右クリックして[要素を検証](または[F12]キー)で、Developer Toolsを表示する(左上のモバイル表示アイコンをオフにしておくこと)。
  2. 画面下のタブの左にある[⋮]をクリックして[Rendering]を選び、Renderingタブを表示する。
  3. [Rendering]タブに切り替え、下のほうにある[Emulate media]にチェックを入れ、ドロップダウンリストで「print」を選ぶ。
※Developer Toolsを閉じれば元の表示に戻ります。

Firefoxの場合

  • コンソールを使う方法
    1. [Shift]+[F2]キーを押す。
    2. ウィンドウ下にコンソールが表示されるので、次の内容を入力する
      media emulate print
    3. [Enter]キーを押す
※元の表示に戻すにはページをリロード
  • Web Developerを使う方法
    1. ご存じWeb Developerアドオンをインストールする。
    2. Firefoxの[カスタマイズ]でWeb Developerツールバーを表示する
    3. ツールバーの[CSS]>[メディアタイプごとの表示]>[Print(プリンタ用)]を選ぶ。
※元の表示に戻すにはページをリロード
◇◇◇

残念ながら、IEではprintモード用のCSSをデバッグする方法は発見できませんでした。ご存じの方いらっしゃいましたら、ぜひコメントなどで教えていただければと。

この記事が役に立ったらシェア!
tweet61はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

HCI
人間が使用するための対話型システムのデザイン、評価、実装に関連し、それら周辺の主 ... →用語集へ

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore