カスタマイズされたプリントスタイルシートを数分で作成します

以前に見たことがあります：あなたは美しいレイアウトを設計し、誰かがプリントをオフにしてあなたのオフィスに歩いて行き、あなたはプリンターによって恐ろしく誤って伝えられているあなたのハードワークのサイトで縮みます。 Webデザインの印刷バージョンは、期待するものではありません。彼らはいくつかの微調整といくつかのステージングを取ります。しかし、印刷ビューをセットアップする方法を理解して、予想どおりにコンテンツが出てくるのは、それを手に入れるとそれほど困難ではありません。 この記事では、Webサイトでコンテンツを印刷するためだけにStyleSheetをセットアップする方法を紹介します。 WordPressサイトを出発点として使用します。これは非常に人気のあるフレームワークであるため、同じ原則を適用する限り、これはどのサイトでも機能します。

クイック注：Webを完璧に印刷する簡単な方法はありません。そこに飛び込んで、調整したい各要素を作業する必要があります。まず、ページに行って印刷することから始めて、始めたものを確認します。次に、必要なものと変更する必要があるものによって、各要素または構造セクションを下に分割します。時間がかかりますが、それだけの価値があります。

印刷版が必要ですか？

印刷されたバージョンのサイトを構築する前に最初に自問することは、私がそれを必要とするかどうかです。私の中の細心のデザイナーはキックインする傾向があり、ほとんどの場合、「はい」に傾いています。しかし、多くの場合、あなたのウェブサイトの性質と目的に応じて、プリントスタイルシートの必要はありません。 また、人々があなたのサイトからページを印刷するとき、彼らの目標は何ですか？多くの場合、彼らはあなたのコンテンツを手にしたいだけで、それだけです - 彼らはすべてのグラフィック、きれいなレイアウト、ヘッダー、サイドバーなどを望んでいません。 （そして、彼らは彼らの高価なインクを必須要素ではない要素に使用したくないかもしれません。）したがって、実際に必要なものを考えてください。

印刷に関する考慮事項

私は常に自分のテキストを黒に変換し、プリンターがシェーディングが必要ないことを理解するようにします（これは大きなインクの節約です）。また、ピクセルのフォントサイズからポイントに変わります。フォントサイズを一致させようとしている場合、これはちょっとした挑戦になる可能性がありますが、ベースがあると仮定して、pxptからPX

pixels =>ポイント

6px => 5pt

7px => 5pt

8px => 6pt

9px => 7pt

10px => 8pt

11px => 8pt

12px => 9pt

13px => 10pt

14px => 11pt

15px => 11pt

16px => 12pt

17px => 13pt

18px => 14pt

19px => 14pt

20px => 15pt

21px => 16pt

22px => 17pt

23px => 17pt

24px => 18pt

コンテンツをターゲットにする

WordPressには通常、このように見える構造が組み込まれています。

1. ヘッダー
2. コンテンツ
3. コメント
4. サイドバー
5. フッター

すべてのページには、CSSで簡単にターゲットにできる構造要素があります。サイトにこの正確な構造がない場合でも、重要なのは、目的のために印刷スタイルシートを単純にカスタマイズすることです。 クラスの場合、IDまたは.headerを使用したセクションの#Headerを使用してCSSの各構造をターゲットにします。 最後に、そしておそらく最も重要なこととして、特定のCSSスタイルが適切に適用されたときに定義するために@media printcssを使用することになります。 たとえば、印刷スタイルからすべてのコンテンツを削除するには、Style.cssでこれと同じくらい簡単なことをします。 [sourcode言語=” css”] @media print { #header {display：none;} #content {展示：なし;} #comments {display：none;} #sidebar {展示：なし;} #footer {display：none;} .site-description {display：none;} .site-title {display：none;} } [/sourcecode] これは、WordPressのTwenty Twelveテーマで機能し、最初からきれいできれいな空白のスレートを提供してくれます。 Straggler要素を削除するのに苦労している場合、最も簡単なことは、ブラウザの要素を右クリックして、ソースドキュメントで見つけることです。 Chromeには、その要素のコードに向かってジャンプする「要素の検査」機能があり、問題の要素を非常に簡単に見つけることができます。 IDまたはクラスの定義のいずれかを探して、それに応じてターゲットにします。 この例では、このストラグラーがプリントにポップアップ表示された可能性があります。ここでは、IDを見ることができます： これで、次のCSSでこの要素をターゲットにすることができます。 [sourcode言語=” css”] ＃contact-popup {display：none;} [/sourcecode]

ページが壊れます

プリンターは、複数のページを印刷するページがあると仮定して、コンテンツをページに分割します。ブラウザに特定のポイントでページの休憩を避けるように指示できます。 w3.orgページでCSSのすべてのページブレークを読むことができます。要するに、あなたのオプションは次のとおりです。

• ページブレイク前：常に|避けてください - 常に/アイテムの前のページの休憩を避けてください
• ページブレイク後：常に|避けてください - 常に/アイテムの後のページの休憩を避けます
• ページブレイクインスサイド：常に|避けてください - 常に/アイテムの真ん中でページの休憩を避けます

ページがブロックコンテンツにのみ適用されることに注意してください。一般的な例はリストです。リストをブロックしてから、リストの途中でページブレイクが発生するのを防ぐことができます。例外はテキストです。これは

がブロックとして定義でき、ページブレイクを使用して印刷方法を変更できますが、通常はテキストが流れる必要があり、ブラウザがどこに配置するかを把握できるようにします。

サンプルケース 空白のスレートができたので、印刷時に実際に表示したい構造部品の追加を始めましょう。コンテンツセクションは明らかな候補ですので、それを再び追加して、段落のフォントサイズをポイントに変換しましょう。 [sourcode言語=” css”] @media print { #content p { フォントサイズ：11pt; 色：黒; }#content img { 表示：ブロック; ページブレイク後：避けてください。 ページブレイクインスサイド：避けてください。 } #content ul、li { 表示：ブロック; ページブレイクインスサイド：避けてください。 } #header {display：none;} #comments {display：none;} #sidebar {展示：なし;} #footer {display：none;} .site-description {display：none;} .site-title {display：none;} } [/sourcecode] ディスプレイを削除しました：none;コンテンツCSSと段落テキストを14pxから11ptに変換しました。ページの各要素を調べて、この方法論で印刷するためだけにそれぞれをカスタマイズできます。

wlap up

Webから印刷に行くのはイライラする可能性がありますが、メディアクエリにより、どの要素が印刷され、どのように印刷されるかについて非常にターゲットを絞ることができます。 本当のショートカットはありません。印刷物の見栄えを良くする必要がある場合は、完璧になるまで、要素ごとのレベルで個別のCSS定義を作成する必要がある可能性があります。 印刷スタイルシートは標準設計プロセスの一部ですか、それとも、徹底的に設計されたWebサイトに追加の追加の追加の追加だと考えていますか？ カスタマイズされた印刷スタイルシートの作成に関するよくある質問

印刷スタイルシートを作成することの重要性は何ですか？

プリントスタイルシートは、Webページのプリンターに優しいバージョンを提供するために重要です。これにより、印刷時のページの外観を制御でき、ナビゲーションメニュー、背景色、広告などの不要な要素を削除できます。これにより、インクを保存するだけでなく、印刷バージョンが必須コンテンツに焦点を当て、読みや理解を容易にすることも保証します。 Print StyleSheetに「表示：なし」プロパティを使用して、Webページを印刷するときに特定の要素を非表示にできます。たとえば、ナビゲーションメニューを非表示にする場合は、メニューを含む要素をターゲットにし、表示プロパティをターゲットにしません。これにより、要素が印刷されないことが保証されます。

Webページの印刷バージョンのフォントサイズと色を変更できますか？ Webページの印刷バージョン。これを行うには、プリントスタイルシートのボディ要素をターゲットにし、目的のフォントサイズと色を設定することができます。これは、Webページの印刷バージョンが読みやすいことを確認する場合に便利です。スタイルシートを参照するリンク要素に「メディア」属性を使用します。メディア属性は「印刷」に設定する必要があります。これは、Webページを印刷するときにStyleSheetを使用する必要があることを示します。これにより、画面ディスプレイ用のスタイルシートを1つ、印刷バージョン用に別のスタイルシートを使用できます。

Webページの印刷バージョンでページBREAKSを制御できますか？

はい、Webページの印刷バージョンでページブレイクを制御できます。これは、印刷スタイルシートで「ページブレイク前」と「ページブレイクアフター」プロパティを使用して使用できます。これらのプロパティを使用すると、ページのブレークが発生する場所を指定し、コンテンツの中央での厄介な休憩を防ぐのに役立ちます。 Webブラウザで印刷プレビュー機能を使用します。これにより、印刷時にWebページがどのように見えるかを示し、印刷スタイルシートに必要な調整を行うことができます。はい、ウェブページの印刷版にヘッダーとフッターを含めることができます。これを行うには、印刷styleSheetの「位置：固定」プロパティを使用して行うことができます。これにより、すべての印刷ページにヘッダーとフッターが表示されます。

印刷用のWebページのレイアウトを変更するにはどうすればよいですか？プリントスタイルシートの「フロート」プロパティ。これにより、ページ上の要素の位置を制御し、印刷時に意味のある方法で配置されるようにします。 >

はい、Webページの印刷版でマージンとパディングを制御できます。これを行うには、印刷スタイルシートで「マージン」と「パディング」プロパティを使用して行うことができます。これにより、コンテンツが適切に間隔を空け、印刷時に読みやすくなるようにすることができます。

Webページの印刷バージョンで画像を使用できますか？ Webページの印刷バージョン。ただし、印刷時にどのように見えるかに注意する必要があります。背景画像を削除し、重要な画像が白黒で明確で簡単に見えるようにすることをお勧めします。印刷スタイルシートの「表示」プロパティを使用して画像の表示を制御できます。

以上がカスタマイズされたプリントスタイルシートを数分で作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。