私は最近、ウェブサイトの印刷スタイルシートに取り組んでおり、それを微調整する効果的な方法に途方に暮れていることに気付きました。画面上のレイアウトを操作するためのリロードサイクルを設定することは1つのことです。
しかし、印刷しようとすると、そのプロセス全体がはるかに困難になります。
ここで見逃しているツールはありますか? WebKitのインスペクターには「これはページングされたメディアであるかのように」チェックボックスがありますか? Firebug(shudder)でできる魔法はありますか?
Chromeのインスペクターにはそのためのオプションがあります。
次に、エミュレーションドロワーでMediaを選択し、CSS mediaチェックボックスをオンにします。
これでうまくいくはずです。
更新:DevToolsのメニューが変更されました。右上隅にある[3つのドット]メニューをクリックして、[その他のツール]をクリックすると表示されます。 >レンダリング設定>メディアのエミュレート>印刷。
ソース: Google DevToolsページ *
HTMLを使用してPDFアプローチを使用せずに、印刷されたウィンドウをできるだけ制御したい場合、@ media画面を使用してデバッグする-最終的なcssの@media print
最新のブラウザでは、@media query
でinchesおよびptsを使用して、印刷時に何が起こるかをすばやく視覚的に確認できます。
@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
html { width:8.5in; }
body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
...
}
ブラウザに「インチ」が表示されると、何が期待できるのかがよくわかります。このアプローチでは、印刷プレビューの方法がすべて終了するはずです。すべてのプリンターはpt
およびin
ユニットで動作し、@ mediaテクニックを使用すると、何が起こるかをすばやく確認し、それに応じて調整できます。 Firebug(または同等のもの)は、そのプロセスを完全に促進します。 @mediaに変更を追加すると、media = "print"
属性を使用して、リンクされたCSSファイルに必要なすべてのコードが得られます。@ media画面ルールを参照ファイルにコピー/貼り付けするだけです。
幸運を。ウェブは印刷用に構築されていません。ブラウザーで見られるものと同じスタイル、スタイル、すべてのコンテンツを配信するソリューションを作成することは、時には不可能な場合があります。たとえば、主に1280 x 1024のオーディエンス向けの流動的なレイアウトは、常にニースで端正な8.5 x 11レーザープリントに簡単に変換できるとは限りません。
PurusalのW3Cリファレンス: http://www.w3.org/TR/css3-mediaqueries/
Chrome 48Renderingタブ内で印刷スタイルをデバッグできます。
インスペクターの右上にあるメニューアイコンをクリックし、Rendering Settingsをクリックします。
編集
Chrome 58の場所はWebインスペクター>メニュー>その他のツール>レンダリングに変更されました
Chrome v41にはありますが、わずかに異なる場所にあります。
HTMLコードのメディア属性を切り替えることなく印刷スタイルシートをデバッグする簡単な方法があります(もちろん、指摘されているように、幅/ページの問題は解決しません)。
これで印刷CSSが表示され、ページを無期限にリロードできます。完了したら、「機能の保持」のチェックを外してリロードすると、画面CSSが再び表示されます。
HTH。
Rflnogueiraによる回答に続いて、現在のChrome設定(40.0。*)は次のようになります。
デバッグ中にmedia="screen"
を使用してブラウザに印刷スタイルシートを表示するだけです。印刷プレビュービューでは、通常のブラウジングモードと同じレンダリングエンジンが使用されるため、それを使用して正確な結果を得ることができます。
ページのコンテンツを参照する印刷スタイルシートを使用して新しいウィンドウに書き換える印刷機能がある場合は、紙の上でどのように見えるかをよりよく理解でき、デバッグすることができますfirebugも好きです。
JavaScript/jqueryでこれを行う方法の例を次に示します
$("#Print").click(function () {
var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
a.document.open("text/html");
a.document.write("<html><head>");
a.document.write('<link rel="stylesheet" href="css/style.css" />');
a.document.write('<link rel="stylesheet" href="css/print.css" />');
a.document.write("</head><body>");
a.document.write($('#Content').html());
a.document.write('</body></html>');
a.document.close();
a.print();
});