トップページ  > CSS3リファレンス

★CSS3リファレンス

広告

 背景とボーダー (Backgrounds and Borders モジュール)

背景
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 …… ボックスに影をつける

 透過色 (Color モジュール)

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

 グラデーション (Image Values モジュール)

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

 フレキシブルレイアウト (Flexible Box Layout モジュール)

フレックスアイテムの配置・折り返し・順序
flex-flow …… フレックスコンテナ内のアイテムの配置方向と折り返し方法をまとめて指定する
flex-direction …… フレックスコンテナ内のアイテムの配置方向を指定する
flex-wrap …… フレックスコンテナ内のアイテムの折り返し方法を指定する
order …… フレックスコンテナ内のアイテムの表示順序を指定する
フレックスアイテムの幅
flex …… フレックスコンテナ内のアイテムの幅についてまとめて指定する
flex-basis …… フレックスコンテナ内のアイテムの基本幅を指定する
flex-shrink …… フレックスコンテナ内のアイテムの縮み方の比率を指定する
flex-grow …… フレックスコンテナ内のアイテムの伸び方の比率を指定する
※旧仕様(→後継と思われるプロパティ)
ボックスの配置・方向・揃え位置
box-orient …… ボックス内の子要素の配置方向を指定する(→flex-direction
box-direction …… ボックス内の子要素の表示方向を指定する(→flex-direction
box-ordinal-group …… ボックス内の子要素に並び順グループを割り当てる(→order
box-align …… ボックス内の子要素の縦方向の揃え位置を指定する(→align-items
ボックスの伸縮
box-flex …… 伸縮ボックスの伸縮比率を指定する(→flex-grow
box-flex-group …… 伸縮ボックスにグループを割り当てて伸縮の優先順位を指定する(→flex-shrink
ボックスの揃え位置
box-pack …… ボックス内の子要素の横方向の揃え位置を指定する(→justify-content
box-lines …… ボックス内を複数行(複数列)にするかどうかを指定する(→flex-wrap
tab-side

 グリッドレイアウト (Grid Layout モジュール)

グリッドの定義
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 …… 行グリッド・列グリッドの開始と終了についてまとめて指定する

 マルチカラムレイアウト (Multi-column Layout モジュール)

カラムの数と幅
columns …… カラム幅とカラム数を指定する
column-width …… カラム幅を指定する
column-count …… カラム数を指定する
カラムの間隔と区切り線
column-gap …… アイテム同士の縦方向の間隔を指定する
column-rule …… カラムの区切り線のスタイル・幅・色を指定する
column-rule-color …… カラムの区切り線の色を指定する
column-rule-style …… カラムの区切り線のスタイルを指定する
column-rule-width …… カラムの区切り線の幅を指定する
カラムへの要素の配置
column-span …… 要素がまたがる(横切る)カラム数を指定する
column-fill …… カラム同士の高さ(内容量)を揃えるかどうかを指定する

 ボックスの改行 (Fragmentation モジュール)

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

 ボックスの揃え位置 (Box Alignment モジュール)

コンテナ内全体の揃え位置
align-content …… コンテナ内全体の交差軸方向(初期値では縦方向)の揃え位置を指定する
justify-content …… コンテナ内全体の主軸方向(初期値では横方向)の揃え位置を指定する
place-content …… コンテナ内全体の交差軸方向(初期値では縦方向)と主軸方向(初期値では横方向)の揃え位置をまとめて指定する
コンテナ内のアイテムのデフォルト揃え位置
align-items …… コンテナ内のアイテムの交差軸方向(初期値では縦方向)のデフォルト揃え位置を指定する
justify-items …… コンテナ内のアイテムの主軸方向(初期値では横方向)のデフォルト揃え位置を指定する
place-items …… コンテナ内のアイテムの交差軸方向(初期値では縦方向)と主軸方向(初期値では横方向)のデフォルト揃え位置をまとめて指定する
コンテナ内の個別アイテムの揃え位置
align-self …… コンテナ内の個別アイテムの縦方向の揃え位置を指定する
justify-self …… コンテナ内の個別アイテムの横方向の揃え位置を指定する
place-self …… コンテナ内の個別アイテムの縦方向と横方向の揃え位置をまとめて指定する
ボックス同士の間隔
row-gap …… アイテム同士の横方向の間隔を指定する
column-gap …… アイテム同士の縦方向の間隔を指定する
gap …… アイテム同士の横方向と縦方向の間隔をまとめて指定する

 イメージの操作 (Image Values モジュール)

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

 合成・ブレンド (Compositing and Blending)

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

 フロート要素の形状 (Shapes モジュール)

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

 切り抜きとマスク (Compositing and Blending)

クリッピング(切り抜き)
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>要素の内容をどう扱うかどうか(輝度値・アルファ値)を指定する

 2D 3D 変形 (2D 3D Transforms モジュール)

変形
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 …… 要素の裏面を見られるようにするかどうかを指定する

 時間的変化 (Transitions モジュール)

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

 アニメーション (Animations モジュール)

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

 テキストの表示 (Text モジュール)

テキストの変換
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 モジュール)

テキストへの傍線(線装飾)
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 …… テキストに影をつける

 フォント (Fonts モジュール)

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

 (line モジュール)

インラインボックスのサイズ
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 モジュール)

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

 オーバーフロー (basic box model)

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

 マーキー (basic box model)

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

 ボックスの回転 (basic box model)

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

 インターフェース (Basic User Interface モジュール)

ユーザーインターフェース
appearance …… プラットフォームにおける標準的なUIの外観にする
icon …… 要素のアイコンを指定する
box-sizing …… ボックスサイズの算出方法を指定する
outline-offset …… アウトラインのオフセット値を指定する
resize …… ユーザーが要素のサイズを変更できるかどうかを指定する
フォーカス移動
nav-index …… タブキーによるフォーカス移動の順序を指定する
nav-up …… 上方向キーにフォーカス移動を割り当てる
nav-right …… 右方向キーにフォーカス移動を割り当てる
nav-down …… 下方向キーにフォーカス移動を割り当てる
nav-left …… 左方向キーにフォーカス移動を割り当てる

 リンクの表示 (Hyperlink Presentation モジュール)

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

 生成と置換 (Generated and Replaced Content モジュール)

自動生成・置換
move-to …… 要素を後ろへ移動する
page-policy …… カウント方法を指定する
crop …… 置換要素の表示範囲を指定する

 印刷 (Paged Media モジュール)

ページ設定
size …… ページサイズを定義する
page …… 特定の名前を付けてページを定義する

 印刷用の生成 (Generated Content for Paged Media モジュール)

ヘッダ・フッタ・脚注
string-set …… 文字列を格納する
border-length …… 脚注の区切り線の長さを指定する
ハイフン
hyphens …… 単語途中での改行方法を指定する
hyphenate-resource …… ハイフンでつなぐ箇所を示したリソースを指定する
hyphenate-before …… ハイフン前の最低文字数を指定する
hyphenate-after …… ハイフン後の最低文字数を指定する
hyphenate-lines …… 連続するハイフンの最大数を指定する
hyphenate-character …… ハイフンに使う文字を指定する
置換・解像度・配置・トンボ
text-replace …… 文字列を置換する
float-offset …… フロート要素のオフセット値を指定する
marks …… トンボ(印刷物の見当合わせ記号)を付ける
ブックマーク
bookmark-level …… ブックマークのレベル(度合い)を指定する
bookmark-label …… ブックマークのラベル(名前)を指定する
bookmark-target …… ブックマークのターゲット(対象)を指定する

 音声 (Speech モジュール)

ボリューム・バランス
voice-volume …… 音声のボリュームを指定する
voice-balance …… 音声の左右のバランスを指定する
休憩・間
rest …… 要素内容を話す前後の休憩・間をまとめて指定する
rest-before …… 要素内容を話す前の休憩・間を指定する
rest-after …… 要素内容を話す後の休憩・間を指定する
音声記号
mark …… 要素の前後に入れる音声記号をまとめて指定する
mark-before …… 要素の前に入れる音声記号を指定する
mark-after …… 要素の後に入れる音声記号を指定する
voice-rate …… 話す速度を指定する
voice-pitch …… 声の高さ(周波数)を指定する
voice-pitch-range …… 声の抑揚(周波数の変化幅)を指定する
voice-stress …… 強調の度合い(強い・弱い・単調)を指定する
voice-duration …… 要素内容を話すのに掛かる時間を指定する
phonemes …… 発音の仕方を指定する

 表示レベル (Presentation Levels モジュール)

表示レベル
presentation-level …… 表示レベルを指定する

 結合 (Behavioral Extensions)

結合
binding …… 結合するスタイル規則を参照する

 関数 (Functional Notations)

基本図形
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変形の奥行きの深さを指定する

 セレクタ (Selectors Level 3)

セレクタ
* …… すべての要素CSS2
E …… 特定の要素CSS1
E[foo] …… foo属性を持つE要素CSS2
E[foo="bar"] …… foo属性の値にbarを持つE要素CSS2
E[foo~="bar"] …… foo属性の値候補(ホワイトスペース区切り)にbarを持つE要素CSS2
E[foo^="bar"] …… foo属性の値がbarで始まるE要素CSS3
E[foo$="bar"] …… foo属性の値がbarで終わるE要素CSS3
E[foo*="bar"] …… foo属性の値にbarを含むE要素CSS3
E[foo|="en"] …… foo属性の値候補(ハイフン区切り)がenで始まるE要素CSS2
E:root …… 文書のルートとなる要素CSS3
E:nth-child(n) …… n番目の子となるE要素CSS3
E:nth-last-child(n) …… 後ろから数えてn番目の子となるE要素CSS3
E:nth-of-type(n) …… n番目のその種類の要素CSS3
E:nth-last-of-type(n) …… 後ろから数えてn番目のその種類の要素CSS3
E:first-child …… 子として最初のE要素CSS2
E:last-child …… 子として最後のE要素CSS3
E:first-of-type …… 最初のその種類の要素CSS3
E:last-of-type …… 最後のその種類の要素CSS3
E:only-child …… 子として唯一となるE要素CSS3
E:only-of-type …… 子として唯一となるその種類の要素CSS3
E:empty …… 要素内容が空となるE要素CSS3
E:link …… 未訪問のリンクCSS1
E:visited …… 訪問済のリンクCSS2
E:active …… クリック中の要素CSS2
E:hover …… カーソルが乗っている要素CSS2
E:focus …… フォーカスされた要素CSS2
E:target …… リンクのターゲット先となるE要素CSS3
E:lang(fr) …… 特定の言語を指定された要素CSS2
E:enabled …… 有効となっているユーザーインターフェース要素(テキストエリアなど)CSS3
E:disabled …… 無効となっているユーザーインターフェース要素(テキストエリアなど)CSS3
E:checked …… チェックされているユーザーインターフェース要素(ラジオボタン・チェックボックスなど)CSS3
E::first-line …… 要素の最初の行CSS1
E::first-letter …… 要素の最初の文字CSS1
E::before …… 要素の直前に内容を挿入するCSS2
E::after …… 要素の直後に内容を挿入するCSS2
E.warning …… 特定のclass名がつけられた要素CSS1
E#myid …… 特定のid名がつけられた要素CSS1
E:not(s) …… sで指定するセレクタに当てはまらないE要素CSS3
E F …… E要素の子孫となるF要素CSS1
E > F …… E要素の子となるF要素CSS2
E + F …… E要素の直後に隣接しているF要素CSS2
E ~ F …… E要素の後ろにある同じ階層のF要素CSS3
E , F …… 複数のセレクタに同じスタイルを適用するCSS2
ユーザーインターフェースセレクタ
:indeterminate疑似クラス …… ラジオボタンやチェックボックスの切り替えがはっきりしない状態
:default疑似クラス …… ボタン・メニューなど、ユーザーインターフェース要素の初期状態
:valid疑似クラス …… 妥当な状態
:invalid疑似クラス …… 妥当ではない状態
:in-range疑似クラス …… 範囲内の状態
:out-of-range疑似クラス …… 範囲外の状態
:required疑似クラス …… 必須入力の状態
:optional疑似クラス …… 任意入力の状態
:read-only疑似クラス …… 閲覧専用の状態
:read-write 疑似クラス …… 書き込み可能の状態(テキスト入力フィールドなど)
::selection疑似要素 …… ユーザーに選択された状態のテキスト
::value疑似要素 …… 入力された値
::choices疑似要素 …… 選択された選択肢
::repeat-item疑似要素 …… 連続して要素が配置されている場合のそれぞれの要素
::repeat-index疑似要素 …… 連続して要素が配置されている場合のその親要素
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ