ブラウザ（Google Chrome）で印刷用CSSを確認する

こんにちは。田村です。
ブラウザ（Google Chrome）で印刷用CSSを確認する場合、DevToolsを使うと便利です。

印刷用CSSを確認する

ブラウザの開発ツールの右上にある点3つ「DevToolsのカスタマイズと管理」→「その他のツール」 →「レンダリング」に移動します。

開いたパネルに、「CSSメディア タイプをエミュレート」という設定があるので「印刷」を指定します。

これで、印刷時のCSSが適用された状態になり調整が楽になります。
最終的には、「ファイル」→「印刷」（⌘ + P）で印刷プレビューを開き確認するとよいと思います。

印刷用にCSSを調整する

印刷用にCSSを調整したい場合は
@mediaを使って装飾を指定することができます。
https://developer.mozilla.org/ja/docs/Web/CSS/@media

@media print {
  a[href]::after {
     content: ' (' attr(href) ')';
   }
}