Google Chromeでプリント状態をプレビューする方法

Google Chromeでメディアクエリを切り替えて、画面プレビューを見る方法です。

screenshot_0106

まずデベロッパーツールを表示します。

  1. ビューポート切り替えボタンを押します。
  2. 右側にあるドロワー表示ボタンを押し、ドロワーを表示します。
  3. ドロワーのタブの「Emulation」を選択し、「CSS media」にチェックを入れるとその下のメディアクエリが選択可能になります。
  4. メディアクエリを「print」などに変えます。

 

これでメディアクエリに対応したレンダリングに切り替わるはずです。