• 趣味のWebデザイン＞Lecture＞CSS＞css_prop
• Prev
• Next
• [E]

CSS Level 2 プロパティ一覧

概要のみ。

文字色と背景

文字色と背景色

• color
• background-color

colorプロパティ

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

background-colorプロパティ

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

参考

• 文字色と背景色はセットで指定することが推奨されています。
• 単位と色

背景画像

• background-image
• background-attachment
• background-repeat
• background-position
• background

background-imageプロパティ

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

background-attachmentプロパティ

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

background-repeatプロパティ

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

background-positionプロパティ

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

backgroundプロパティ

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

フォント

フォント

• font-family
• font-size
• font-style
• font-variant
• font-weight
• font-stretch
• font-size-adjust
• font

font-familyプロパティ

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

serif

明朝系のフォント

sans-serif

ゴシック系のフォント

cursive

筆記体・草書体系のフォント

fantasy

装飾的なフォント

monospace

等幅のフォント

font-sizeプロパティ

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

font-styleプロパティ

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

font-variantプロパティ

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

font-weightプロパティ

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

font-stretchプロパティ

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

font-size-adjustプロパティ

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

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% "ＭＳ Ｐ明朝",平成明朝,serif;}

テキスト

テキスト

• text-align
• vertical-align
• text-decoration
• line-height
• letter-spacing
• word-spacing
• text-transform
• text-indent
• white-space
• text-shadow

text-alignプロパティ

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

vertical-alignプロパティ

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

text-decorationプロパティ

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

line-heightプロパティ

line-heightプロパティは、行の高さ（行間）を設定します。設定値は、実数値＋単位，%値，keyword（normal）です。

letter-spacingプロパティ

letter-spacingプロパティは、文字と文字の間隔を設定します。設定値は、実数値＋単位，keyword（normal）です。

word-spacingプロパティ

word-spacingプロパティは、単語と単語の間隔を設定します。設定値は、実数値＋単位，keyword（normal）です。

text-transformプロパティ

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

text-indentプロパティ

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

white-spaceプロパティ

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

text-shadowプロパティ

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

ボックス

概説

視覚系ブラウザでは、ほぼ全要素（置き換え要素以外のインライン要素とテーブルの列系要素を除くことに注意）が長方形のボックスとして扱われます。このボックスは次の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
• min-width,max-width
• height
• min-width,max-height

widthプロパティ

widthプロパティは、内容領域の幅を設定します。設定値は、実数値＋単位，%値，keyword（auto）です。

min-widthプロパティ

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

max-widthプロパティ

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

heightプロパティ

heightプロパティは、内容領域の高さを設定します。設定値は、実数値＋単位，%値，keyword（auto）です。

min-heightプロパティ

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

max-heightプロパティ

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

padding

• padding

paddingプロパティ

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

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

border

• border-color
• border-width
• border-style
• border

border-colorプロパティ

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

border-widthプロパティ

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

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それぞれ単独で指定することも可能です。

borderプロパティ

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

margin

• margin

marginプロパティ

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

表示と位置

表示

• display

displayプロパティ

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

none

指定された要素の完全な非表示。存在しないものとして扱う。

block

指定された要素をブロックレベルにします。

inline

指定された要素をインラインにします。

run-in

指定された要素の後に続く要素をインラインで改行なしに配置します。

compact

指定された要素の後に続くブロックレベル要素の左マージン内にインラインで配置します。

list-item

指定された要素に対して、リストのマーカー用ボックスも生成します。

marker

ブロックレベル要素の疑似要素（before，after）のみに適用され、その生成内容がリストのマーカーであることを宣言します。

table関係

表に関する要素があらかじめ定義されていない言語（XMLなど）で、特定の要素をHTMLの表関係の要素に当てはめるのに使う。

位置決め

• position
• top,bottom,left,right
• z-index

positionプロパティ

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

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

static（初期値）

top，bottom，left，rightプロパティを適用しません。

relative

通常の配置される位置からの相対位置で配置します。

absolute

親ボックスを基準として絶対位置で配置します。他の要素の配置に一切影響を与えません。親ボックスは、position が static 以外である祖先要素、それが存在しない場合は「閲覧領域」（ウィンドウ≒BODY要素）になります。

fixed

表示位置が固定されます。その他はabsoluteと同様の扱い。

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

top，bottom，left，rightプロパティ設定値は、実数値＋単位，%値，keyword（auto）です。

z-indexプロパティ

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

回り込み

• float
• clear

floatプロパティ

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

clearプロパティ

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

はみ出し

• overflow

overflowプロパティ

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

その他

• clip
• visibility
• direction
• unicode-bidi

clipプロパティ

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

visibilityプロパティ

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

directionプロパティ

directionプロパティは、文字表記の方向を設定します。設定値はkeyword（ltr：左から右，rtl：右から左）です。

unicode-bidiプロパティ

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

normal

初期設定のまま。

embed

指定した要素がインライン要素の場合、文字方向に関する指示をdirectionプロパティにしたがって新たに組み込みます。

sidi-override

指定した要素がインライン要素またはインライン要素のみをふくむblocklevel要素の場合、UNICODEの文字方向に関する指示をdirectionプロパティの設定で上書きします。

リスト

リスト

• list-style-type
• list-style-image
• list-style-position
• list-style
• marker-offset

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

グルジア数字になります。

list-style-imageプロパティ

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

list-style-positionプロパティ

マーカーの位置をちょっと変えられます。設定値は、keyword（outside：初期値，inside）です。

list-styleプロパティ

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

marker-offsetプロパティ

マーカーとリスト項目との間隔を設定します。設定値は、実数値＋単位，keyword（auto）です。

カーソル

カーソル

• cursor

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

画像になります。

テーブル

表示方法

• table-layout

table-layoutプロパティ

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

fixed

テーブル全体のデータをすべて読み込む前に表示します。あらかじめ、widthプロパティを指定しておく必要です。

auto（初期値）

テーブル全体のデータをすべて読み込み後に表示します。

border

• border-collapse
• border-spacing

border-collapseプロパティ

border-collapseは、セルのborderの表示形式を設定します。設定値は、keyword（collapse，separate）です。

collapse（初期値）

テーブル全体の周りのborderと各セルのborderを重ねて表示します。

separate

テーブル全体の周りのborderと各セルのborderを別々に表示します。

border-spacingプロパティ

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

空セル

• empty-cells

empty-cellsプロパティ

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

show

border表示

hide

border非表示

caption

• caption-side

caption-sideプロパティ

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

内容の追加

内容の追加

• content

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段階浅くします。（引用符の記号が変わる）

引用符

• quotes

quotesプロパティ

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

連番設定

• counter-increment
• counter-reset

counter-incrementプロパティ

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

counter-resetプロパティ

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

アウトライン

概説

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

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

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

アウトライン

• outline-color
• outline-style
• outline-width
• outline

outline-colorプロパティ

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

outline-styleプロパティ

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

none

非表示

solid

実線

double

2本線

その他

groove，ridge，inset，outset，dashed，dottedがあります。ボックスの解説を参照のこと。

outline-widthプロパティ

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

outlineプロパティ

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

印刷

プロパティの設定

• @page

@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プロパティ

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

実数値＋単位

縦、横の順で大きさを指定します。値をひとつだけ指定した場合には縦横同じ大きさになります。

auto

とくに制御しない

portrait

用紙縦置き

landscape

用紙横置き

改ページ

• page-break-before（after）
• page-break-inside
• widows，orphans

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

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

auto

とくに制御しない

always

必ず改ページ

avoid

改ページ禁止

left，right

見開き印刷における左右の指定

page-break-nsideプロパティ

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

auto

とくに制御しない

avoid

改ページ禁止

widows，orphansプロパティ

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

widowsプロパティ

改ページ後のページの最初に最低限必要な行数を設定する。（例えば、2行しかない段落があるとします。widowを2に設定すれば、この段落の途中で改ページされることはありえません。もし途中で改ページすれば、改ページ後のページの最初に1行しかない段落が出現してしまうからです）

orphansプロパティ

改ページ前のページの最後に最低限必要な行数を設定する。

トンボ

• marks

marksプロパティ

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

crop

コーナートンボを出力（スペースで区切ってcrossと同時に指定可能）

cross

センタートンボを出力（スペースで区切ってcropと同時に指定可能）

none

トンボを出力しない

Information

• Prev：単位と色／CSS講座
• index
• Next：アクセス向上を考える［初級篇］

• 筆者は徳保隆夫（とくほたかお）です。1980年愛知県生まれ。千葉県成田市育ち。メーカーに技術者として就職後、関東各地を転々としています。……という設定です。
• 私の文章は全て実記ではなく小説なので、客観的事実と異なる記述を多々含みます。
• 著作権は主張しません。詳細はInfoで、過去ログなどはNoteでご案内します。