A4 サイズで印刷する HTML ページをデザインするにはどうすればよいですか?

A4 用紙の寸法で HTML ページをデザインする方法

多くのユーザーは、寸法と余白を模倣した HTML ページを印刷する機能を望んでいます。 A4サイズのシート。この記事では、この効果を実現するために必要なテクニックについて説明します。

印刷用の CSS メディア クエリ

HTML ページの印刷サイズを制御する鍵は、CSS メディアを利用することにあります。クエリ。これらのクエリは印刷媒体をターゲットにしており、特定のスタイルの適用が可能になります。 A4 サイズの印刷の場合、次の @media クエリを使用できます。

@media print {
    body {
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm;
    }
}

このコードは、印刷ページの幅と高さをそれぞれ 21cm と 29.7cm に設定し、A4 ページに対応します。さらに、目的のページ寸法を実現するために、30mm (上下) と 45mm (左右) の余白を定義します。

後続の改ページ

HTML の場合コンテンツが指定されたページ サイズを超える場合は、後続のページを作成する必要があります。これは、CSS の改ページを挿入することで実現できます。例:

div.chapter {
    page-break-after: always;
}

このコードにより、すべての章が新しいページで始まるようになります。

ブラウザ表示

Web 表示を最適化するには印刷された A4 の寸法を維持しながらページを作成するには、別の Web CSS ファイルを作成するか、印刷 CSS の一部をオーバーライドします。例:

@media screen {
    body {
        width: 80%;
        height: auto;
        margin: 20px;
    }
}

このコードは、表示される幅をブラウザーの利用可能なスペースの 80% に設定し、高さは自動的に調整されます。余白も 20 ピクセルに削減され、より Web に適したレイアウトになります。

結論

CSS メディア クエリを実装し、改ページを管理することで、印刷時に A4 サイズのドキュメントのように動作する HTML ページ。印刷 CSS と Web CSS を分離することで、ページはさまざまな閲覧環境に最適化された表示を維持することもできます。

以上がA4 サイズで印刷する HTML ページをデザインするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。