web-dev-qa-db-ja.com

オンラインツールを使用してブラウザの印刷出力をテストする方法は？

私は（いつものように）@media printルールを使用して、Webページの印刷がオンラインバージョンとどのように異なるかを指定しました。これは非常にうまく機能しますが、テストは本当に難しいです。私が通常しなければならないことは次のステップです：

  1. screenとprintに異なるスタイルを作成します。
  2. 画面モードでページを開始します
  3. ページを印刷します。例： PDFプリンターに。
  4. 結果を見てください。
  5. 間違った動作をするルールを見つけてください。

私がやりたいこと（しかし、どのブラウザでもそれを行うことができませんでした）：

  1. screenとprintに異なるスタイルを作成します。
  2. 画面モードでページを開始します
  3. プレビュー印刷モードに入ります（例：Opera、Firefoxが利用可能）
  4. Firebug（Firefox）やDragonfly（Opera）などの利用可能なツールを使用して、DOMと現在のスタイルを検査します。
  5. その場でCSSを変更し、ページをリロードして、結果とDOMをもう一度確認します。

同様の結果を得るために利用できるブラウザまたはブラウザ、プラグイン、プロセスの組み合わせはありますか？ファイルの構成を変更する方法についてアイデアがあり、希望する結果を得るための最小限の変更で、大歓迎です。

cssbrowserweb-inspector
17
mliebelt

「WebDeveloper」（ https://addons.mozilla.org/en-US/firefox/addon/web-developer/ ）と呼ばれるFirefoxプラグインには、「メディアタイプごとにCSSを表示する」オプションがあります。

9
Pino

Chromeデベロッパーツールにはこの機能があります。

  1. テストするページのChrome開発者ツール]を開きます。
  2. まだ開いていない場合は、ドロワーを開きます。 （押す Esc。）
  3. Emulationタブを開きます。
  4. 左側のメニューでメディアをクリックします。
  5. CSSメディアをチェックし、選択ボックスからprintを選択します

ソース： https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types

16
jordanbtucker

Rails 3.1アセットパイプラインを使用して特定のcssを条件付きで使用する ）に触発された問題の別の解決策を見つけました。これがどのように機能するかです。

  • メインHTMLファイルで、スタイルシートに次のディレクティブを使用します。

    <link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />

  • スタイルシート内のすべてのルールを分離します。

    • 画面と印刷に適しています（スタイルシート：application.css）
    • 画面にのみ適切（スタイルシート：screen.css）
    • 印刷にのみ適しています（スタイルシート：print.css）

  • Webページの印刷のテスト中に、メインHTMLファイルのスタイルシートを切り替えます。

    <link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="print" rel="stylesheet" type="text/css" />
<link href="print.css" media="screen" rel="stylesheet" type="text/css" />

media="print|screen"の2行目と3行目の切り替えに注意してください。

その結果、メインのHTMLファイルを呼び出して、通常の状態で印刷した場合にどのように表示されるかを確認できるようになりました。通常使用するすべてのツール（Firefox Firebug、Chrome Developer Tools、Opera DragonFly、...）は通常どおり動作するため、確認できます。あなたのDOM、ボックスを見て、その場でCSSを変更し、ページをリロードしてください。

私にとってはかなりうまくいきます。いくつかの欠点に遭遇した場合は、戻ってきてそれも書き留めます。

1
mliebelt

印刷用 Google Chrome拡張機能を試してみましたか。

ボタンを追加し、クリックするだけでWebページのPDFを生成するその素晴らしい拡張機能。それがあなたの現在のプロセスよりも簡単かもしれないことを願っています。

1
Katti

Print＆Screen CSSルールを個別のファイルで指定する場合、Chrome開発ツールを使用してこれを非常に簡単に行うことができます。ページをロードして開発ツールを開きます。[要素]ビューから、 media = "print"行を編集して、media = "all"と表示されるようにします。

たとえば、次のようにスタイルシートをリンクするとします。

<link href="/static/global/css/theme.css" media="all" rel="stylesheet" type="text/css" />
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css"   />

変化する：

<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />

読むために：

<link href="/static/global/css/print.css" media="all" rel="stylesheet" type="text/css" />

これで、ブラウザウィンドウのコピーに印刷スタイルが適用されます。他のWebページと同じように、スタイルと要素をナビゲートできます。

1
Cameron Roberts

これは、印刷レイアウトを一般的なスタイルの変更にする必要がある場合に、印刷のスタイリングに役立つことがわかった方法です。

  1. @media print {}を使用して印刷スタイルをフレーム化する印刷スタイルシートを作成します
  2. そのスタイルシートを最後に適用する
  3. 印刷スタイルで作業している間、印刷スタイルを囲む行を一時的にコメントアウトします
  4. 慣れた方法でFirebugとWebDeveloperを使用する
  5. メディアブラケットのコメントを解除します

何かのようなもの：

    
/* @media print { */

    #sidebar {display:none;}

/* } */
1
Kevin Wiliarty