印刷用CSSスタイルシートをデバッグしたい

    印刷用のスタイルシートを修正したいとき、修正箇所などを確認する方法。

    Google Chromeで簡単に確認できるのを知りました。

    1)デベロッパーツールを開く

    2)右側のXの横にあるメニューをクリックして、More tools > Renderingを選択

    3)Renderingが開くので、「Emulate CSS Media」にチェックを入れ、[print]が選択

    4)そうすると、ブラウザの表示が印刷プレビュー時と同じになります。
    ※デベロッパーツールを閉じると、元のスクリーン表示に戻ります。

      SNSでもご購読できます。