HTMLクイックリファレンス


トップページへ
HTMLタグ(目的別) CSSプロパティ(目的別) WEBカラー WEB画像
HTMLタグ(ABC順) CSSプロパティ(ABC順) 優良デザイン 特殊文字
HTML5 CSS3 JavaScript HTML5 API
HTMLの基本 CSSの基本 Canvas サイトマップ

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

★CSS3リファレンス

CSS3では、CSS2.1には無かった以下のプロパティ・値・セレクタが、新たに追加される可能性があります。
勧告までに追加・廃止・変更されるものもあると思われます。

 背景とボーダー (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-decoration-break …… ボックスが改行する際の表示形式を指定する
box-shadow …… ボックスに影をつける
その他
background-break …… インライン要素の背景画像の繰り返し方法を指定する
border-break …… ボックスの改行部分のボーダー表示を指定する

 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 …… アニメーションがいつ始まるかを指定する

 透過色 (Color モジュール)

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

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

グラデーション
linear-gradient() …… 線形グラデーションを指定する(プロパティではなく値)
radial-gradient() …… 円形グラデーションを指定する(プロパティではなく値)

 ボックスの段組み (Flexible Box Layout モジュール)

ボックスの配置・方向・揃え位置
box-orient …… ボックス内の子要素の配置方向を指定する
box-direction …… ボックス内の子要素の表示方向を指定する
box-ordinal-group …… ボックス内の子要素に並び順グループを割り当てる
box-align …… ボックス内の子要素の縦方向の揃え位置を指定する
ボックスの伸縮
box-flex …… 伸縮ボックスの伸縮比率を指定する
box-flex-group …… 伸縮ボックスにグループを割り当てて伸縮の優先順位を指定する
ボックスの揃え位置
box-pack …… ボックス内の子要素の横方向の揃え位置を指定する
box-lines …… ボックス内を複数行(複数列)にするかどうかを指定する
tab-side

 文章の段組み (Multi-column Layout モジュール)

カラムの数と幅
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 …… カラム同士の高さ(長さ)を揃えるかどうかを指定する

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

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

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

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

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

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

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

 グリッド (Grid Positioning モジュール)

グリッド
grid-columns …… 列グリッドを指定する
grid-rows …… 行グリッドを指定する

 ボックスモデル (basic box model)

オーバーフロー
overflow-x …… はみ出た要素の左右の表示方法を指定する
overflow-y …… はみ出た要素の上下の表示方法を指定する
overflow-style …… はみ出た要素のスクロール方法を指定する
ボックスの回転
rotation …… ブロックレベル要素を反時計回りに回転させる
rotation-point …… 回転の中心座標を指定する
ディスプレイ
display-model
display-role

 (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 …… 頭文字の第二接続点の揃え位置を指定する

 マーキー (Marquee モジュール)

マーキー
marquee-play-count …… スクロール回数を指定する
marquee-loop …… スクロール回数を指定する
marquee-direction …… スクロール方向を指定する
marquee-speed …… スクロール速さを指定する
marquee-style …… スクロール方法を指定する
overflow-style …… はみ出た要素のスクロール方法を指定する

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

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

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

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

 印刷 (Paged Media モジュール)

ページ設定
size …… ページサイズを定義する
page …… 特定の名前を付けてページを定義する
ページに収める
image-orientation …… 画像がページに収まるように回転角度を指定する
fit …… 画像などをページにフィットさせる方法を指定する
fit-position …… フィットさせる際の揃え位置を指定する

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

ヘッダ・フッタ・脚注
string-set …… 文字列を格納する
border-length …… 脚注の区切り線の長さを指定する
ハイフン
hyphens …… 単語途中での改行方法を指定する
hyphenate-resource …… ハイフンでつなぐ箇所を示したリソースを指定する
hyphenate-before …… ハイフン前の最低文字数を指定する
hyphenate-after …… ハイフン後の最低文字数を指定する
hyphenate-lines …… 連続するハイフンの最大数を指定する
hyphenate-character …… ハイフンに使う文字を指定する
置換・解像度・配置・トンボ
text-replace …… 文字列を置換する
image-resolution …… 画像の解像度を指定する
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 …… 結合するスタイル規則を参照する

 セレクタ (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疑似要素 …… 連続して要素が配置されている場合のその親要素

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

HTMLクイックリファレンス


トップページへ
HTMLタグ(目的別) CSSプロパティ(目的別) WEBカラー WEB画像
HTMLタグ(ABC順) CSSプロパティ(ABC順) 優良デザイン 特殊文字
HTML5 CSS3 JavaScript HTML5 API
HTMLの基本 CSSの基本 Canvas サイトマップ
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
このウェブサイトが本になりました
©2014 HTMQ