気の向くままに辿るIT/ICT/IoT
CSS / Cascading Style Sheets / スタイルシート

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-sidetable(ボックス)に対するcaption(ボックス)の位置(上/下/継承)設定
clearfloatプロパティの解除(左/右/両方/なし/継承)設定
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-styleol/ul/li各リスト要素>のスタイル関連プロパティ(list-style-type/list-style-position/list-style-image/継承)を個々またはまとめて設定
list-style-imageul/li各リスト要素記号用画像(URL指定/なし/継承)設定
list-style-positionリスト要素の位置(内側/外側/継承)設定
list-style-typeol/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-layouttableレイアウト(自動/固定/継承)設定
text-alignテキスト位置(左/中央/右/ジャストフィット/継承)設定
text-decorationテキスト文字装飾(上線・オーバーライン/下線・アンダーライン/抹消・打ち消し線/点滅/なし/継承)設定
text-indentテキストのインデント(寸法/比率/継承)設定
text-transformテキスト変換(先頭文字大文字/全て大文字/全て小文字/なし/継承)設定
top上位置(寸法/比率/自動/継承)設定
unicode-bidiunicodeにおける左書き/右書きを指定する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/スタイルシート情報

ホーム前へ次へ