★CSSリファレンス

背景

background-clip …… 背景の適用範囲を指定する
background-origin …… 背景の基準位置を指定する
background-size …… 背景画像のサイズを指定する

角丸

border-radius …… 角丸をまとめて指定する
border-top-left-radius …… 左上の角丸を指定する
border-top-right-radius …… 右上の角丸を指定する
border-bottom-left-radius …… 左下の角丸を指定する
border-bottom-right-radius …… 右下の角丸を指定する

画像ボーダー

border-image …… 画像ボーダーを指定する
border-image-source …… 画像ボーダーに使用する画像ファイルを指定する
border-image-slice …… ボーダー画像の使用範囲を指定する
border-image-width …… 画像ボーダーの太さを指定する
border-image-outset …… ボーダーイメージ領域がボーダーボックスを超えて拡がる量を指定する
border-image-repeat …… 画像ボーダーの繰り返し方法を指定する

ドロップシャドウ

box-shadow …… ボックスに影をつける

色・透明度

opacity …… 要素の透明度を指定する
rgba()関数 …… RGBAカラーモデルで色を指定する
color-profile …… カラープロファイルを指定する
rendering-intent …… 描画の際のカラープロフィールを指定する

linear-gradient()関数 …… 線形グラデーションを指定する
radial-gradient()関数 …… 円形グラデーションを指定する
repeating-linear-gradient()関数 …… 繰り返しの線形グラデーションを指定する
repeating-radial-gradient()関数 …… 繰り返しの円形グラデーションを指定する

フレックスアイテムの配置・折り返し・順序

flex-flow …… フレックスコンテナ内のアイテムの配置方向と折り返し方法をまとめて指定する
flex-direction …… フレックスコンテナ内のアイテムの配置方向を指定する
flex-wrap …… フレックスコンテナ内のアイテムの折り返し方法を指定する
order …… フレックスコンテナ内のアイテムの表示順序を指定する

フレックスアイテムの幅

flex …… フレックスコンテナ内のアイテムの幅についてまとめて指定する
flex-basis …… フレックスコンテナ内のアイテムの基本幅を指定する
flex-shrink …… フレックスコンテナ内のアイテムの縮み方の比率を指定する
flex-grow …… フレックスコンテナ内のアイテムの伸び方の比率を指定する

グリッドの定義

grid-template-rows …… グリッドトラックの縦方向のサイズリストを指定する
grid-template-columns …… グリッドトラックの横方向のサイズリストを指定する
grid-template-areas …… 名前付きグリッド領域を指定する
grid-template …… グリッドトラックのリストについてまとめて指定する
grid-auto-rows …… サイズリストでは不明確なグリッドトラックの縦方向のサイズを指定する
grid-auto-columns …… サイズリストでは不明確なグリッドトラックの横方向のサイズを指定する
grid-auto-flow …… グリッドアイテムの自動配置のされ方を指定する
grid …… グリッドについてまとめて指定する

グリッドアイテムの配置

grid-row-start …… 行グリッドの開始位置やサイズ（グリッドスパン）を指定する
grid-column-start …… 列グリッドの開始位置やサイズ（グリッドスパン）を指定する
grid-row-end …… 行グリッドの終了位置やサイズ（グリッドスパン）を指定する
grid-column-end …… 列グリッドの終了位置やサイズ（グリッドスパン）を指定する
grid-row …… 行グリッドの開始と終了についてまとめて指定する
grid-column …… 列グリッドの開始と終了についてまとめて指定する
grid-area …… 行グリッド・列グリッドの開始と終了についてまとめて指定する

カラムの数と幅

columns …… カラム幅とカラム数を指定する
column-width …… カラム幅を指定する
column-count …… カラム数を指定する

カラムの間隔と区切り線

column-gap …… アイテム同士の縦方向の間隔を指定する
column-rule …… カラムの区切り線のスタイル・幅・色を指定する
column-rule-color …… カラムの区切り線の色を指定する
column-rule-style …… カラムの区切り線のスタイルを指定する
column-rule-width …… カラムの区切り線の幅を指定する

カラムへの要素の配置

column-span …… 要素がまたがる（横切る）カラム数を指定する
column-fill …… カラム同士の高さ（内容量）を揃えるかどうかを指定する

ボックスの改行

break-before …… ボックス前でのカラムの区切り方法を指定する
break-after …… ボックス後でのカラムの区切り方法を指定する
break-inside …… ボックス途中でのカラムの区切り方法を指定する
orphans …… 改ページされる際の前ページの最低行数を指定する
widows …… 改ページされる際の次ページの最低行数を指定する
box-decoration-break …… ボックスが改行する際の表示形式を指定する

コンテナ内全体の揃え位置

align-content …… コンテナ内全体の交差軸方向（初期値では縦方向）の揃え位置を指定する
justify-content …… コンテナ内全体の主軸方向（初期値では横方向）の揃え位置を指定する
place-content …… コンテナ内全体の交差軸方向（初期値では縦方向）と主軸方向（初期値では横方向）の揃え位置をまとめて指定する

コンテナ内のアイテムのデフォルト揃え位置

align-items …… コンテナ内のアイテムの交差軸方向（初期値では縦方向）のデフォルト揃え位置を指定する
justify-items …… コンテナ内のアイテムの主軸方向（初期値では横方向）のデフォルト揃え位置を指定する
place-items …… コンテナ内のアイテムの交差軸方向（初期値では縦方向）と主軸方向（初期値では横方向）のデフォルト揃え位置をまとめて指定する

コンテナ内の個別アイテムの揃え位置

align-self …… コンテナ内の個別アイテムの縦方向の揃え位置を指定する
justify-self …… コンテナ内の個別アイテムの横方向の揃え位置を指定する
place-self …… コンテナ内の個別アイテムの縦方向と横方向の揃え位置をまとめて指定する

ボックス同士の間隔

row-gap …… アイテム同士の横方向の間隔を指定する
column-gap …… アイテム同士の縦方向の間隔を指定する
gap …… アイテム同士の横方向と縦方向の間隔をまとめて指定する

イメージ

object-fit …… 画像などをボックスにどのようにはめ込むかを指定する
object-position …… 画像などのボックスへの配置位置を指定する
image-orientation …… 横向きや逆さまの画像を回転させて正しい向きに補正する
image-rendering …… 画像が拡大・縮小された際の描画方法を指定する
image-resolution …… 画像を描画する際の解像度を指定する

合成・ブレンド

mix-blend-mode …… 背景色と要素のブレンド方法を指定する
background-blend-mode …… 背景色と背景画像のブレンド方法を指定する
isolation …… 要素をスタッキングコンテキストから分離する

フロート要素の形状

shape-outside …… フロート要素への回り込みの形状を指定する
shape-image-threshold …… 画像ファイルから図形を抽出する際の不透明度を指定する
shape-margin …… フロート要素への回り込みの形状にマージンを指定する

クリッピング（切り抜き）

clip-path …… 要素をクリッピング（切り抜き）する
clip-rule …… SVGグラフィックス要素の塗りつぶし方法を指定する

マスク

mask-image …… マスクレイヤーとなるイメージを指定する
mask-mode …… マスクのモード（輝度値・アルファ値）を指定する
mask-repeat …… マスクレイヤーイメージの繰り返し方法を指定する
mask-position …… マスクレイヤーイメージの位置を指定する
mask-clip …… マスク適用の範囲を指定する
mask-origin …… マスク適用の基準位置を指定する
mask-size …… マスクレイヤーイメージのサイズを指定する
mask-composite …… 複数マスクの合成方法を指定する
mask …… マスクに関する指定をまとめて行う

マスクボーダー

mask-border-source …… マスクボーダー画像として使用する画像を指定する
mask-border-mode …… マスクボーダーのモード（輝度値・アルファ値）を指定する
mask-border-slice …… マスクボーダー画像の使用範囲を指定する
mask-border-width …… マスクボーダーの太さを指定する
mask-border-outset ……マスクボーダー領域がボーダーボックスを超えて拡がる量を指定する
mask-border-repeat …… マスクボーダーの繰り返し方法を指定する
mask-border …… マスクボーダーに関する指定をまとめて行う

SVGへのマスク適用

mask-type …… <mask>要素の内容をどう扱うかどうか（輝度値・アルファ値）を指定する

変形

transform …… 要素に2D変形、または、3D変形を適用する
transform:matrix() …… 行列を使用して要素に2D変形を適用する
transform:matrix3d() …… 行列を使用して要素に3D変形を適用する
transform:translate() …… 要素の表示位置を移動させる
transform:scale() …… 要素を拡大・縮小表示する
transform:rotate() …… 要素を回転表示する
transform:skew() …… 要素を傾斜変形させる
transform:perspective() …… 3D変形の奥行きの深さを指定する
transform-origin …… 2D変形、または、3D変形の原点を指定する
transform-style …… 子要素がフラットに描画されるか立体的に描画されるかを指定する

遠近法

perspective …… 3D変形の奥行きの深さを指定する（親要素に指定）
perspective-origin …… 奥行きの消失点を指定する
backface-visibility …… 要素の裏面を見られるようにするかどうかを指定する

時間的変化

transition …… transition効果（時間的変化）をまとめて指定する
transition-property …… transition効果を適用するCSSプロパティ名を指定する
transition-duration ……変化に掛かる時間を指定する
transition-timing-function …… 変化のタイミング・進行割合を指定する
transition-delay …… 変化がいつ始まるかを指定する

アニメーション

animation …… アニメーションについてまとめて指定する
animation-name …… アニメーション名を指定する
animation-duration …… アニメーション一回分の時間の長さを指定する
animation-timing-function …… アニメーションのタイミング・進行割合を指定する
animation-iteration-count …… アニメーションの繰り返し回数を指定する
animation-direction …… アニメーションを交互に反転再生させるかどうかを指定する
animation-play-state …… 再生中か一時停止かを指定する
animation-delay …… アニメーションがいつ始まるかを指定する

テキストの変換

text-transform …… 大文字・小文字・全角文字への変換を指定する

空白と折り返し

white-space …… ソース中のホワイトスペース・改行の表示方法を指定する
tab-size …… タブ文字を表示する際のサイズを指定する

改行と単語の区切り

word-break …… テキストや単語の改行方法を指定する
line-break …… 改行規則の厳密さを指定する

単語内の改行

hyphens …… 単語が途中改行された際にハイフンでつなぐかどうかを指定する
overflow-wrap …… 単語の途中で改行するかどうかを指定する
word-wrap …… 単語の途中で改行するかどうかを指定する → overflow-wrapに名称変更

位置揃えと均等割付

text-align …… ブロックコンテナ内の行の揃え位置・均等割付を指定する
text-align-all …… ブロックコンテナ内のすべての行の揃え位置・均等割付を指定する
text-align-last …… ブロックコンテナ内の最後の行の揃え位置・均等割付を指定する
text-justify …… 均等割付の形式を指定する

単語や文字の間隔

word-spacing …… 単語の間隔を指定する
letter-spacing …… 文字の間隔を指定する

インデントと禁則処理

text-indent …… 一行目のインデント幅を指定する
hanging-punctuation …… 括弧・引用符・句読点の禁則処理を指定する

テキストの表示（レベル4）

text-wrap …… テキストの折り返し方法を指定する

テキストへの傍線（線装飾）

text-decoration-line …… テキストに傍線をつける
text-decoration-color …… テキスト傍線の色を指定する
text-decoration-style …… テキスト傍線のスタイルを指定する
text-decoration …… テキスト傍線のつけ方・色・スタイルをまとめて指定する
text-decoration-skip …… テキスト傍線のスキップ方法を指定する
text-underline-position …… テキスト傍線の表示位置を指定する

テキストへの傍点（強調記号）

text-emphasis-style …… テキスト傍点のスタイルを指定する
text-emphasis-color …… テキスト傍点の色を指定する
text-emphasis …… テキスト傍点のスタイル・色をまとめて指定する
text-emphasis-position …… テキスト傍点の位置を指定する

テキストシャドウ

text-shadow …… テキストに影をつける

フォント

font-size-adjust …… フォント同士のサイズのバラつきを調整する
font-stretch …… フォントの形状を幅広・幅狭にする

インラインボックスのサイズ

text-height …… テキストの高さを指定する

行の重ね方

line-stacking …… 行ボックスの重ね方を指定する
line-stacking-strategy …… 行ボックスを重ねる際の基準高さを指定する
line-stacking-ruby …… 行ボックスを重ねる際のルビの扱いを指定する
line-stacking-shift …… 文字のベースラインを考慮するかどうかを指定する

ベースライン

dominant-baseline …… 優先するベースラインを指定する
alignment-baseline …… インライン要素の揃えラインを指定する
alignment-adjust …… ベースラインを調整する
baseline-shift …… 優先するベースラインを指定し直す

インラインボックスの整列

inline-box-align …… どの行を基準にしてインラインボックスを整列させるかを指定する

装飾頭文字

drop-initial-value …… 頭文字を何行分にするかを指定する
drop-initial-size …… 頭文字のサイズを指定する
drop-initial-after-align …… 頭文字の第一接続点の揃えラインを指定する
drop-initial-after-adjust …… 頭文字の第一接続点の揃え位置を指定する
drop-initial-before-align …… 頭文字の第二接続点の揃えラインを指定する
drop-initial-before-adjust …… 頭文字の第二接続点の揃え位置を指定する

ruby-position …… ルビの配置位置を指定する
ruby-align …… ルビの揃え位置を指定する
ruby-overhang …… 本体に隣接するテキストへのルビのかかり方を指定する
ruby-span …… ルビ注釈がどこまでまたがるかを制御する

overflow-x …… はみ出た要素の左右の表示方法を指定する
overflow-y …… はみ出た要素の上下の表示方法を指定する
overflow …… はみ出た要素の表示方法を指定する
overflow-style …… スクロール方法の優先度を指定する

マーキー

marquee-style …… マーキー効果のスタイルを指定する
marquee-loop …… マーキー効果の回数を指定する
marquee-direction …… マーキー効果の方向を指定する
marquee-speed …… マーキー効果の速さを指定する

ボックスの回転

rotation …… 回転の角度を指定する
rotation-point …… 回転の中心を指定する

ユーザーインターフェース

appearance …… プラットフォームにおける標準的なUIの外観にする
icon …… 要素のアイコンを指定する
box-sizing …… ボックスサイズの算出方法を指定する
outline-offset …… アウトラインのオフセット値を指定する
resize …… ユーザーが要素のサイズを変更できるかどうかを指定する

フォーカス移動

nav-index …… タブキーによるフォーカス移動の順序を指定する
nav-up …… 上方向キーにフォーカス移動を割り当てる
nav-right …… 右方向キーにフォーカス移動を割り当てる
nav-down …… 下方向キーにフォーカス移動を割り当てる
nav-left …… 左方向キーにフォーカス移動を割り当てる

ハイパーリンク

target …… リンク先の開き方・開く位置を指定する
target-name …… リンク先の開き方を指定する
target-new …… リンク先を新しいウィンドウ・タブで開く
target-position …… 新しいウィンドウ・タブを開く位置を指定する

基本図形

inset()関数 ……
circle()関数 ……
ellipse()関数 ……
polygon()関数 ……

数式・属性

calc()関数 ……
attr()関数 ……

透過色

rgba()関数 …… RGBAカラーモデルで色を指定する

グラデーション

linear-gradient()関数 …… 線形グラデーションを指定する
radial-gradient()関数 …… 円形グラデーションを指定する
repeating-linear-gradient()関数 …… 繰り返しの線形グラデーションを指定する
repeating-radial-gradient()関数 …… 繰り返しの円形グラデーションを指定する

変形

transform:matrix() …… 行列を使用して要素に2D変形を適用する
transform:matrix3d() …… 行列を使用して要素に3D変形を適用する
transform:translate() …… 要素の表示位置を移動させる
transform:scale() …… 要素を拡大・縮小表示する
transform:rotate() …… 要素を回転表示する
transform:skew() …… 要素を傾斜変形させる
transform:perspective() …… 3D変形の奥行きの深さを指定する

セレクタ

* …… すべての要素
E …… 特定の要素
E[foo] …… foo属性を持つE要素
E[foo=”bar”] …… foo属性の値にbarを持つE要素
E[foo~=”bar”] …… foo属性の値候補（ホワイトスペース区切り）にbarを持つE要素
E[foo^=”bar”] …… foo属性の値がbarで始まるE要素
E[foo$=”bar”] …… foo属性の値がbarで終わるE要素
E[foo*=”bar”] …… foo属性の値にbarを含むE要素
E[foo|=”en”] …… foo属性の値候補（ハイフン区切り）がenで始まるE要素
E:root …… 文書のルートとなる要素
E:nth-child(n) …… n番目の子となるE要素
E:nth-last-child(n) …… 後ろから数えてn番目の子となるE要素
E:nth-of-type(n) …… n番目のその種類の要素
E:nth-last-of-type(n) …… 後ろから数えてn番目のその種類の要素
E:first-child …… 子として最初のE要素
E:last-child …… 子として最後のE要素
E:first-of-type …… 最初のその種類の要素
E:last-of-type …… 最後のその種類の要素
E:only-child …… 子として唯一となるE要素
E:only-of-type …… 子として唯一となるその種類の要素
E:empty …… 要素内容が空となるE要素
E:link …… 未訪問のリンク
E:visited …… 訪問済のリンク
E:active …… クリック中の要素
E:hover …… カーソルが乗っている要素
E:focus …… フォーカスされた要素
E:target …… リンクのターゲット先となるE要素
E:lang(fr) …… 特定の言語を指定された要素
E:enabled …… 有効となっているユーザーインターフェース要素（テキストエリアなど）
E:disabled …… 無効となっているユーザーインターフェース要素（テキストエリアなど）
E:checked …… チェックされているユーザーインターフェース要素（ラジオボタン・チェックボックスなど）
E::first-line …… 要素の最初の行
E::first-letter …… 要素の最初の文字
E::before …… 要素の直前に内容を挿入する
E::after …… 要素の直後に内容を挿入する
E.warning …… 特定のclass名がつけられた要素
E#myid …… 特定のid名がつけられた要素
E:not(s) …… sで指定するセレクタに当てはまらないE要素
E F …… E要素の子孫となるF要素
E > F …… E要素の子となるF要素
E + F …… E要素の直後に隣接しているF要素
E ~ F …… E要素の後ろにある同じ階層のF要素
E , F …… 複数のセレクタに同じスタイルを適用する

ユーザーインターフェースセレクタ

:indeterminate疑似クラス …… ラジオボタンやチェックボックスの切り替えがはっきりしない状態
:default疑似クラス …… ボタン・メニューなど、ユーザーインターフェース要素の初期状態
:valid疑似クラス …… 妥当な状態
:invalid疑似クラス …… 妥当ではない状態
:in-range疑似クラス …… 範囲内の状態
:out-of-range疑似クラス …… 範囲外の状態
:required疑似クラス …… 必須入力の状態
:optional疑似クラス …… 任意入力の状態
:read-only疑似クラス …… 閲覧専用の状態
:read-write 疑似クラス …… 書き込み可能の状態（テキスト入力フィールドなど）
::selection疑似要素 …… ユーザーに選択された状態のテキスト
::value疑似要素 …… 入力された値
::choices疑似要素 …… 選択された選択肢
::repeat-item疑似要素 …… 連続して要素が配置されている場合のそれぞれの要素
::repeat-index疑似要素 …… 連続して要素が配置されている場合のその親要素