CSS Level 2 プロパティ一覧

概要のみ。

文字色と背景

文字色と背景色

colorプロパティ

colorプロパティは、要素内の文字色(前景色)を設定します。

適用要素初期値継承
全要素色,transparent(透明)UA(WWWブラウザなど)次第yes

background-colorプロパティ

background-colorプロパティは、要素内の背景色を設定します。設定値は、色,transparent(透明)。

適用要素初期値継承
全要素色,transparent(透明)transparentno

参考

背景画像

background-imageプロパティ

background-imageプロパティは、要素内の背景画像を設定します。設定値は、url()関数です。

適用要素初期値継承
全要素URLnoneno

background-attachmentプロパティ

background-attachmentプロパティは、要素内の背景画像の表示位置を固定するかどうかについて設定します。値がfixedなら固定、scrollなら内容とともにスクロールしていきます。

適用要素初期値継承
全要素fixed,scrollscrollno

background-repeatプロパティ

background-repeatプロパティは、要素内の背景画像のくり返しを設定します。設定値は、repeat(全面),repeat-x(横方向),repeat-y(縦方向),no-repeat(くり返さない)です。

適用要素初期値継承
全要素repeat,repeat-x,repeat-y,no-repeatrepeatno

background-positionプロパティ

background-positionプロパティは、要素内の背景画像の表示位置を設定します。x方向、y方向の順にスペースで区切って指定します。値は、実数値+単位,%値の他に、left,right,top,bottom,centerというkeywordを指定できます。keywordは他の指定法と併用できません。keywordを使うなら、x方向、y方向ともにkeywordで指定しましょう。また値をひとつだけ指定した場合はx方向だけが指定されたことになり、y方向は50%になります。初期値と異なるので要注意。

適用要素初期値継承
blocklevel要素,置き換え要素実数値+単位,%値,keyword0% 0%no

backgroundプロパティ

背景を一括して設定できます。必要な値を任意の順にスペースで区切って指定します。

適用要素初期値継承
全要素上記解説を参照not definedno

フォント

フォント

font-familyプロパティ

要素内で使用されるフォントを設定します。フォント名を「,」で区切って複数指定できます。前から順に、ユーザ環境で利用できるフォントにマッチしたものが採用されます。また、複数指定の最後には、以下のkeywordを指定しましょう。これはマッチするフォントがない場合に利用されます。フォント名にスペースを含む場合は、「"」または「'」で囲みます。

serif
明朝系のフォント
sans-serif
ゴシック系のフォント
cursive
筆記体・草書体系のフォント
fantasy
装飾的なフォント
monospace
等幅のフォント
適用要素初期値継承
全要素フォント名,keywordUA(ブラウザなど)次第yes

font-sizeプロパティ

要素内で使用されるフォントの大きさを設定します。設定値は、実数値+単位,値,keyword(xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger)です。

適用要素初期値継承
全要素実数値+単位,%値,keywordmediumyes

font-styleプロパティ

要素内で使用されるフォントのスタイルを設定します。設定値は、keyword(normal,italic,oblique)です。obliqueは単なる斜体、italicは流麗なイタリック体です。

適用要素初期値継承
全要素keywordnormalyes

font-variantプロパティ

要素内で使用されるフォントのスモールキャップを設定します。設定値は、keyword(normal,small-caps)です。スモールキャップとは、小文字が大文字をそのまま小さくした形状で表示されることをいいます。

適用要素初期値継承
全要素keywordnormalyes

font-weightプロパティ

要素内で使用されるフォントの太さを設定します。設定値は、100,200,300,400,500,600,700,800,900,keyword(normal,bold,lighter,bolder)です。400とnormal、700とboldが対応します。

適用要素初期値継承
全要素整数値,keywordnormalyes

font-stretchプロパティ

要素内で使用されるフォントの文字幅を設定します。
設定値は、keyword(ultra-condensed,extra-condensed,condensed,semi-condensed,normal,semi-expanded,expanded,extra-expanded,ultra-expanded,narrower,wider)です。

適用要素初期値継承
全要素keywordnormalyes

font-size-adjustプロパティ

要素内で複数使用されるフォントのサイズを調整します。設定値は、実数値です。

適用要素初期値継承
全要素実数値noneyes

fontプロパティ

要素内でフォント関連の複数のプロパティをスペースで区切って一括で設定します。値を並べる順番が決まっています。

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size
  5. line-height
  6. font-family

font-sizeとfont-family以外は省略ができます。また、line-heightの値の前には必ず「/」が必要です。font-sizeとセットで指定するとよいでしょう。

h1 {font:italic normal bold 12pt/200% "MS P明朝",平成明朝,serif;}

適用要素初期値継承
全要素上記解説を参照not definedyes

テキスト

テキスト

text-alignプロパティ

ブロックレベル要素内で行揃えを設定します。設定値は、left,right,center,justify,文字列(th要素とtd要素のみ)

適用要素初期値継承
ブロックレベル要素keywordUAと文字方向次第yes

vertical-alignプロパティ

インライン,th,td各要素の表示される行の中で、縦方向の位置揃えを設定します。設定値は、実数値+単位,%値,keyword(baseline,top,middle,bottom,text-top,text-bottom,super,sub)です。

適用要素初期値継承
インライン要素、th,td要素実数値+単位,%値,keywordbaselineno

text-decorationプロパティ

文字(テキスト)に対して下線、上線、取消線、点滅を設定します。設定値は、keyword(none,underline,overline,line-through,blink)です。

適用要素初期値継承
全要素keywordnoneno

line-heightプロパティ

line-heightプロパティは、行の高さ(行間)を設定します。設定値は、実数値+単位,%値,keyword(normal)です。

適用要素初期値継承
全要素実数値+単位,%値,keywordnormalyes

letter-spacingプロパティ

letter-spacingプロパティは、文字と文字の間隔を設定します。設定値は、実数値+単位,keyword(normal)です。

適用要素初期値継承
全要素実数値+単位,keywordnormalyes

word-spacingプロパティ

word-spacingプロパティは、単語と単語の間隔を設定します。設定値は、実数値+単位,keyword(normal)です。

適用要素初期値継承
全要素実数値+単位,keywordnormalyes

text-transformプロパティ

text-transformプロパティは、大文字小文字表示をいろいろ設定します。設定値は、keyword(none,capitalize,lowercase,uppercase)です。

適用要素初期値継承
全要素keywordnoneyes

text-indentプロパティ

text-indentプロパティは、文章の一行目のインデントを設定します。設定値は、実数値+単位,%値です。

適用要素初期値継承
ブロックレベル要素実数値+単位,%値0yes

white-spaceプロパティ

white-spaceプロパティは、空白、タブ、改行をどのように設定します。設定値は、keyword(normal,pre,nowrap)です。

適用要素初期値継承
ブロックレベル要素keywordnormalyes

text-shadowプロパティ

text-shadowプロパティは、文字に影を設定します。設定値は、実数値+単位,色です。

適用要素初期値継承
全要素実数値+単位,色noneno

ボックス

概説

視覚系ブラウザでは、ほぼ全要素(置き換え要素以外のインライン要素とテーブルの列系要素を除くことに注意)が長方形のボックスとして扱われます。このボックスは次の4つの部分から構成されています。

  1. 内容領域
  2. padding(内側余白)
  3. border(枠線)
  4. margin(外側余白)

paddingとmarginの違いがわかりにくいかもしれませんが、次の一点を押さえておけば、まず困らないでしょう。背景色、背景画像の指定はpaddingの範囲内に適用されます。borderの外であるmarginの範囲には適用されません。

また、インライン要素とテーブルの列系要素も、padding,border,marginの指定は可能です。

1~4個の値をスペースを空けて同時に指定できるプロパティがあります。このとき、値の適用には以下のルールが用いられます。

値が1つ
上下左右に同じ値が適用される。
値が2つ
値1が上下、値2が左右に適用される。
値が3つ
値1が上、値2が左右、値3が下に適用される。
値が4つ
値1が上、値2が右、値3が下、値4が左に適用される。(時計回り)

内容領域

widthプロパティ

widthプロパティは、内容領域の幅を設定します。設定値は、実数値+単位,%値,keyword(auto)です。

適用要素初期値継承
全要素実数値+単位,%値,keywordautono

min-widthプロパティ

min-widthプロパティは、内容領域の最小の幅を設定します。設定値は、実数値+単位,%値,keyword(none)です。ボックスの幅を特定の範囲内に制限できます。

適用要素初期値継承
全要素実数値+単位,%値,keywordブラウザ次第no

max-widthプロパティ

max-widthプロパティは、内容領域の最大の幅を設定します。設定値は、実数値+単位,%値,keyword(none)です。ボックスの幅を特定の範囲内に制限できます。

適用要素初期値継承
全要素実数値+単位,%値,keywordnoneno

heightプロパティ

heightプロパティは、内容領域の高さを設定します。設定値は、実数値+単位,%値,keyword(auto)です。

適用要素初期値継承
全要素実数値+単位,%値,keywordautono

min-heightプロパティ

min-heightプロパティは、内容領域の最小の高さを設定します。設定値は、実数値+単位,%値,keyword(none)です。ボックスの高さを特定の範囲内に制限できます。

適用要素初期値継承
全要素実数値+単位,%値,keyword0no

max-heightプロパティ

max-heightプロパティは、内容領域の最大の高さを設定します。設定値は、実数値+単位,%値,keyword(none)です。ボックスの高さを特定の範囲内に制限できます。

適用要素初期値継承
全要素実数値+単位,%値,keywordnoneno

padding

paddingプロパティ

paddingプロパティは、パディングを一括設定します。設定値は、実数値+単位,%値です。値は、スペースで区切って1~4個指定します。指定数によって以下のようになります。

またpadding-*としてtop,bottom,bottom,rightそれぞれ単独で指定することも可能です。

適用要素初期値継承
全要素実数値+単位,%値未定義no

border

border-colorプロパティ

border-colorプロパティは、borderの色を設定します。設定値は、色,keyword(transparent:透明)です。値は、スペースで区切って1~4個指定します。またborder-color-*としてtop,bottom,bottom,rightそれぞれ単独で指定することも可能です。

適用要素初期値継承
全要素色,keywordcolorプロパティの値no

border-widthプロパティ

border-widthプロパティは、borderの太さを設定します。設定値は、実数値+単位,keyword(thin,medium,thick)です。値は、スペースで区切って1~4個指定します。またborder-width-*としてtop,bottom,bottom,rightそれぞれ単独で指定することも可能です。

適用要素初期値継承
全要素実数値+単位,keywordmediumno

border-styleプロパティ

border-styleプロパティは、borderの形式を設定します。設定値は、keyword(none,hidden,solid,double,groove,ridge,inset,outset,dashed,dotted)です。

none
border非表示。表などのセルのborderと重なったときは、セルのborderが優先。
hidden
border非表示。表などのセルのborderと重なったときは、こちらが優先。
solid
一本線
double
二重線
groove
凹み線
ridge
突き出し線
inset
borderの内側が凹んでいるように表示
outset
borderの内側が突き出しているように表示
dashed
破線
dotted
点線

値は、スペースで区切って1~4個指定します。またborder-style-*としてtop,bottom,bottom,rightそれぞれ単独で指定することも可能です。

適用要素初期値継承
全要素keywordnoneno

borderプロパティ

borderプロパティは、上下左右borderの色、太さ、形式を一括設定します。設定値は、色、太さ、形式の3つの値を任意の順に各々ひとつだけスペースで区切って指定します。上下左右で異なる指定をしたい場合には、border-*としてtop,bottom,bottom,rightそれぞれ単独で指定しなければなりません。

適用要素初期値継承
全要素上記解説を参照それぞれのプロパティ参照no

margin

marginプロパティ

marginプロパティは、マージンを一括設定します。設定値は、実数値+単位,%値,keyword(auto)です。値は、スペースで区切って1~4個指定します。またmargin-*としてtop,bottom,bottom,rightそれぞれ単独で指定することも可能です。

適用要素初期値継承
全要素実数値+単位,%値,keyword未定義no

表示と位置

表示

displayプロパティ

displayプロパティは、指定された要素をどのように表示するかを設定します。設定値は、keywordです。

none
指定された要素の完全な非表示。存在しないものとして扱う。
block
指定された要素をブロックレベルにします。
inline
指定された要素をインラインにします。
run-in
指定された要素の後に続く要素をインラインで改行なしに配置します。
compact
指定された要素の後に続くブロックレベル要素の左マージン内にインラインで配置します。
list-item
指定された要素に対して、リストのマーカー用ボックスも生成します。
marker
ブロックレベル要素の疑似要素(before,after)のみに適用され、その生成内容がリストのマーカーであることを宣言します。
table関係
表に関する要素があらかじめ定義されていない言語(XMLなど)で、特定の要素をHTMLの表関係の要素に当てはめるのに使う。
適用要素初期値継承
全要素keyword要素次第no

位置決め

positionプロパティ

positionプロパティは、ボックスの表示位置を決定するための配置方法を設定します。実際の配置は、top,bottom,left,rightプロパティで指定します。また、z-indexプロパティは重なり順序を指定できます。

positionプロパティ設定値は、keywordです。

static(初期値)
top,bottom,left,rightプロパティを適用しません。
relative
通常の配置される位置からの相対位置で配置します。
absolute
親ボックスを基準として絶対位置で配置します。他の要素の配置に一切影響を与えません。親ボックスは、position が static 以外である祖先要素、それが存在しない場合は「閲覧領域」(ウィンドウ≒BODY要素)になります。
fixed
表示位置が固定されます。その他はabsoluteと同様の扱い。
適用要素初期値継承
全要素keywordstaticno

top,bottom,left,rightプロパティ

top,bottom,left,rightプロパティ設定値は、実数値+単位,%値,keyword(auto)です。

適用要素初期値継承
positionプロパティでstatic以外が指定されている要素keywordautono

z-indexプロパティ

z-indexプロパティ設定値は、整数値、keyword(auto)です。

適用要素初期値継承
positionプロパティでstatic以外が指定されている要素keywordautono

回り込み

floatプロパティ

floatプロパティは、指定された要素のボックスを左、または右によせて、空いたスペースに続く要素を流し込みます。設定値は、keyword(left,right,none)です。

適用要素初期値継承
絶対配置でないボックスを生成する要素keywordnoneno

clearプロパティ

clearプロパティは、floatプロパティの効果をクリアーにします。設定値は、keyword(left,right)です。

適用要素初期値継承
ブロックレベル要素keywordnoneno

はみ出し

overflowプロパティ

overflowプロパティは、ブロックレベル要素の内容がボックスからはみ出してしまう場合、どのように表示するかを設定します。設定値は、keyword(visible,hidden,scroll,auto)です。

適用要素初期値継承
ブロックレベル要素、置き換え要素keywordvisibleno

その他

clipプロパティ

clipプロパティは、ボックスの見える範囲を設定します。設定値は、keyword(rect(上,右,下,左),auto)です。

適用要素初期値継承
ブロックレベル要素、置き換え要素keywordautono

visibilityプロパティ

visibilityプロパティは、ボックスを表示するかどうかを設定します。設定値は、keyword(visible:表示,hidden:表示を隠す,collapse:表の行・列・行や列のグループの表示を隠す)です。

適用要素初期値継承
全要素keywordvisibleno

directionプロパティ

directionプロパティは、文字表記の方向を設定します。設定値はkeyword(ltr:左から右,rtl:右から左)です。

適用要素初期値継承
全要素keyword言語次第no

unicode-bidiプロパティ

unicode-bidiプロパティは、文字方向の組み込みと上書きを設定します。設定値はkeywordです。

normal
初期設定のまま。
embed
指定した要素がインライン要素の場合、文字方向に関する指示をdirectionプロパティにしたがって新たに組み込みます。
sidi-override
指定した要素がインライン要素またはインライン要素のみをふくむblocklevel要素の場合、UNICODEの文字方向に関する指示をdirectionプロパティの設定で上書きします。
適用要素初期値継承
全要素keyword言語次第no

リスト

リスト

list-style-typeプロパティ

list-style-typeプロパティは、リスト項目のマーカーの種類を設定します。設定値は、keywordです。

none
マーカーを表示しません。
disc
塗りつぶされた丸になります。
circle
線で描かれた丸になります。
square
四角になります。
lower-roman
ローマ数字の小文字になります。
upper-roman
ローマ数字の大文字になります。
lower-greek
ギリシャ文字の小文字になります。
decimal
算用数字になります。
decimal-leading-zero
頭に 0 をつけた算用数字になります。
lower-latin,lower-alpha
アルファベットの小文字になります。
upper-latin,upper-alpha
アルファベットの大文字になります。
cjk-ideographic
漢数字になります。
hiragana
ひらがなで「あいうえお」順になります。
katakana
カタカナで「アイウエオ」」順になります。
hiragana-iroha
ひらがなで「いろは」順になります。
katakana-iroha
カタカナで「イロハ」順になります。
hebrew
ヘブライ数字になります。
armenian
アルメニア数字になります。
georgian
グルジア数字になります。
適用要素初期値継承
li要素,displayプロパティの値がlist-itemの要素keyworddiscyes

list-style-imageプロパティ

ist-style-imageプロパティは、リスト項目のマーカーに画像を設定します。設定値は、url()関数です。

適用要素初期値継承
li要素,displayプロパティの値がlist-itemの要素URLnoneyes

list-style-positionプロパティ

マーカーの位置をちょっと変えられます。設定値は、keyword(outside:初期値,inside)です。

適用要素初期値継承
li要素,displayプロパティの値がlist-itemの要素keywordoutsideyes

list-styleプロパティ

マーカー関連の一括指定です。必要な値を任意な順序でスペースで区切って指定します。

適用要素初期値継承
li要素,displayプロパティの値がlist-itemの要素上記解説を参照未定義yes

marker-offsetプロパティ

マーカーとリスト項目との間隔を設定します。設定値は、実数値+単位,keyword(auto)です。

適用要素初期値継承
displayプロパティの値がmarkerの要素実数値+単位,keywordautono

カーソル

カーソル

cursorプロパティ

cursorプロパティは、カーソルの形状を設定します。設定値はkeywordです。keywordはすべてカーソルの示す意味を指定するため、実際に表示されるカーソルの形状は環境ごとに異なることに注意してください。ただし特定の形状のカーソルを出すためにカーソルに画像ファイルを指定する方法が用意されています。

auto(初期値)
必要に応じて自動的にカーソルが切り替わります。
crosshair
十字型になります。
default
デフォルトのカーソルになります。Windowsでは斜め矢印です。
pointer
リンク部を指す場合と同じ形状になります。Windowsでは手のマーク。
move
移動可能な対象を指し示す場合と同じ形状になります。
text
Windowsでは「I」のような形状になります。
wait
Windowsでは砂時計または腕時計の形状になります。
help
Windowsでは「?」の形状になります。
xx-resize
e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resizeがあり、リサイズ可能な部分を指し示す場合と同じ形状になります。
URI
画像になります。
適用要素初期値継承
全要素keywordautoyes

テーブル

表示方法

table-layoutプロパティ

table-layoutプロパティは、テーブルの表示方法を設定します。設定値はkeyword(fixed,auto)です。

fixed
テーブル全体のデータをすべて読み込む前に表示します。あらかじめ、widthプロパティを指定しておく必要です。
auto(初期値)
テーブル全体のデータをすべて読み込み後に表示します。
適用要素初期値継承
table要素keywordautono

border

border-collapseプロパティ

border-collapseは、セルのborderの表示形式を設定します。設定値は、keyword(collapse,separate)です。

collapse(初期値)
テーブル全体の周りのborderと各セルのborderを重ねて表示します。
separate
テーブル全体の周りのborderと各セルのborderを別々に表示します。
適用要素初期値継承
table要素keywordcollapseyes

border-spacingプロパティ

border-spacingプロパティは、隣接する各セルのborderの間隔を設定します。設定値は、値が1つの場合は、上下左右の間隔、値が2つの場合は、左右の間隔、上下の間隔の順です。

適用要素初期値継承
table要素実数値+単位0yes

空セル

empty-cellsプロパティ

empty-cellsプロパティは、空セルのborderの表示/非表示を設定します。設定値は、keyword(show,hide)で、th要素、td要素に適応します。サンプルは、割愛いたします。

show
border表示
hide
border非表示
適用要素初期値継承
th,td要素keywordshowyes

caption

caption-sideプロパティ

caption-sideプロパティは、テーブルのキャプションの位置を設定します。設定値は、keyword(top,bottom,left,right)で初期値はtopです。

適用要素初期値継承
caption要素keywordtopyes

内容の追加

内容の追加

contentプロパティ

contentプロパティは、要素の直前、または直後に新しく追加する内容を設定します。疑似要素(before,after)へ対してのみ指定できます。設定値は文字列,URI,カウンタ,属性,keyword(open-quote,close-quote,no-open-quote,no-close-quote)です。

文字列
追加する文字列を指定します。
URI
追加する画像等のURIを指定します。
カウンタ
counter(),counters()関数で要素内容に自動的に連番を追加します。
属性
attr(属性名)関数で属性名で指定した文字列を追加します。
open-quote,close-quote
quotesプロパティで設定されている引用符を追加します。open-quoteは引用部分の先頭につく引用符を、close-quoteは最後につく引用符を追加します。
no-open-quote,no-close-quote
引用符は一般に引用の入れ子の深さによって記号が変遷します。no-open-quoteは入れ子の深さを1段階深くし、no-close-quoteは1段階浅くします。(引用符の記号が変わる)
適用要素初期値継承
before疑似要素,afte疑似要素文字列,keyword他空文字(empty string)no

引用符

quotesプロパティ

quotesプロパティは、contentプロパティで追加する引用符を設定します。設定値は、先頭文字列 最後文字列とkeyword(none:引用符を表示しない)です。

適用要素初期値継承
全要素文字列,keywordブラウザ次第yes

連番設定

counter-incrementプロパティ

counter-incrementプロパティは、contentプロパティで追加するカウンタ値を進めるためのものです。設定値は、カウンタ名,カウンタ名+整数,keyword(none:値を進めない)です。整数は、数値分カウンタが進みます。

適用要素初期値継承
全要素カウンタ名,カウンタ名+整数,keywordnoneno

counter-resetプロパティ

counter-resetプロパティは、contentプロパティで追加するカウンタ値をリセットするためのものです。設定値は、カウンタ名,カウンタ名+整数,keyword(none:リセットしない)です。整数は、設定値にリセットされます。

適用要素初期値継承
全要素カウンタ名,カウンタ名+整数,keywordnoneno

アウトライン

概説

GUI環境では選択(focus)されている入力フィールドやボタンなどを示すために、それらの周りにアウトラインを表示させる場合があります。アウトラインプロパティはこれを設定するものです。

アウトラインはボックスのborderとは異なり、長方形とは限りません。したがって上下左右の概念は存在せず、全方向同じ状態で表示されます。

また、アウトラインはborderのすぐ外側に表示され、margin領域と重なります。そのため、アウトラインを表示させることでボックスなどの大きさが変わったり位置がずれたりすることはありません。

アウトライン

outline-colorプロパティ

outline-colorプロパティは縁取り線の色を設定します。border線とは異なり、上下左右の概念はありません。対象が丸ければアウトラインも丸くなります。設定値は、色(任意の色),keyword(invert:地の色を反転)。

適用要素初期値継承
全要素色,keywordinvertno

outline-styleプロパティ

outline-styleプロパティは縁取り線の形状を設定します。設定値はkeyword(none,solid,double,その他)です。

none
非表示
solid
実線
double
2本線
その他
groove,ridge,inset,outset,dashed,dottedがあります。ボックスの解説を参照のこと。
適用要素初期値継承
全要素keywordnoneno

outline-widthプロパティ

outline-widthプロパティは、ボタンや画像などの縁取り線の太さを設定します。設定値は、実数値+単位,keyword(thin:細い,medium:普通,thick:太い)です。

適用要素初期値継承
全要素実数値+単位,keywordmediumno

outlineプロパティ

outlineプロパティは、ボタンや画像などの縁取り線を一括して設定します。設定値は、上記の必要な値を任意の順にスペースで区切って指定します。

適用要素初期値継承
全要素上記解説を参照個々のプロパティの初期値no

印刷

プロパティの設定

@page

印刷関係のプロパティは@page宣言として設定できます。

CSSではページボックスという考え方があり、印刷される1ページをひとつのボックスとして捉えることができます。このページボックスはHTMLには現れないものですから、印刷のプロパティは通常のセレクタでは設定できません。そこで@pageが用いられるわけです。

@page
{size:16.2cm 23.7cm; /* ページボックスの大きさと向き */
marks:crop cross; /* トンボ */}
@page:first
{margin:2em; /* 余白 */}
@page:left
{margin:2em 2em 2em 0; /* 余白 */}
@page:right
{margin:2em 0 2em 2em; /* 余白 */}

「:first」「:left」「:right」という専用の3つの擬似クラスが用意されており、最初のページ、左側のページ、右側のページの印刷設定をそれぞれ指定できます。また@page宣言には名前をつけることができ、その設定を特定の要素の印刷設定として用いることが可能です。

@page yoko
{size:landscape;}
table
{page:yoko;}

ページボックス

sizeプロパティ

sizeプロパティはページボックスの大きさと向きを設定します。設定値は実数値+単位,keyword(auto,portrait,landscape)です。

実数値+単位
縦、横の順で大きさを指定します。値をひとつだけ指定した場合には縦横同じ大きさになります。
auto
とくに制御しない
portrait
用紙縦置き
landscape
用紙横置き
適用要素初期値継承
@page宣言実数値+単位,keywordauto--

改ページ

page-break-before,page-break-afterプロパティ

page-break-before,page-break-afterプロパティは、それぞれ指定要素の前後における改ページを設定します。設定値はkeyword(auto,always,avoid,left,right)です。

auto
とくに制御しない
always
必ず改ページ
avoid
改ページ禁止
left,right
見開き印刷における左右の指定
適用要素初期値継承
ブロックレベル要素keywordautono

page-break-nsideプロパティ

page-break-nsideプロパティは、指定要素内の改ページを設定します。設定値はkeyword(auto,avoid)です。

auto
とくに制御しない
avoid
改ページ禁止
適用要素初期値継承
ブロックレベル要素keywordautono

widows,orphansプロパティ

widows,orphansプロパティは、指定要素内における中途半端な改ページの禁止を設定します。設定値は整数値です。

widowsプロパティ
改ページ後のページの最初に最低限必要な行数を設定する。(例えば、2行しかない段落があるとします。widowを2に設定すれば、この段落の途中で改ページされることはありえません。もし途中で改ページすれば、改ページ後のページの最初に1行しかない段落が出現してしまうからです)
orphansプロパティ
改ページ前のページの最後に最低限必要な行数を設定する。
適用要素初期値継承
ブロックレベル要素整数値2no

トンボ

marksプロパティ

marksプロパティは、トンボ(断ち切り線)の出力を設定します。設定値はkeyword(crop,cross,none)です。

crop
コーナートンボを出力(スペースで区切ってcrossと同時に指定可能)
cross
センタートンボを出力(スペースで区切ってcropと同時に指定可能)
none
トンボを出力しない
適用要素初期値継承
@page宣言keywordnoneno

Information