© Style-5.net
 

CSS3 プロパティ 一覧覚え書き

背景
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-decoration-break …… ボックスが改行する際の表示形式を指定する
box-shadow …… ボックスに影をつける
その他
background-break …… インライン要素の背景画像の繰り返し方法を指定する
border-break …… ボックスの改行部分のボーダー表示を指定する
変形
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 …… アニメーションがいつ始まるかを指定する
色・透明度
opacity …… 要素の透明度を指定する
rgba() …… RGBAカラーモデルで色を指定する(プロパティでなく値)
color-profile …… カラープロファイルを指定する
rendering-intent …… 描画の際のカラープロフィールを指定する
グラデーション
linear-gradient() …… 線形グラデーションを指定する(プロパティではなく値)
radial-gradient() …… 円形グラデーションを指定する(プロパティではなく値)
ボックスの配置・方向・揃え位置
box-orient …… ボックス内の子要素の配置方向を指定する
box-direction …… ボックス内の子要素の表示方向を指定する
box-ordinal-group …… ボックス内の子要素に並び順グループを割り当てる
box-align …… ボックス内の子要素の縦方向の揃え位置を指定する
ボックスの伸縮
box-flex …… 伸縮ボックスの伸縮比率を指定する
box-flex-group …… 伸縮ボックスにグループを割り当てて伸縮の優先順位を指定する
ボックスの揃え位置
box-pack …… ボックス内の子要素の横方向の揃え位置を指定する
box-lines …… ボックス内を複数行(複数列)にするかどうかを指定する
カラムの数と幅
columns …… カラム幅とカラム数を指定する
column-width …… カラム幅を指定する
column-count …… カラム数を指定する
カラムの間隔と区切り線
column-gap …… カラムの間隔を指定する
column-rule …… カラムの区切り線のスタイル・幅・色を指定する
column-rule-color …… カラムの区切り線の色を指定する
column-rule-style …… カラムの区切り線のスタイルを指定する
column-rule-width …… カラムの区切り線の幅を指定する
カラムの改行
break-after …… ボックス後でのカラムの区切り方法を指定する
break-before …… ボックス前でのカラムの区切り方法を指定する
break-inside …… ボックス途中でのカラムの区切り方法を指定する
カラムへの要素の配置
column-span …… 要素がまたがる(横切る)カラム数を指定する
column-fill …… カラム同士の高さ(長さ)を揃えるかどうかを指定する
ユーザーインターフェース
appearance …… プラットフォームにおける標準的なUIの外観にする
icon …… 要素のアイコンを指定する
box-sizing …… ボックスサイズの算出方法を指定する
outline-offset …… アウトラインのオフセット値を指定する
resize …… ユーザーが要素のサイズを変更できるかどうかを指定する
フォーカス移動
nav-index …… タブキーによるフォーカス移動の順序を指定する
nav-up …… 上方向キーにフォーカス移動を割り当てる
nav-right …… 右方向キーにフォーカス移動を割り当てる
nav-down …… 下方向キーにフォーカス移動を割り当てる
nav-left …… 左方向キーにフォーカス移動を割り当てる
テキストの表示
white-space-collapse …… ソース中の半角スペースの表示方法を指定する
word-break …… 行の改行方法を指定する
text-wrap …… テキストの折り返し方法を指定する
word-wrap …… 単語の途中で改行するかどうかを指定する
text-align-last …… 最後の行の揃え位置を指定する
text-justify …… 行端揃えの形式を選択する
punctuation-trim …… 句読点などの記号の詰め方を指定する
text-emphasis …… テキストを強調するための傍点の付け方を指定する
text-shadow …… テキストに影をつける
text-outline …… テキストの輪郭ぼかしを指定する
hanging-punctuation …… 句読点の禁則処理を指定する
ルビ
ruby-position …… ルビの配置位置を指定する
ruby-align …… ルビの揃え位置を指定する
ruby-overhang …… 本体に隣接するテキストへのルビのかかり方を指定する
ruby-span …… ルビ注釈がどこまでまたがるかを制御する
フォント
font-size-adjust …… フォント同士のサイズのバラつきを調整する
font-stretch …… フォントの形状を幅広・幅狭にする
グリッド
grid-columns …… 列グリッドを指定する
grid-rows …… 行グリッドを指定する
オーバーフロー
overflow-x …… はみ出た要素の左右の表示方法を指定する
overflow-y …… はみ出た要素の上下の表示方法を指定する
overflow-style …… はみ出た要素のスクロール方法を指定する
ボックスの回転
rotation …… ブロックレベル要素を反時計回りに回転させる
rotation-point …… 回転の中心座標を指定する
インラインボックスのサイズ
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 …… 頭文字の第二接続点の揃え位置を指定する
マーキー
marquee-play-count …… スクロール回数を指定する
marquee-loop …… スクロール回数を指定する
marquee-direction …… スクロール方向を指定する
marquee-speed …… スクロール速さを指定する
marquee-style …… スクロール方法を指定する
overflow-style …… はみ出た要素のスクロール方法を指定する