マークアップ言語 - 印刷スタイル_HTML/Xhtml_Web ページの制作

ここをクリックすると、Web Teaching Network の HTML チュートリアルのコラムに戻ります。 CSS チュートリアルを表示するには、ここをクリックしてください。 上: マークアップ言語 - Web ページに適用される CSS スタイル。 第11章 印刷スタイル 前回の第 10 章では、CSS をドキュメントに適用するいくつかの方法について説明しました。この章では、印刷スタイルについて説明し、特に印刷ページ用の CSS ルールを指定することができます。 ここをクリックして「Script House HTML チュートリアル」コラムに戻ります。 CSS チュートリアルを表示するには、ここをクリックしてください。
上: マークアップ言語 - Web アプリケーションの CSS スタイル 。 第 11 章 印刷スタイル
前回の第 10 章では、CSS をドキュメントに適用するいくつかの方法について説明しました。この章では、印刷スタイルを検討し、特に印刷ページ用の CSS ルールを指定します。これにより、構造化されたマークアップ コンテンツが保証されます。
まず、メディアの種類と、デバイス固有の CSS の提供との関係を見てみましょう。 印刷時に使用するスタイルを指定するにはどうすればよいですか?
この質問に答える前に、CSS でメディア タイプ (メディア) を指定できるという概念を理解しておく必要があります。メディア タイプを宣言すると、スタイルが特定のメディアで機能するようになります。 .
たとえば、リンクのスタイル シートをコンピュータ画面専用にしたい場合は、次のように タグに media 属性を追加できます:

media="screen" href="screenstyles.css" />

前のコードでは、タグがリンクされていることを確認できます。このスタイルはコンピュータ画面にのみ使用されます。「コンピュータ画面以外にどのようなメディアをターゲットにすることができますか?」と疑問に思うかもしれません。答えは...たくさんあります。 メディア タイプ
上記の例で使用されている画面に加えて、次のような多くのメディア タイプから選択できます。CSS2.1 標準で W3C によって定義されているとおり、次のとおりです (http://www で入手可能)。 .php.cn/found): all: すべてのデバイスに適用されます 点字: 点字触覚フィードバック装置に適しています エンボス加工: 点字ページプリンターに適しています handeld: ハンドヘルド デバイスに適しています (通常は画面が小さく、帯域幅が制限されています) 印刷: ページ分割されたコンテンツ、および印刷プレビュー モードを使用して画面上で表示されるドキュメントに適しています。 投影: オーバーヘッド プロジェクターなどの投影プレゼンテーションに適しています。ページ分割されたメディア形式の詳細については、ページ分割されたコンテンツ (http://www.php.cn/) を参照してください。 画面: 主にカラーコンピュータ画面に適しています。 speech: 音声合成に適しています。 注: CSS2 には、aural と呼ばれる同様の機能を備えたメディア タイプがあります。詳細については、Auditory Style Sheet 付録 (http://www.php.cn/) を参照してください。 tty: 固定幅のテキスト形式を使用するメディア (表示機能が制限された電信交換機、端末、ハンドヘルド デバイスなど) に適しています。開発者は tty でピクセル長の単位を使用しないでください。 tv: TV タイプのデバイス用 (低解像度、低色、限られたスクロール機能、効果音の使用機能)。
この章では、印刷およびスクリーンのすべてのメディア タイプに焦点を当てます。
                                                                        #p# メディアを指定する 2 つの方法
W3C では、CSS のメディア タイプを指定する 2 つの方法があり、そのうちの 1 つは、 タグと media 属性を使用する方法です。これら 2 つの方法を比較します。 方法 A: メディア属性

media="screen" href="screenstyles.css" />

前の例と同様に、メソッド A では、screenstyles.css をコンピュータ画面にのみ使用するように指定しています。これにより、印刷、投影、ハンドヘルド デバイスでの閲覧、スクリーン リーダーの使用などが不要になります。その際には、screenstyles.css のルールが適用されます。 部分的なサポート
重要なことの 1 つは、すべてのメディア タイプを厳密にサポートするのは少し非現実的であるということです。たとえば、次のように記述すると、すべてのデバイスとブラウザーが指定されたメディア タイプに厳密に従う必要があります。

media="handheld" href="screenstyles.css" />

では、これらのスタイルを適用できるのはハンドヘルド デバイス (PDA、携帯電話など) だけであると期待されるかもしれませんが、残念なことに、この記事の執筆時点では、標準コンテンツはブラウザの外の世界には普及していないようです。すべてのデバイスが対応するメディア タイプをサポートしているわけではありません。
このため、印刷スタイルなど、実際のアプリケーションで使用できるメディア タイプに焦点を当てます。

方法 B: @media または @import

第二指定 メソッドたとえば、@import を使用して外部スタイル シートを導入する場合、そのメディア タイプを指定することもできます。
同様に、@media ルールは、 target 特定のメディアのルール段落は、メソッド A と同様に、@media を使用して印刷専用のスタイルを指定します。 の中に置くか、外側に置きます
メソッド A では、例として
前の例では、複数のメディア タイプを指定することにより、screenandprint.css が画面表示と印刷メディアの両方に使用され、その後 @media
メディア タイプを指定する 2 つの方法を確認した後、それらを実際に使用して画面表示と印刷のスタイルを提供する方法を見てみましょう。
                                                                        #p#
画面表示と印刷用にスタイルを分ける
同じドキュメントに 2 つの CSS を提供するとします。1 つは表示用、もう 1 つは印刷用です。
私は個人の Web サイトを例に挙げます。 タグを使用して、Web サイト全体のメイン スタイル シート (styles.css) を参照します。styles.css の内容は、別の外部スタイル シートを導入するための単純な @import ルールです。 Netscape 4.x として) スタイル設定を非表示にします。
ページの で、メイン スタイル シート style.css にリンクします

同時に、印刷デザイン専用の別のスタイル シート (print.css) も作成します。print.css には、次のように書きました。ページの印刷時にのみ適用されるスタイル。

次に、これらの CSS がターゲットのみを確実にターゲットにする方法を説明します。それぞれの適切なメディアはどのように機能しますか?

media="screen" href="/css/styles.css" />media="print " href="/css/print.css" />

styles.css に screen を指定すると、styles.css に含まれるスタイルがコンピューターの画面でのみ使用されるようにすることができます。 、メディア属性を設定します。印刷に設定すると、print.css に含まれるスタイルがユーザーがページを印刷するときにのみ使用されるようになります。
画面スタイルと印刷スタイルが分離されたので、どのスタイルが適しているかを見てみましょう。印刷スタイルシートに配置されます。 印刷スタイル シートをデザインします
この style.css には、レイアウト、フォント、位置、背景などのルールが含まれている場合がありますが、print.css は白紙の紙であり、適用されるスタイルをカスタマイズするのを待っています。
印刷スタイルをデザインするときに注意すべき重要な点は、(ブラウザ ウィンドウではなく) 紙を扱うため、ピクセルの長さとサイズは最適な選択ではありません。 サイズをポイント単位で指定します
印刷スタイル シートでは、フォント サイズを指定するためにポイントを使用するのが非常に合理的です。この印刷スタイル シートでは、最初に

タグの基本フォント サイズを定義します。 >body {
font-family: "Times New Roman", serif;
font-size: 12pt;
}

は、ピクセル単位を使用する場合に比べて、非常に単純すぎます。 12 ポイントのフォントがどのくらいの大きさで印刷されるかを想像するのが良いでしょう。同時に、印刷がより詳細で読みやすいセリフ フォントも選択します。 インクを節約するために不要なタグを非表示にします
Web サイトには、印刷版ではまったく役に立たないページ要素が多数ある可能性があります。ナビゲーション リンク、サイドバー、フォーム、広告列などの要素は、印刷すると無駄になることがよくあります。印刷スタイルシートの表示属性を使用して、ページのコンテンツのみを印刷したい場合がよくあります。
たとえば、Web サイトが #nav、#sidebar、#advertising、# で始まる場合。ナビゲーション バー、サイドバー、広告項目、および検索フォームを個別に保存する場合は、印刷スタイル シートで次のステートメントを使用して、これらのコンテンツをすべて非表示にすることができます:

body {
font-family: " Times New Roman", serif;
font-size: 12pt;
}

#nav, #sidebar, #advertising, #search {
display: none ;
}

印刷スタイルシートで display:none; を設定することで、印刷結果でこれらの要素を非表示にすることができます。
不要な要素を非表示にしてみるページ上の要素を使用すると、同じマークアップ コードを使用して Web サイトの「印刷用」バージョンを迅速かつ簡単に作成できます。サーバー上に同一の Web サイト コンテンツを出力するために、別の縮小テンプレートを使用する必要はありません。追加の CSS ファイルを追加し、印刷メディアの種類を指定すれば完了です!
これで、論理ページの「段落」を使用してマークアップ構造を整理すると、将来的に広告バナーがある場合のスタイルのデザインが容易になることが再度確認されました。この場合、印刷時に背景画像と色を削除することも、インクを節約し、 1.
たとえば、以前に タグの背景画像または色を指定した場合は、次のように削除できます:

body {

背景: none;
}

もちろん、このメソッドを使用して、他のタグの画面スタイルで指定された背景画像と色を削除することもできます。

                                                                        #p#
リンクを公開する
また、リンク URL を公開し、印刷結果にハイパーリンクとして表示するという巧妙なトリックもあります (残念ながら、CSS2 仕様を完全にサポートするブラウザでのみ機能します)。
:after 疑似クラスを使用して CSS を記述することができ、サポートされているブラウザーがハイパーリンク テキストの後に接続先の URL を出力できるようになります。現在、Mozilla、Safari、Netscape 7.0 はすべてこの機能をサポートしています。同時に、:after をサポートしていないブラウザ ユーザーにとっては、ハイパーリンク テキスト自体しか表示されないため、不利益はありません (Eric Meyer、「CSS Design: Going to Print」、http://www.php.cn) /)。
コンテンツ部分のハイパーリンク URL を強調表示する新しいルールを印刷スタイルシートに追加します。

body {

font-family: "Times New Roman", serif;
font-size: 12pt;
}
#nav, #sidebar, #search {
表示: none;
}

#content a:link:after, # content a :visited:after {
content: " (" attr(href) ") ";
}
このルール印刷されるページでは、URL が一連の括弧内に配置され、その前後にスペースが残りますが、これはページの #content 領域にのみ影響します。すべてのハイパーリンクを公開する一般的なルールを作成しますが、ここでは上部、下部、その他の領域のリンクを除く、コンテンツ部分のハイパーリンクのみを公開することを選択します。

繰り返しになりますが、この機能は現在少数のブラウザーでのみサポートされています。 :after 疑似クラスをサポートしていないブラウザは完全に無害なので、単にこのルールを無視します。 リンク テキスト
リンク URL にいくつかの巧妙なトリックを加えましたが、読者が一般的なコンテンツを読むときに含まれているハイパーリンクを簡単に識別できるように、リンク テキストを独自の方法で強調することを忘れないでください。 body {
font-family: "Times New Roman", serif;
font-size: 12pt;

}
#nav, #sidebar, #search {
表示 : none;
}

a:link, a:visited {


色: 青;
テキスト装飾: 下線;
}#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") "; }
もちろん、ここでは任意の色を選択することもできます。ここではデフォルトの青を使用し、下線を引いています。これは、白黒印刷の場合、一目でハイパーリンクとして認識できるため、特定のグレーの色を試してみることができます。リンクは通常のテキストと十分なコントラストを生み出します。
                                                                        #p# 印刷をプレビューしてインクを節約する
インクを節約するためのもう 1 つのヒントは、ページ全体を実際に紙に印刷するのではなく、ブラウザの印刷プレビュー機能を使用してページがどのように印刷されるかを試してみることです。
ほとんどのブラウザでは。 [ファイル] - [印刷] ダイアログ ボックスにはプレビュー オプションがあり、ページの印刷効果を確認できます。ここで印刷スタイル シートの効果を詳しく見ることができます。 どのように見えるか
私の個人的な Web サイトでの印刷スタイル シートの使用は、一緒に作成した前の例と非常によく似ています。図 11-1 と 11-2 を比較して、ナビゲーション、サイドバーをどのように設計したかを確認できますか。リンクされたコンテンツを公開しながら、この記事を読みやすくするためにフォントとフォント サイズを調整します。

図 11-1 画面スタイル シートを使用してブラウザで表示された SimpleBits
図 11 -2 SimpleBits 印刷バージョン
図 11-1 と 11-2 から、小さな CSS ドキュメントが使用されている限り、印刷専用の特別なバージョンをどのページにも提供できることが明確にわかります。プロジェクトに簡単に追加でき、ユーザーがページを印刷しようとするときのエクスペリエンスを向上させることができる機能です。
今度、上司が「Web サイト用に印刷用の新しいテンプレートを作成する必要がある」と言ったとき、「そのとおりです。同じディレクトリ構造」を参照すると、この小さなトリックを後ろポケット (またはこの本が収まる場所) から取り出すことができます。
印刷スタイルに関するデザインのヒントをさらに知りたい場合は、必ずお読みください。 CSS の第一人者である Eric Meyer の記事「CSS Design: Going to Print」(http://www.php.cn/) および「Print Different」(http://www.php.cn/)。 まとめ
印刷スタイルシートに含めることができるルールについて簡単に説明しましたが、メディアタイプを指定して印刷用と画面表示用のすべてのスタイルを分離できるため、メディアごとに詳細を調整するのが非常に簡単です。維持と管理が簡単。同じマークアップ ソース コードを印刷用の CSS ドキュメントと組み合わせて使用​​できるため、Web サイト全体の印刷用コピーを作成する必要がなくなります。
将来的には、他のデバイスでもより多くのマルチメディア タイプがサポートされることを願っています。特定のデバイス向けに CSS スタイルを設計することで、PDA、携帯電話、スクリーン リーダーが同じ XHTML を正常に読み取れるようになれば、作業がはるかに簡単になるでしょう。