ホームページ >ウェブフロントエンド >フロントエンドQ&A >印刷CSSを設定する
印刷CSSを設定する
- WBOYオリジナル
- 2023-05-21 11:10:371568ブラウズ
印刷 CSS の設定
インターネット時代の到来により、紙の文書は徐々に電子文書に置き換わってきましたが、学校の試験や公文書の承認など、特定の場面では紙の文書が必要になります。ドキュメント ドキュメントは依然として重要な役割を果たしています。この場合、Web コンテンツを紙の文書上で適切に表示する方法を検討する必要があり、このプロセスでは CSS スタイル シートの印刷という特定のルールに従う必要があります。
いわゆる CSS スタイル シートは、画面スタイル シートや印刷スタイル シートなど、さまざまな状態の HTML 要素の外観、位置、動作を定義するために使用されるルールの集合です。印刷スタイル シートは、印刷用に特別に設計されたスタイル シートで、印刷ページ上の要素のサイズ、位置、配置をより適切に制御できるため、紙の文書をより適切に表示できます。
では、印刷 CSS スタイル シートを設定するにはどうすればよいでしょうか?以下では、次の 3 つの側面から紹介します:
1. 基本設定
印刷 CSS を設定するときは、次の点を考慮する必要があります:
- 印刷スタイル シートは HTML ファイルで定義する必要があります。
- 印刷スタイル シートは、画面スタイル シートの後に定義する必要があります。
- 印刷スタイル シートは、@media print を使用して定義する必要があります。
基本的なテンプレートは次のとおりです:
@media print {
/ ここで印刷スタイルを定義します/
}
複数の印刷スタイル要件がある場合は、@page ルールを使用してそれらを定義できます。たとえば、ページのヘッダーを会社名に設定する必要がある場合は、次のコードを使用できます:
@page {
@top {
content : "会社名";
}
}
2. ページ要素のレイアウト
紙文書の場合、ページ要素のレイアウトは非常に複雑です。大事なポイント。紙文書の読みやすさと美しさを確保する必要があります。印刷用 CSS スタイルシートの場合、以下の点に注意してください。
- 中国語と英語の混在レイアウトを処理する必要があります
中国語と英語が混在する場合レイアウトでは、中国語と英語のフォント サイズが異なることに注意する必要がありますが、通常、英語のフォントを中国語のフォントの半分に設定すると、ページがすっきりします。
body {
font-family: Arial、Helvetica、sans-serif;
}
body.zh {
font -family: "宋体"、Arial、Helvetica、サンセリフ;
}
body.zh p {
line-height: 1.6em;
}
body.en {
font-size: 12px;
}
body.en p {
line -高さ: 1.2em;
}
- ページ幅は用紙のサイズを考慮する必要があります
印刷するには、ページを調整する必要があります用紙の幅 (通常は A4 用紙) の幅は 210 mm なので、ページ幅を約 200 mm に設定するのが最適です。
- テキストの切り捨てを避けるようにしてください
印刷時に、テキスト行が長すぎると切り詰められます。この状況を回避するには、次のようにします。 word-break テキストの自動行折り返しを実装するプロパティ。
p {
word-break: Break-all;
}
3. 要素の非表示と表示
Web 上通常、要素の表示モードを設定するには、display 属性を使用しますが、印刷の場合、一部の要素の表示には特別な処理が必要です。次の要素を非表示または表示する必要があります:
- ページ ナビゲーション バーとページ下部の著作権ステートメントを非表示にする
@media print {
.navbar ,
.navbar-default,
.navbar-right,
.footer {
表示: なし;
}
}
- テキスト リンクの表示
通常、Web ページ上のリンクを表すためにアイコンを使用しますが、印刷する場合、これらのアイコンは見るのに不便なので、テキストの置換に a::after を使用できます。
a[href]:after {
content: "(" attr(href) ")";
}
- サブタイトルを表示
印刷する場合、通常、記事のサブタイトルはメイン タイトルの下に表示されます。
h2 {
表示: ブロック;
位置: 静的;
改ページ後: 常に;
}
つまり、CSS スタイルシートを印刷する設定は、紙文書の美しさや読みやすさに貢献するだけでなく、ファッショナブルな表現でもあります。フロントエンド開発者にとって、印刷 CSS スタイル シートの設定に習熟することは非常に必要なスキルです。この記事があなたにインスピレーションを与えてくれれば幸いです。
以上が印刷CSSを設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。