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

CSSのsizeプロパティとは？ページボックスのサイズと向きを設定する4つの値を解説

CSSのsizeプロパティは、印刷時に適用されるページボックス（page box）のサイズと向きを指定するためのプロパティです。主に@pageルール内で使用され、印刷レイアウトを細かく制御したい場合に役立ちます。

sizeプロパティには、ページサイズを決めるための値として以下の4種類を指定できます。

sizeプロパティで使える4つの値

1. auto

ページボックスは、出力先の用紙（ターゲットシート）のサイズと向きに自動的に合わせて設定されます。特別な指定を行いたくない場合に便利なデフォルト的な値です。

2. landscape

出力先の向きを上書きし、横長（ランドスケープ）のページを生成します。ページボックスのサイズ自体はターゲットと同じですが、長い辺が水平方向に配置されます。

3. portrait

出力先の向きを上書きし、縦長（ポートレート）のページを生成します。ページボックスのサイズはターゲットと同じですが、短い辺が水平方向に配置されます。

4. length（長さの値）

長さの値を指定すると、絶対的なサイズを持つページボックスが作成されます。値を1つだけ指定した場合は、その値がページボックスの幅と高さの両方に適用されます。なお、sizeプロパティにはパーセンテージ値を指定することはできない点に注意してください。

記述例

@page {
  size: A4 landscape;
}

このように指定することで、A4サイズの横長ページとして印刷されるようになります。用途に応じてauto・landscape・portrait・lengthを使い分けることで、思い通りの印刷レイアウトを実現できます。

  1. CSSのoutline-widthプロパティとは？使い方を実例付きで解説

    outline-widthプロパティは、要素のボーダー（境界線）の外側に、指定した太さの輪郭線（アウトライン）を描くために使用します。borderプロパティと似ていますが、アウトラインは要素の寸法（幅・高さ）に含まれないという点が大きな違いです。そのため、レイアウトに影響を与えずに要素を強調したい場合に便利です。 構文（シンタックス） CSSのoutline-widthプロパティの基本構文は以下の通りです。 セレクタ {     outline-width: /*値*/ } ポイント： outline-widthを使用する前に、必ずoutline-sty

  2. CSSのborder-colorプロパティの使い方を徹底解説

    CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &