CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのページボックスとは？@pageルールでのサイズ・余白の指定方法

CSSのページボックスとは

ページボックスとは、印刷やPDF出力の際に1ページ分として扱われる領域のことです。CSSでは、@pageルールの中で、ページボックスの寸法、向き（orientation）、余白（マージン）などを指定することができます。

ページボックスの寸法は「size」プロパティで設定します。なお、ページ領域（page area）の寸法は、ページボックスの寸法からマージンの領域を差し引いた大きさになります。

たとえば、次の@pageルールでは、ページボックスのサイズを8.5×11インチに設定し、ページボックスの端とページ領域の間に四方2cmのマージンを作成しています。

<style>
    <!--
        @page { size:8.5in 11in; margin: 2cm }
    -->
</style>

マージンの設定方法

@pageルール内では、「margin」「margin-top」「margin-bottom」「margin-left」「margin-right」の各プロパティを使用して、ページの余白をまとめて、あるいは上下左右それぞれ個別に設定することができます。

トンボとレジストレーションマークの出力

さらに、「marks」プロパティを@pageルール内で使用すると、ページボックスの外側にある出力用紙上に、裁ち落とし線（トンボ）や登録マーク（レジストレーションマーク）を作成できます。デフォルトでは何もマークは印刷されません。「crop」と「cross」のキーワードを片方、または両方指定することで、それぞれ裁ち落とし線と登録マークを出力ページに表示させることが可能です。

  1. CSSのボックスモデルとは？4つの構成要素と実装例をわかりやすく解説

    CSSボックスモデルの基本概念HTMLドキュメント内のすべての要素は、ブラウザによって長方形のボックスとして描画されます。このボックスの幅（width）、高さ（height）、パディング（padding）、マージン（margin）によって、要素そのものとその周囲に確保されるスペースが決定します。以下の図は、ボックスモデルの概念を示したものです。出典：w3.orgコンテンツ（Content）テキスト、画像、その他のメディアといった実際のデータが格納される領域です。widthプロパティとheightプロパティによって、このボックスの寸法を変更できます。パディング（Padding）コンテンツの外側の

  2. CSSの疑似要素（Pseudo-element）とは？基本構文と実例付きでわかりやすく解説

    CSSの疑似要素（Pseudo-element）とは、要素の一部を指定してスタイルを適用するためのセレクターです。たとえば、テキストの最初の1文字や1行目など、通常のセレクターでは選択できない特定の部分をターゲットにできます。また、::before と ::after を使えば、要素の前後にコンテンツを挿入することも可能です。基本構文疑似要素は、セレクターに続けて「::」＋疑似要素名という形式で記述します。基本的な書き方は以下のとおりです。Selector::pseudo-element {    css-property: /*値*/; }サンプルコード①：カウンターを使