印刷プレビュー モードを強制する

  • [アーティクル]

CSS 印刷メディア クエリを使用すると、ページの印刷時にのみ適用される CSS スタイルを定義できます。

印刷スタイルをデバッグするには、 レンダリング ツールを使用して Web ページを強制的に印刷プレビュー モードにします。

ページを印刷プレビュー モードにするには:

  1. Todo デモ アプリなどの Web ページに移動します。

  2. Web ページを右クリックし、[ 検査] を選択します。 DevTools が開きます。

  3. クイック ビュー パネルまたはツール バーが DevTools の下部に表示されない場合は、フォーカスが DevTools にあるときに Esc キーを押します。 [クイック ビュー] パネルが開きます。

  4. クイック ビュー ツール バーで、[その他のツール (+)] ボタンをクリックし、[レンダリング] ツールを選択します。

    [ レンダリング ] ツールが [クイック ビュー ] パネルで開きます。

    [クイック ビュー] パネルの [レンダリング] ツール

  5. [エミュレーション CSS メディアの種類] セクションまで下にスクロールし、ドロップダウン リストで [エミュレーションなし] ではなく [印刷] を選択します。

    レンダリング ツールの [CSS メディアの種類のエミュレート] セクション

    Web ページは、印刷メディア CSS スタイルを適用してレンダリングされます。

  6. [要素] ツールで、印刷メディア CSS スタイルを編集します。

    印刷スタイルでレンダリングされるページ内の要素を検査する要素ツール

    CSS の変更の詳細については、「CSS の 表示と変更の概要」を参照してください。

印刷プレビュー モードの終了

  • レンダリング ツールの [エミュレーション CSS メディアの種類] セクションで、ドロップダウン メニューで [エミュレーションなし] を選択します。

    Web ページは、その画面スタイルが適用された状態でレンダリングされます。

関連項目

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、 Kayce Basques (テクニカル ライター、Chrome DevTools & Lighthouse) によって作成されています。

クリエイティブ・コモンズ・ライセンス この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。