CSS リファレンスマニュアル

NoteサンプルのCSSリファレンスマニュアルは、すべての主要ブラウザでテスト済みです。

CSS プロパティ

CSS プロパティグループ：

「CSS」列は、プロパティがどのCSSバージョン（CSS1、CSS2、またはCSS3）で定義されているかを示します。

アニメーションプロパティ

プロパティ 説明 CSS
@keyframes アニメーションを定義します。@keyframesで定義されたアニメーション名は、animation-nameによって使用されます。 3
animation 複合プロパティ。オブジェクトに適用されるアニメーション効果を取得または設定します。 3
animation-name オブジェクトに適用されるアニメーション名を取得または設定します。アニメーション名は@keyframesで定義されるため、@keyframesルールと併用する必要があります。 3
animation-duration オブジェクトのアニメーションの所要時間を取得または設定します。 3
animation-timing-function オブジェクトのアニメーションの遷移タイプを取得または設定します。 3
animation-delay オブジェクトのアニメーションの遅延時間を取得または設定します。 3
animation-iteration-count オブジェクトのアニメーションの繰り返し回数を取得または設定します。 3
animation-direction オブジェクトのアニメーションがループ中に逆方向に動くかどうかを取得または設定します。 3
animation-play-state オブジェクトのアニメーションの状態を取得または設定します。 3

背景プロパティ

プロパティ 説明 CSS
background 複合プロパティ。オブジェクトの背景特性を設定します。 1
background-attachment 背景画像がオブジェクトの内容とともにスクロールするか、固定されるかを設定または取得します。最初にbackground-imageプロパティを指定する必要があります。 1
background-color オブジェクトの背景色を設定または取得します。 1
background-image オブジェクトの背景画像を設定または取得します。 1
background-position オブジェクトの背景画像の位置を設定または取得します。最初にbackground-imageプロパティを指定する必要があります。 1
background-repeat オブジェクトの背景画像をどのように敷き詰めて埋めるかを設定または取得します。最初にbackground-imageプロパティを指定する必要があります。 1
background-clip オブジェクトの背景画像を外側に切り取る領域を指定します。 3
background-origin オブジェクトの背景画像がbackground-positionを計算する際の基準原点（位置）を設定または取得します。 3
background-size オブジェクトの背景画像のサイズを取得または設定します。 3

ボーダー(Border) と アウトライン(Outline) プロパティ

プロパティ 説明 CSS
border 複合プロパティ。オブジェクトのボーダーの特性を設定します。 1
border-bottom 複合プロパティ。オブジェクトの下部ボーダーの特性を設定します。 1
border-bottom-color オブジェクトの下部ボーダーの色を設定または取得します。 1 
border-bottom-style オブジェクトの下部ボーダーのスタイルを設定または取得します。 1
border-bottom-width オブジェクトの下部ボーダーの幅を設定または取得します。 1
border-color オブジェクトのボーダーの色を設定または取得します。 1
border-left 複合プロパティ。オブジェクトの左ボーダーの特性を設定します。 1
border-left-color オブジェクトの左ボーダーの色を設定または取得します。 1
border-left-style オブジェクトの左ボーダーのスタイルを設定または取得します。 1
border-left-width オブジェクトの左ボーダーの幅を設定または取得します。 1
border-right 複合プロパティ。オブジェクトの右ボーダーの特性を設定します。 1
border-right-color オブジェクトの右ボーダーの色を設定または取得します。 1
border-right-style オブジェクトの右ボーダーのスタイルを設定または取得します。 1
border-right-width オブジェクトの右ボーダーの幅を設定または取得します。 1
border-style オブジェクトのボーダーのスタイルを設定または取得します。 1
border-top 複合プロパティ。オブジェクトの上部ボーダーの特性を設定します。 1
border-top-color オブジェクトの上部ボーダーの色を設定または取得します。 1
border-top-style オブジェクトの上部ボーダーのスタイルを設定または取得します。 1
border-top-width オブジェクトの上部ボーダーの幅を設定または取得します。 1
border-width オブジェクトのボーダーの幅を設定または取得します。 1
outline 複合プロパティ。オブジェクトの外側の線のアウトラインを設定または取得します。 2
outline-color オブジェクトの外側の線のアウトラインの色を設定または取得します。 2
outline-style オブジェクトの外側の線のアウトラインのスタイルを設定または取得します。 2
outline-width オブジェクトの外側の線のアウトラインの幅を設定または取得します。 2
border-bottom-left-radius オブジェクトの左下隅の角丸ボーダーを設定または取得します。2つのパラメータを指定します。2つのパラメータはスペースで区切られ、各パラメータには1つの値のみ設定できます。最初のパラメータは水平半径を表し、2番目のパラメータは垂直半径を表します。2番目のパラメータが省略された場合、デフォルトでは最初のパラメータと等しくなります。 3
border-bottom-right-radius オブジェクトの右下隅の角丸ボーダーを設定または取得します。 3
border-image オブジェクトのボーダーのスタイルを画像で埋めるように設定または取得します。 3
border-image-outset ボーダー画像がボーダーを超える量を指定します。 3
border-image-repeat 画像ボーダーを繰り返す（repeated）、伸縮する（stretched）、または敷き詰める（rounded）べきかを指定します。 3
border-image-slice 画像ボーダーの内側へのオフセットを指定します。 3
border-image-source border-styleプロパティで設定されたボーダースタイルの代わりに使用する画像を指定します。 3
border-image-width 画像ボーダーの幅を指定します。 3
border-radius オブジェクトが角丸ボーダーを使用するように設定または取得します。 3
border-top-left-radius 左上隅のボーダーの形状を定義します。 3
border-top-right-radius 右上隅のボーダーの形状を定義します。 3
box-decoration-break インライン要素の折り返しを指定します。 3
box-shadow ボックスに1つ以上の影を追加します。 3

ボックス(Box) プロパティ

プロパティ 説明 CSS
overflow-x コンテンツが要素のコンテンツ領域をはみ出した場合、コンテンツの左/右端を切り取るかどうかを指定します。 3
overflow-y コンテンツが要素のコンテンツ領域をはみ出した場合、コンテンツの上/下端を切り取るかどうかを指定します。 3
overflow-style 要素のオーバーフロー時に推奨されるスクロール方法を指定します。 3
rotation rotation-pointプロパティで定義された点を中心に要素を回転させます。 3
rotation-point 左上のボーダー端からのオフセット点を定義します。 3

色(Color) プロパティ

プロパティ 説明 CSS
color-profile ソースのカラープロファイルのデフォルト以外の仕様を許可します。 3
opacity 要素の透明度レベルを設定します。 3
rendering-intent デフォルトのカラープロファイルレンダリングインテントを超える他の仕様を許可します。 3

パディング(Padding) プロパティ

プロパティ 説明 CSS
padding 1つの宣言ですべてのパディングプロパティを設定します。 1
padding-bottom 要素の下パディングを設定します。 1
padding-left 要素の左パディングを設定します。 1
padding-right 要素の右パディングを設定します。 1
padding-top 要素の上パディングを設定します。 1

メディアページコンテンツプロパティ

プロパティ 説明 CSS
bookmark-label ブックマークのラベルを指定します。 3
bookmark-level ブックマークのレベルを指定します。 3
bookmark-target ブックマークリンクのターゲットを指定します。 3
float-offset フロート要素を反対方向に押し出し、常にフロートを維持します。 3
hyphenate-after ハイフネーション（単語の途中での改行）を行う際、ハイフネーション文字の後に必要な最小文字数を指定します。 3
hyphenate-before ハイフネーションを行う際、ハイフネーション文字の前に必要な最小文字数を指定します。 3
hyphenate-character ハイフネーションが発生したときに表示する文字列を指定します。 3
hyphenate-lines 要素内で連続してハイフネーションされる行の最大数を指定します。 3
hyphenate-resource ブラウザがハイフネーション位置を決定するのに役立つ外部リソースを、カンマ区切りのリストで指定します。 3
hyphens 段落のレイアウトを改善するために単語をどのように分割するかを設定します。 3
image-resolution 正しい画像解像度を指定します。 3
marks ドキュメントにcrop（トリム）マークやcross（クロス）マークを追加します。 3
string-set   3

寸法(Dimension) プロパティ

プロパティ 説明 CSS
height 要素の高さを設定します。 1
max-height 要素の最大高さを設定します。 2
max-width 要素の最大幅を設定します。 2
min-height 要素の最小高さを設定します。 2
min-width 要素の最小幅を設定します。 2
width 要素の幅を設定します。 1

フレキシブルボックスモデル（Flexible Box）プロパティ(新)

プロパティ 説明 CSS
flex 複合プロパティ。フレキシブルボックスモデルオブジェクトの子要素がスペースをどのように分配するかを設定または取得します。 3
flex-grow フレキシブルボックスの拡大比率を設定または取得します。 3
flex-shrink フレキシブルボックスの縮小比率を設定または取得します。 3
flex-basis フレキシブルボックスの伸縮基準値を設定または取得します。 3
flex-flow 複合プロパティ。フレキシブルボックスモデルオブジェクトの子要素の配置方法を設定または取得します。 3
flex-direction このプロパティは、flexコンテナの主軸方向を定義することで、flex子要素のflexコンテナ内での位置を決定します。 3
flex-wrap このプロパティは、flexコンテナが単一行か複数行かを制御し、同時に交差軸の方向が新しい行の積み重なる方向を決定します。 3
align-content フレキシブルコンテナ内のアイテムが交差軸上の利用可能なすべてのスペースを占めていない場合に、コンテナ内のアイテムを（垂直方向に）整列させます。 3
align-items flexコンテナの現在の行におけるflex子要素の側軸（縦軸）方向の整列方法を定義します。 3
align-self フレックスアイテムを単独で側軸（縦軸）方向に整列する方法を定義します。 3
justify-content フレックスボックス要素の主軸（横軸）方向の整列方法を設定または取得します。 3
order フレックスボックスモデルオブジェクトの子要素が出現する順序を設定または取得します。 3

フレックスボックスモデル（Flexible Box）プロパティ（旧）

プロパティ 説明 CSS
box-align ボックスの子要素をどのように整列するかを指定します。 3
box-direction ボックスの子要素をどの方向に表示するかを指定します。 3
box-flex ボックスの子要素がフレックスサイズか固定サイズかを指定します。 3
box-flex-group フレックス要素をFlexグループに割り当てます。 3
box-lines 親ボックスのスペースを使い切るたびに、新しい行（列）を開始するかどうかを指定します。 3
box-ordinal-group ボックスの子要素の表示順序を指定します。 3
box-orient ボックスの子要素を水平方向または垂直方向のどちらに配置するかを指定します。 3
box-pack 垂直ボックス内の水平ボックスの水平位置と垂直位置を指定します。 3

フォント（Font）プロパティ

プロパティ 説明 CSS
font 1つの宣言ですべてのフォントプロパティを設定します。 1
font-family テキストのフォントファミリーを指定します。 1
font-size テキストのフォントサイズを指定します。 1
font-style テキストのフォントスタイルを指定します。 1
font-variant テキストのフォントスタイルを指定します。 1
font-weight フォントの太さを指定します。 1
@font-face Webサイトが「Webセーフ」フォント以外のフォントをダウンロードして使用できるようにするルールです。 3
font-size-adjust 要素にaspect（アスペクト）値を指定します。 3
font-stretch 現在のフォントファミリーを縮小または拡大します。 3

生成コンテンツプロパティ（Generated Content Properties）

プロパティ 説明 CSS
content :before および :after 擬似要素と組み合わせて、生成コンテンツを挿入します。 2
counter-increment 1つ以上のカウンターを増分または減分します。 2
counter-reset 1つ以上のカウンターを作成またはリセットします。 2
quotes 入れ子になった引用の引用符の種類を設定します。 2
crop 置換要素が、オブジェクト全体の矩形領域を置き換えるオブジェクトとしてのみ機能することを許可します。 3
move-to フローから要素を削除し、文書内の後方の位置に再挿入します。 3
page-policy ページに基づいて、所定の要素に適用されるカウンターの文字列値を決定します。 3

グリッド（Grid）プロパティ

プロパティ 説明 CSS
grid-column グリッド要素の列の開始位置と終了位置を設定します。 3
grid-row グリッド要素の行の開始位置と終了位置を設定します。 3

ハイパーリンク（Hyperlink）プロパティ

プロパティ 説明 CSS
target target-name、target-new、target-positionプロパティを設定するショートハンドプロパティです。 3
target-name リンクをどこで開くか（ターゲット位置）を指定します。 3
target-new 新しいターゲットリンクを新しいウィンドウで開くか、既存のウィンドウに新しいタブで開くかを指定します。 3
target-position 新しいターゲットリンクを配置する場所を指定します。 3

ラインボックス（Linebox）プロパティ

プロパティ 説明 CSS
alignment-adjust 要素のより正確な整列を可能にします。 3
alignment-baseline 親によって指定されたインラインレベルの要素をどのように整列するかを指定します。 3
baseline-shift dominant-baselineを、dominant-baselineに対して再配置することを許可します。 3
dominant-baseline scaled-baseline-table（スケールドベースラインテーブル）を指定します。 3
drop-initial-after-adjust ドロップの主要接続ポイントの初期位置合わせ点を設定します。 3
drop-initial-after-align 行内のイニシャル行を整列する設定では、イニシャルを持つボックスがプライマリ接続ポイントを使用します。 3
drop-initial-before-adjust ドロップの補助接続ポイントの初期位置合わせ点を設定します。 3
drop-initial-before-align 行内のイニシャル行を整列する設定では、イニシャルを持つボックスが補助接続ポイントを使用します。 3
drop-initial-size 局所的なイニシャルのドロップキャップを制御します。 3
drop-initial-value ドロップ式のイニシャル効果を有効にします。 3 
inline-box-align 複数行のインラインブロック内の行に、前後のインライン要素との整列を設定します。 3
line-stacking line-stacking-strategy、line-stacking-ruby、line-stacking-shiftプロパティを設定するショートハンドプロパティです。 3
line-stacking-ruby Ruby注釈要素を含む行の、ブロック要素に対するスタッキング方法を設定します。 3
line-stacking-shift base-shift行内のブロック要素が含む要素のスタッキング方法を設定します。 3
line-stacking-strategy 内部にブロック要素を含むスタッキングラインボックスのスタッキング方法を設定します。 3
text-height インラインボックスのテキストコンテンツ領域にblock-progressionの寸法を設定します。 3

リスト（List）プロパティ

プロパティ 説明 CSS
list-style 1つの宣言ですべてのリストプロパティを設定します。 1
list-style-image 画像をリスト項目のマーカーとして設定します。 1
list-style-position リスト項目マーカーの配置位置を設定します。 1
list-style-type リスト項目マーカーの種類を設定します。 1

マージン（Margin）プロパティ

プロパティ 説明 CSS
margin 1つの宣言ですべてのマージンプロパティを設定します。 1
margin-bottom 要素の下マージンを設定します。 1
margin-left 要素の左マージンを設定します。 1
margin-right 要素の右マージンを設定します。 1
margin-top 要素の上マージンを設定します。 1

マーキー（Marquee）プロパティ

プロパティ 説明 CSS
marquee-direction コンテンツが移動する方向を設定します。 3
marquee-play-count コンテンツが移動する回数を設定します。 3
marquee-speed コンテンツがスクロールする速度を設定します。 3
marquee-style コンテンツが移動するスタイルを設定します。 3

マルチカラム（Multi-column）プロパティ

プロパティ 説明 CSS
column-count 要素が分割されるべき列数を指定します。 3
column-fill 列をどのように埋めるかを指定します。 3
column-gap 列間のギャップを指定します。 3
column-rule すべてのcolumn-rule-*プロパティを設定するショートハンドプロパティです。 3
column-rule-color 列間のルールの色を指定します。 3
column-rule-style 列間のルールのスタイルを指定します。 3
column-rule-width 列間のルールの幅を指定します。 3
column-span 要素がまたがるべき列数を指定します。 3
column-width 列の幅を指定します。 3
columns 列幅と列数を設定するショートハンドプロパティです。 3

ページメディア（Paged Media）プロパティ

プロパティ 説明 CSS
fit 幅と高さのプロパティがどちらもautoでない場合、置換要素をどのように拡大縮小するかのヒントを提供します。 3
fit-position ボックス内のオブジェクトの整列方法を決定します。 3
image-orientation ユーザーエージェントが画像に適用する、右方向または時計回りの回転を指定します。 3
page 要素が表示されるべきページの特定の種類を指定します。 3
size BOXを含むページコンテンツのサイズと向きを指定します。 3

ポジショニング（Positioning）プロパティ

プロパティ 説明 CSS
bottom 位置指定要素の下マージン境界と、その包含ブロックの下境界との間のオフセットを設定します。 2
clear 要素のどの側で他のフロート要素を許可しないかを指定します。 1
clip 絶対位置指定された要素をクリップ（切り抜き）します。 2
cursor 表示するカーソルの種類（形状）を指定します。 2
display 要素が生成するボックスの種類を指定します。 1
float ボックスをフロートさせるかどうかを指定します。 1
left 位置指定要素の左マージン境界と、その包含ブロックの左境界との間のオフセットを設定します。 2
overflow
 コンテンツが要素のボックスをオーバーフローしたときに何が起こるかを指定します。 2
position 要素の位置指定の種類を指定します。 2
right 位置指定要素の右マージン境界と、その包含ブロックの右境界との間のオフセットを設定します。 2
top 位置指定要素の上マージン境界と、その包含ブロックの上境界との間のオフセットを設定します。 2
visibility 要素を表示するかどうかを指定します。 2
z-index 要素のスタッキング順序を設定します。 2

ページング（Print）プロパティ

プロパティ 説明 CSS
orphans 要素内で改ページが発生したときに、ページの下部に保持しなければならない最小行数を設定します。 2
page-break-after 要素の後の改ページ動作を設定します。 2
page-break-before 要素の前の改ページ動作を設定します。 2
page-break-inside 要素の内部の改ページ動作を設定します。 2
widows 要素内で改ページが発生したときに、ページの上部に保持しなければならない最小行数を設定します。 2

Rubyプロパティ

プロパティ 説明 CSS
ruby-align RubyテキストとRubyベースコンテンツの、互いに対するテキストの整列方法を制御します。 3
ruby-overhang RubyテキストがRubyベースの幅を超える場合、Rubyテキストが自身のベース以外の隣接する任意のテキストに部分的にぶら下がることを許可するかどうかを決定します。 3
ruby-position そのbaseはRubyテキストの位置を制御します。 3
ruby-span annotation（注釈）要素のスパン動作を制御します。 3

音声（Speech）プロパティ

プロパティ 説明 CSS
mark mark-beforeおよびmark-afterプロパティを設定するショートハンドプロパティです。 3
mark-after 名前付きマーカーをオーディオストリームに接続することを許可します。 3
mark-before 名前付きマーカーをオーディオストリームに接続することを許可します。 3
phonemes テキストを含む対応する要素内の音標（発音記号）による発音を指定します。 3
rest rest-beforeおよびrest-afterプロパティを設定するショートハンドプロパティです。 3
rest-after 要素のコンテンツを読み上げ終えた後に、休止するか韻律境界に従うかを指定します。 3
rest-before 要素のコンテンツを読み上げる前に、休止するか韻律境界に従うかを指定します。 3
voice-balance 左右のチャンネル間のバランスを指定します。 3
voice-duration 選択した要素のコンテンツを提示するのにかかる時間を指定します。 3
voice-pitch 平均的な音声のピッチ（周波数）を指定します。 3
voice-pitch-range 平均ピッチの変化を指定します。 3
voice-rate 話す速度を制御する 3
voice-stress 強調レベルを指定する 3
voice-volume 音声合成の波形出力の振幅を指す 3

テーブル（Table）プロパティ

プロパティ 説明 CSS
border-collapse テーブルの枠線を結合するかどうかを指定する 2
border-spacing 隣接するセルの枠線間の距離を指定する 2
caption-side テーブルのキャプションの位置を指定する 2
empty-cells テーブル内の空のセルに枠線と背景を表示するかどうかを指定する 2
table-layout テーブルに使用するレイアウトアルゴリズムを設定する 2

テキスト（Text）プロパティ

プロパティ 説明 CSS
color テキストの色を設定する 1
direction テキストの方向／書字方向を指定する 2
letter-spacing 文字間隔を設定する 1
line-height 行の高さを設定する 1
text-align テキストの水平方向の配置を指定する 1
text-decoration テキストに追加する装飾効果を指定する 1
text-indent テキストブロックの最初の行のインデントを指定する 1
text-transform テキストの大文字と小文字を制御する 1
unicode-bidi   2
vertical-align 要素の垂直方向の配置を設定する 1
white-space 要素内の空白の処理方法を設定する 1
word-spacing 単語の間隔を設定する 1
text-emphasis 要素のテキストに圏点（傍点）を適用し、圏点の前景色を設定する。 1
hanging-punctuation 句読点を行ボックスからはみ出させることができるかどうかを指定する 3
punctuation-trim 句読点を除去するかどうかを指定する 3
text-align-last text-align が justify に設定されている場合の、最後の行の配置方法。 3
text-justify text-align が justify に設定されている場合の分散配置の方法を指定する。 3
text-outline 文字のアウトラインを設定する。 3
text-overflow テキストが包含要素からあふれたときに何が起こるかを指定する 3
text-shadow テキストに影を追加する 3
text-wrap テキストの折り返しルールを指定する 3
word-break 非CJKテキストの改行ルールを指定する 3
word-wrap ブラウザーが長すぎる単語を折り返すかどうかを設定する。 3

2D/3D 変換プロパティ

プロパティ 説明 CSS
transform 2Dまたは3D変換を要素に適用する 3
transform-origin 変換される要素の位置を変更できるようにする 3
transform-style 3D空間で要素がどのようにネストされるかを指定する 3
perspective 3D要素の透視図での見え方を指定する 3
perspective-origin 3D要素の底部の位置を指定する 3
backface-visibility 要素が画面に面していないときに表示するかどうかを定義する 3

トランジション（Transition）プロパティ

プロパティ 説明 CSS
transition このプロパティは、transition-property、transition-duration、transition-timing-function、transition-delay の省略形である。 3
transition-property トランジションに使用するCSSプロパティを設定する。 3
transition-duration トランジションの所要時間を設定する。 3
transition-timing-function トランジションのタイミング関数を設定する。 3
transition-delay トランジションの開始時間を指定する。 3

ユーザーインターフェース（User-interface）プロパティ

プロパティ 説明 CSS
appearance 要素の外観スタイルを定義する 3
box-sizing 領域に適合するように、特定の要素を特定の方法で定義できるようにする 3
icon 要素にアイコンを指定する 3
nav-down ユーザーが下矢印キーを押したときに下方向へ移動する位置を指定する 3
nav-index ナビゲーション（タブ）の順序を指定する。 3
nav-left ユーザーが左矢印キーを押したときに左方向へ移動する位置を指定する 3
nav-right ユーザーが右矢印キーを押したときに右方向へ移動する位置を指定する 3
nav-up ユーザーが上矢印キーを押したときに上方向へ移動する位置を指定するa 3
outline-offset アウトラインをborder（境界線）の外側にオフセットする距離を設定する 3
resize 要素のサイズを変更できるかどうかを定義する 3
その他の拡張