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つのパラメータをスペースで区切って指定します。各パラメータには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 ルビテキストとルビベースコンテンツの相互のテキスト整列方法を制御する 3
ruby-overhang ルビテキストがルビベースの幅を超える場合、ルビテキストが自分のベース以外の隣接するテキストに部分的にオーバーハングすることを許可するかどうかを決定する 3
ruby-position そのbaseがルビテキストの位置を制御する 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 ナビゲーション（tab）順序を指定する。 3
nav-left ユーザーが左矢印キーを押したときに左方向へ移動するナビゲーション位置を指定する 3
nav-right ユーザーが右矢印キーを押したときに右方向へ移動するナビゲーション位置を指定する 3
nav-up ユーザーが上矢印キーを押したときに上方向へ移動するナビゲーション位置を指定するa 3
outline-offset アウトライン枠の border の外縁からのオフセットを設定する 3
resize 要素のサイズを変更できるかどうかを定義する 3
その他の拡張