スタッフブログ

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

2024年01月15日（月）

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

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

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

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

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

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

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートいたします。