CSS3 リファレンス

メモ:

Cascading Style Sheets 3 (CSS3)で定義されているプロパティを一覧にまとめています。まだ草案の段階のものもあるため全てではありません。

インデックス

| ボックス | 背景とボーダー | 段組レイアウト | テーブル | フォント・テキスト | リスト | アニメーション | ユーザーインタフェイス(アウトライン) | イメージ | |

ボックス

プロパティ 概要
align-content 複数行の flex アイテムを交差軸に沿ってどうレイアウトするかを決めます。
align-items flex アイテムを交差軸に沿ってどうレイアウトするかを決ます。
align-self flex アイテムの縦方向の揃え位置を指定します。
bottom 要素の包含ブロックに対する下オフセット値を指定します。
clear ボックスの指定部分が先のボックスに接しないように指定します。
display ボックスの表示種類を指定します。
flex フレックスアイテムをフレックスコンテナ内に収めるためどのように伸縮させるかまとめて指定します。
flex-basis flex アイテムの横幅を指定します。
flex-direction flex アイテムの配置方向と順序を指定します。
flex-flow flex-direction と flex-wrap をまとめて指定します。
flex-grow flex アイテムの伸長率を指定します。
flex-shrink flex アイテムの縮小率を指定します。
flex-wrap flex アイテムを折り返して配置するかしないかを指定します。
float ボックスの浮動化方法を指定します。
height 要素の高さを指定します。
hyphens 単語のハイフネーションを行う方法を指定します。
justify-content flex アイテムを主軸に沿ってどうレイアウトするかを指定します。
left 要素の包含ブロックに対する左オフセット値を指定します。
margin 要素の上下左右マージンを指定します。
margin-bottom 要素の下側マージンを指定します。
margin-left 要素の左側マージンを指定します。
margin-right 要素の右側マージンを指定します。
margin-top 要素の上側マージンを指定します。
max-height 要素の最大高さを指定します。
max-width 要素の最大幅を指定します。
min-width 要素の最小幅を指定します。
order フレックスコンテナーの中のアイテムの並び順を指定します。
overflow 要素に収まらない場合の表示方法を指定します。
padding 上下左右4辺のコンテンツとボーダーとの間隔を指定します。
padding-bottom 要素下側のパディングを指定します。
padding-left 要素左側のパディングを指定します。
padding-right 要素右側のパディングを指定します。
padding-top 要素上側のパディングを指定します。
position 要素の配置方法を指定します。
resize 要素のサイズを変更できるかどうか、変更できる方向を指定します。
right 要素の包含ブロックに対する右オフセット値を指定します。
top 要素の包含ブロックに対する上オフセット値を指定します。
visibility 要素の表示・非表示を指定します。
width 要素の幅を指定します。
z-index z軸の上下関係を指定します。

背景とボーダー

プロパティ 概要
background 色、画像、原点と寸法、反復方法など、背景に関するすべてのプロパティをまとめて指定します。
background-attachment 背景画像の位置をビューポートの中に固定するか一緒に移動するかを指定します。
background-blend-mode 要素の背景画像どうしや要素の背景色と、どのように混合するかを指定します。
background-clip 背景の適用範囲を境界の下まで拡張するかどうか指定します。
background-color 背景色を指定します。
background-image 背景画像を指定します。
background-origin 背景の原点位置を指定します。
background-position 背景画像の初期位置を指定します。
background-repeat 背景画像の繰り返し方法を指定します。
background-size 背景画像のサイズを指定します。
border 枠(境界線)の太さ、色、線種をまとめて指定します。
border-bottom 要素の下側の境界に太さ、色、線種をまとめて指定します。
border-bottom-color 要素の下側の境界線の色を設定します。
border-bottom-left-radius 要素の左下の角を丸めます。
border-bottom-right-radius 要素の右下の角を丸めます。
border-bottom-style 要素の下側の線種を指定します。
border-bottom-width 要素の下側の線の幅を指定します。
border-color 枠(境界線)の色を指定します。
border-image 境界線に画像を指定します。
border-image-outset 境界線画像が境界ボックスからはみ出す幅を指定します。
border-image-repeat 境界線画像をどのように境界線に配置するかを指定する。(伸ばしたり、スペースを入れたり)
border-image-slice 境界線画像の分割位置を指定します。
border-image-source 境界画像に使う画像を指定します。
border-image-width 境界画像の幅を指定します。
border-left 要素の左側の境界に太さ、色、線種をまとめて指定します。
border-left-color 要素の左側の境界線の色を設定します。
border-left-style 要素の左側の線種を指定します。
border-left-width 要素の左側の線の幅を指定します。
border-radius 要素の角を丸めるようまとめて指定します。
border-right 要素の右側の境界に太さ、色、線種をまとめて指定します。
border-right-color 要素の右側の境界線の色を設定します。
border-right-style 要素の右側の線種を指定します。
border-right-width 要素の右側の線の幅を指定します。
border-style 枠(境界線)の線種を指定します。
border-top 要素の上側の境界に太さ、色、線種をまとめて指定します。
border-top-color 要素の上側の境界線の色を設定します。
border-top-left-radius 要素の左上の角を丸めます。
border-top-right-radius 要素の右上の角を丸めます。
border-top-style 要素の上側の線種を指定します。
border-top-width 要素の上側の線の幅を指定します。
border-width 枠(境界線)の太さをまとめて指定します。
box-shadow 要素に影を付けます。
box-sizing 要素の幅と高さにボーダーを含めるかを指定します。(計算方法)
color 前景色を指定します。

段組レイアウト

プロパティ 概要
column-count 指定された段数で要素のコンテンツを分割します。
column-fill 段組みされたコンテンツをどのように配置するか指定します。
column-gap 段と段の間隔を指定します。
column-rule 段の境界線の太さ、色、線種をまとめて指定します。
column-rule-color 段の境界線の色を指定します。
column-rule-style 段の境界線の線種を指定します。
column-rule-width 段の境界線の太さを指定します。
column-span 段組み中で複数の段をまたがる要素を指定します。
column-width 段の幅を指定します。
columns 段数や段の幅をまとめて指定します。

テーブル

プロパティ 概要
border-collapse 表中のセルが境界線を共有するかしないかを指定します。
border-spacing 隣接するセル間のスペースを指定します。
caption-side 表に対するキャプション(題名)の相対位置を指定します。
empty-cells 空白セルのボーダーの表示・非表示を指定します。
table-layout 表の配置方法(セル・行・列)を指定します。

フォント・テキスト

プロパティ 概要
content 内容(コンテンツ)を挿入します。
direction 文字表記の方向を指定します。
font フォントに関する設定をまとめて指定します。
font-family フォントの種類を指定します。
font-feature-settings OpenType フォントの拡張タイポグラフィの特性を制御します。(字詰・カーニング)
font-kerning フォントに存在するカーニングを指定します。
font-size フォントの大きさを指定します。
font-size-adjust 小文字の高さに基いたフォントサイズの調整を指定します。( CSS3 で新たに定義し直されました。)
font-stretch フォントの幅(伸縮)を指定します。( CSS3 で新たに定義し直されました。)
font-style 斜体等のフォントのスタイルを指定します。
font-weight フォントの太さを指定します。
letter-spacing テキストの文字間隔を指定します。
line-height 行の高さを指定します。
quotes 要素の前後に挿入される、引用符を指定します。
text-align ブロック要素とテーブルセルの位置揃えを指定します。
text-decoration テキストに付加する装飾(下線や上線,取り消し線,点滅,色)をまとめて指定します。
text-indent インデントを指定します。
text-transform テキストの大文字化小文字化等変換を指定します。
unicode-bidi Unicodeにおける文字表記の方向を組み込み、または上書きする際に指定します。
vertical-align インライン要素とテーブルセル垂直方向の位置揃えを指定します。
white-space スペース(空白)の扱いを指定します。
word-spacing テキストの単語間隔を指定します。

リスト

プロパティ 概要
list-style リストのスタイルをまとめて指定します。
list-style-image リスト項目のマーカーとして使用する画像を指定します。
list-style-position マーカーの位置を指定します。
list-style-type リスト項目のマーカーの種類を指定します。

アニメーション

プロパティ 概要
animation アニメーションについてまとめて指定します。
animation-delay アニメーションをいつ開始するかを指定します。
animation-direction アニメーションを再生方向を指定します。(順方向、逆方向、前後反転)
animation-duration 1回のアニメーションに使用する時間の長さを指定します。
animation-fill-mode CSS アニメーション実行の前・後・前後にどうスタイルを適用するかを指定します。
animation-iteration-count アニメーションの繰り返し回数を指定します
animation-name 要素に適用される1つまたは複数のアニメーションを指定します。
animation-play-state アニメーションが実行中か停止中かを指定します。
animation-timing-function アニメーションの再生中にどのように進行(速度変化等)するかを指定します。

ユーザーインタフェイス(アウトライン)

プロパティ 概要
cursor カーソルの種類を指定します。
outline 輪郭線(アウトライン)に関する設定をまとめて指定します。
outline-color 輪郭線の色を指定します。
outline-offset ボーダーと輪郭線の間隔を指定します。
outline-style 輪郭線の線種を指定します。
outline-width 輪郭線の太さを指定します。

イメージ

プロパティ 概要
object-fit img や video などをコンテナーにどのようにはめ込むか指定します。

プロパティ 概要
opacity 要素の不透明度を指定します。