CSS3/CSS 3.0 プロパティ・属性一覧

CSS3のプロパティとは？

CSS3/CSS 3.0 プロパティ・属性一覧

CSS3 プロパティ・属性一覧

　CSS3ではCSS3を基本モジュールとして？他は拡張モジュールとして個々に策定され、勧告後、仕様化されるスタイルであり、基本プロパティCSS3としてはCSS2(CSS 2.0/CSS 2.1)に次のプロパティ1つが追加されています。

CSS3基本プロパティ	用途
opacity	不透明度・不透過度設定(数値指定／継承) 既定値：1 設定値：0.0～1.0／透明～不透明 *ちなみにtransparent(透明度)プロパティはありませんが、一部のプロパティにはtransparentプロパティ値があります。

　下記はCSS2プロパティ・属性からCSS3にそのまま継承またはCSS3で再定義されているプロパティ95種です。

プロパティ	用途
background	背景関連プロパティ(background-color/background-image/background-repeat/background-attachment/background-position／継承)を個々またはまとめて設定
background-attachment	背景画像が表示領域やスクロールバーと共に固定されるか否か(スクロール／固定／継承)の設定
background-color	背景色(色指定／継承)設定
background-image	背景画像(URL指定／なし／継承)設定
background-position	背景位置(比率／寸法／上・中・下／左・中央・右／継承)設定
background-repeat	背景の繰り返し(縦横繰り返し／横方向繰り返し／縦方向繰り返し／繰り返しなし／継承)設定
border	境界線関連プロパティ(border-top-width/border-style/color)／継承を個々またはまとめて設定
border-bottom	底辺境界線関連プロパティ(border-top-width/border-style/color)／継承を個々またはまとめて設定
border-bottom-color	底辺境界線色(色・カラー指定／継承)設定
border-bottom-style	底辺境界線スタイル(下端境界線用border-styleプロパティ／継承)設定
border-bottom-width	底辺境界線幅(細／中／太／寸法)／継承設定
border-collapse	境界線結合(HTML/XHTMLのtable要素またはCSSのdisplayプロパティ値table/inline-tableの境界線における内側要素との結合／分割／継承)設定
border-color	境界線色(色・カラー／継承)を全部または上下左右(border-bottom-color/border-left-color/border-right-color/border-top-color)1つ～4つ設定
border-left	左境界線関連プロパティ(border-top-width/border-style/color)／継承を個々またはまとめて設定
border-left-color	左境界線色(色・カラー指定／継承)設定
border-left-style	左境界線スタイル(左境界線用border-styleプロパティ／継承)設定
border-left-width	左境界線幅(細／中／太／寸法)／継承設定
border-right	右境界線関連プロパティ(border-top-width/border-style/color)／継承を個々またはまとめて設定
border-right-color	右境界線色(色・カラー指定／継承)設定
border-right-style	右境界線スタイル(右境界線用border-styleプロパティ／継承)設定
border-right-width	右境界線幅(細／中／太／寸法)／継承設定
border-spacing	隣接するセルの境界線間の距離(寸法／継承)設定
border-style	境界線スタイル(ドット／ダッシュ／濃／二重／溝／隆起／外枠・はめ込み／内枠・差し込み)／継承を境界線スタイル計4辺のプロパティ(border-bottom-style/border-left-style/border-right-style/border-top-style)について全部または個々に1つ～4つ設定
border-top	上境界線関連プロパティ(border-top-width/border-style/color)／継承を個々またはまとめて設定
border-top-color	上境界線色(色・カラー指定／継承)設定
border-top-style	上境界線スタイル(上端境界線用border-styleプロパティ／継承)設定
border-top-width	上境界線幅(細／中／太／寸法)／継承設定
border-width	境界線幅(細／中／太／寸法を全部または上下左右で1つ～4つ)設定
bottom	底辺位置(寸法／比率／自動／継承)設定
caption-side	table(ボックス)に対するcaption(ボックス)の位置(上／下／継承)設定
clear	floatプロパティの解除(左／右／両方／なし／継承)設定
clip	断片切り抜き(形状／自動／継承)設定位置指定(絶対位置の要素にのみ適用)
color	テキスト文字の色・カラー指定／継承設定
content	コンテンツ・内容(通常／なし／文字・URI・カウンタ・identifier属性／開始クォート付き／終了クォート付き／開始クォートなし／終了クォートなし／継承)設定
counter-increment	カウントアップ([識別子・整数]／なし／継承)設定
counter-reset	カウンタリセット([識別子・整数]／なし／継承)設定
cursor	ポインタカーソルの形状設定(URI指定／自動／十字／既定(多くは矢印)／リンクポインタ／移動部を指す／サイズ調整開始方向(東・北東・北西・北・南東・南西・南・西)／テキストを指す(多くはIビーム)／処理中・ビジー時待ち時間(多くは腕時計や砂時計)／目盛(多くは回転ビーチボールまたは腕時計・砂時計と矢印)／ヘルプ用／継承)
direction	テキスト書き出し方向(ltr・左書き／rtl・右書き／継承)設定 ltr/left to right rtl/right to left
display	表示要素設定(ブロック／インライン／リストアイテム／インラインブロック／テーブル／インラインテーブル／テーブル行グループ／テーブルヘッダグループ／テーブルフッタグループ／テーブル行／テーブル列グループ／テーブル列／テーブルセル／テーブルキャプション／なし／継承)
empty-cells	カラのセル(見せる／隠す／継承)設定
float	ブロックレベル要素を横並びにするなどの浮動設定(左／右／なし／継承)
font	フォント関連プロパティ(font-style/font-variant/font-weight/font-sizeまたはfont-size割るline-height/font-family/キャプション／アイコン／メニュー／メッセージボックス／スモールキャプション／ステータスバー／継承)を個々またはまとめて設定
font-family	フォントファミリ名／継承設定
font-size	フォントサイズ(絶対サイズ／相対サイズ／寸法／比率／継承)設定
font-style	フォントスタイル(通常／イタリック体／斜体／継承)設定
font-variant	フォントバリアント(通常／小文字を大文字にしつつサイズ縮小／継承)設定
font-weight	フォント太さ(通常／太い／より太い／より細い／100～900の9段階重みづけ／継承)設定
height	高さ(寸法／比率／自動／継承)設定
left	左位置(寸法／比率／自動／継承)設定
letter-spacing	ラテン語等における先頭文字とテキスト文字列の間隔(通常／寸法／継承)設定
line-height	行の高さ(通常／数値／寸法／比率／継承)設定
list-style	ol/ul/li各リスト要素>のスタイル関連プロパティ(list-style-type/list-style-position/list-style-image／継承)を個々またはまとめて設定
list-style-image	ul/li各リスト要素記号用画像(URL指定／なし／継承)設定
list-style-position	リスト要素の位置(内側／外側／継承)設定
list-style-type	ol/li各リスト要>素のスタイル(円形塗りつぶし／円形枠／四角／進数／ゼロ埋め進数／ローマ字小文字／ローマ字大文字／ギリシャ文字小文字／ラテン文字小文字／ラテン文字大文字／アルメニア文字／ジョージアン・ジョージ文字／アルファベット小文字／アルファベット大文字／なし／継承)設定
margin	マージン(コンテンツの外に位置する境界線とその外側との間隔(寸法／比率／自動／継承)を全部または上下左右で1つ～4つ)設定
margin-bottom	下端マージン(寸法>／比率／自動／継承)設定
margin-left	左側マージン(寸法／比率／自動／継承)設定
margin-right	右側マージン(寸法／比率／自動／継承)設定
margin-top	上端マージン(寸法／比率／自動／継承)設定
max-height	最大の高さ(寸法／比率／なし／継承)設定
max-width	最大幅(寸法／比率／なし／継承)設定
min-height	最小の高さ(寸法／比率／継承)設定
min-width	最小幅(寸法／比率／継承)設定
orphans	ページ下段に最低限確保する必要のあるブロックコンテナ内の最小行数(整数指定／継承)設定
outline	アウトライン・外観・外郭・輪郭(outline-color／outline-style／outline-widthプロパティ／継承)設定
outline-color	アウトライン色(色・カラー指定／反転／継承)設定
outline-style	アウトラインスタイル(border-styleプロパティ値／継承)設定
outline-width	アウトライン幅(border-widthプロパティ値／継承)設定
overflow	要素のボックスをオーバーフローした場合にブロックコンテナ要素の内容が切り取られるかどうかを設定(表示／非表示／スクロール／自動／継承)
padding	パディング(コンテンツと境界線との間隔(寸法／比率／継承)を全部またはpadding-bottom/padding-left/padding-right/padding-topの1つ～4つ)設定
padding-bottom	下方パディング(寸法／比率／継承)設定
padding-left	左パディング(寸法／比率／継承)設定
padding-right	右パディング(寸法／比率／継承)設定
padding-top	上方パディング(寸法>／比率／継承)設定
page-break-after	ブロックレベル>要素のコンテンツの前での改ページ(自動／常時／回避／左／右／継承)設定
page-break-before	ブロックレベル要素のコンテンツの後での改ページ(自動／常時／回避／左／右／継承)設定
page-break-inside	ブロックレベル要素のコンテンツ内での改ページ(自動／回避／継承)設定
position	ボックス型要素の位置決め(静止／相対／絶対／固定／継承)設定
quotes	クォーテーションマークを設定([クォート文字・クォート文字]／なし／継承) (例：言語圏による相違)
right	右位置(寸法／比率／自動／継承)設定
table-layout	tableレイアウト(自動／固定／継承)設定
text-align	テキスト位置(左／中央／右／ジャストフィット／継承)設定
text-decoration	テキスト文字装飾(上線・オーバーライン／下線・アンダーライン／抹消・打ち消し線／点滅／なし／継承)設定
text-indent	テキストのインデント(寸法／比率／継承)設定
text-transform	テキスト変換(先頭文字大文字／全て大文字／全て小文字／なし／継承)設定
top	上位置(寸法／比率／自動／継承)設定
unicode-bidi	unicodeにおける左書き／右書きを指定するunicode-bidirectional(通常／組み込み／bidi上書き／継承)設定
vertical-align	垂直方向の位置(基準線／下付き位置／上付き位置／上端／テキスト上端／中間位置／下端／テキスト下端／比率／寸法／継承)設定
visibility	可視設定(表示／非表示／結合・折りたたみ／継承)
white-space	ホワイトスペース(空白結合・必要に応じ改行／空白結合と改行抑止／空白結合・単語内での改行なし／空白結合抑止・改行なし／空白結合・改行なし／継承)設定
widows	ページ上段に最低限確保する必要のあるブロックコンテナ内の最小行数を指定(整数指定／継承)
width	幅サイズ(寸法／比率／自動／継承)設定
word-spacing	単語間隔(通常／寸法／継承)設定
z-index	レイヤー階層・ボックス型要素の重なりにおける重なり順(自動／整数指定／継承)設定

　尚、CSS2は全部で115種定義されており、冒頭の継承された95種のプロパティの他、次の20種のプロパティがあり、これらは、CSS3基本プロパティには入っていませんが、これらの内、オーディオ・ビデオムービーなどでも利用されるプロパティは拡張モジュールである『CSS Speech Module』(CSS2ではAural Style Sheets)に移管し、そこで定義されるものと想定されます。

　よって結果的にCSS3ではCSS2(CSS 2.0/CSS 2.1)に1つ基本プロパティopacityが追加され、それ以外に別途、取り込む拡張モジュールの数に応じてその分だけ更に多くのプロパティを利用できるようになるということになります。

CSS3基本プロパティとCSS2プロパティ差分
プロパティ	用途
azimuth	サラウンドや3次元の音響・音楽・サウンドにおける空間的な広がりにおいて正面、左右、左右後方等を角度で設定
cue	合図となる音源指定 [cue-before][cue-after]の省略形
cue-after	コンテンツの前の合図となる音源
cue-before	コンテンツの後の合図となる音源
elevation	サラウンドや3次元の音響・音楽・サウンドにおける空間的な広がりにおいて上下方向を角度で設定
pause	一時停止
pause-after	コンテンツの後で一時停止
pause-before	コンテンツの前で一時停止
pitch	音声の平均ピッチ(周波数)を指定
pitch-range	音声の平均ピッチ(周波数)範囲
play-during	多チャンネル音源による音声トラック調整において要素内容を話している間、バックグラウンドで再生する音を指定
richness	音声の豊かさ(波長の抑揚等)レベルを指定
speak	音声(会話)設定
speak-header	音声の水平／垂直方向の配置によって異なる方法で表現され、その表現をtable(表)のように2次元的にマップする場合に紐づくtr/tdが複数あるtr/th要素内容をセルごとに繰り返すか否かを指定
speak-numeral	音声に出てくる数字が単独の数字の並びか西暦など他の意味のあるものかを指定
speak-punctuation	音声において句読点の使われ方を指定
speech-rate	読み上げ速度を指定
stress	音声におけるイントネーションの輪郭のローカルピーク(分割したそれぞれのピーク／最高潮)の高さを指定
voice-family	音声ファミリ指定
volume	ボリューム設定

　CSS3の仕様は、CSSや他を含め、これまでのW3C仕様定義とは、少し違うスタイルで『Snapshot 2010』といったように西暦を記載したhttp://www.w3.org/TR/CSS/のLatest version: (2011/03/12時点ではまだWorking Group Note段階)において、その時点での拡張モジュールを含めた一定の仕様が示され、個々の拡張モジュールは、個々に勧告までの道のりを辿ってCSS3仕様に盛り込まれるといったように仕様化されていく予定となっています。

　勧告済みか否かに関わらず、その過程については、例えばCSSなら『 CSS Test Suite 』といったように各仕様の『Test Suite』が示されています。

　尚、CSS3 拡張モジュールの対象になりそうなリストには、既存のCSS2プロパティが含まれる場合もあり、CSS3が基本モジュールとしていくつかプロパティを持つことになるのか、CSS3は全体の総称として機能は全て拡張モジュールとなるのか、その最終形は現時点では定かではありません。

　ちなみにCSS3は、HTML5と併せて、これまでとは比にならないほどの仕様としてバリエーション豊富な実装による表現が可能になる一方、ブラウザ実装のタイミングもさることながら、CSS3自体、柔軟に仕様が拡張していくので何ができるようになるのか先の予測が付きにくいといった側面もあり、その時点における仕様全体を把握するのも、目的に応じて取捨選択し分類したり、それらをどうチョイスし、どう組み合わせるかといった点において積極的に利用しようとすればするほど、より一層、選択が難しくなることも予想されます。

　尤もモジュール化されることからしてもPC(デスクトップ・ノート・タブレット)、モバイル(携帯電話・スマートフォン)、テレビ、ビデオ、オーディオ、紙面といった対象とする端末や媒体の別というだけでなく、MathMLなどにより数学や科学技術計算等で利用する記号も使えるようになり、SVGなど各種仕様の利用も併せて可能になることを考えると裾野が広がり、必要に応じて使い分け、人によっては、目的・用途によっては全く利用しないモジュールも当然のようにあって、むしろ全て利用するというケースの方が極々稀になるということで、つまりは、多種多様に対応可能という仕様本来の目標とするところに向かっているということでしょう。

　それほどCSS3やHTML5含めた仕様は画期的且つ革新的と言えます。

CSS1プロパティ・属性一覧

CSS2プロパティ・属性一覧

CSS/スタイルシート情報

CSS1

CSS3

【CSS】CSS3 プロパティ・属性一覧

2004-2008-someday