スタイルシート リファレンス
CSS2 Media groupがvisualのプロパティーと値の指定方法とブラウザ対応状況 覚書
覚書といいますか、手打ち用「えっと、あれはどうやって書くんだっけ？」と詰まった時の備忘録です。
視覚メディア・プロパティとその値の記述方法、初期値（未定義のときの値）、対象になる要素 （特に記述のないものは全ての要素が対象）について端折って纏めてあります。
【色】【百分率】【数値】等は値の指定方法値(共通項目補足)を参照してください。
サンプル付きリファレンスはこちらにあります。
背景
- background・・・・・・・・・・・・・・・・・・・・背景
- background-color、 background-image、 background-position、
background-repeat、 background-attachmentを指定
【例】 {background : url(img/xxx.jpg) #FFFFFF no-repeat fixed 100% 100%}
【初期値】−、【継承】× 【対象】【対応】N7○、N4×、E6○、O7○、MacIE5○、 ★ - background-color・・・・・・・・・・・・・・背景色
- 【色】 colorに同じ
【初期値】transparent、 【継承】× 【対象】【対応】N7○、N4×、E6○、O7○、MacIE5○、 ★ - background-image・・・・・・・・・・・・・・背景画像
- 【URI】、【例】url(img/xxx.jpg)
【初期値】none、 【継承】×【対象】【対応】N7○、N4○、E6○、O7○、MacIE5○、 ★ - background-position・・・・・・・・・・・背景画像位置
- 【ワード】 left、center、right、 top、 center、 bottom
【百分比】、【数値】
【初期値】0% 0% 、【継承】× 【対象】【対応】N7○、N4×、E6○、O7○、MacIE5○、 ★ - background-repeat・・・・・・・・・・・・・背景画像の繰返し
- 【ワード】 repeat ：縦横、repeat-x ：横方向、repeat-y ：縦方向、
no-repeat 無、inherit
【初期値】repeat、【継承】× 【対象】【対応】N7○、N4×、E6○、O7○、MacIE5○、 ★ - background-attachment・・・・・・・・・背景画像の固定・移動
- 【ワード】 fixed ：背景画像の位置を固定 scroll ：スクロールに伴って、
背景画像移動
【初期値】 scroll、【継承】× 【対象】【対応】N7○、N4×、E6○、O7○、MacIE5○、 ★
文字色・フォント
- color・・・・・・・・・・・・・・文字の色
-
【色】
【初期値】user、【継承】○ 【対象】【対応】N7○、N4○、E6○、O7○、MacIE5○、 ★ - font・・・・・・・・・・・・・・・・・・・・フォント
- font-style、 font-variant、 font-weight、 font-size、 line-height、
font-familyを指定
【例】 {font: italic normal bold 10px/150% serif;}
【初期値】指定要素参照、【継承】○ 【対象】【対応】N7○、N4×、E6○、O7○、MacIE5○、 ★ - font-style・・・・・・・・・・・・・・・・・・・・フォント・スタイル
- 【ワード】 normal :標準 italic :イタリック
oblique :斜体、inherit
【初期値】normal、【継承】○ 【対象】【対応】N7○、N4△、E6○、O7○、MacIE5○、 ★ - font-variant・・・・・・・・・・・・・・・・・・・小文字サイズの大文字
- 【ワード】 normal :標準、small-caps :小文字サイズの大文字
【例】 有：日本語 abc 無：日本語abc
【初期値】normal、【継承】○ 【対象】【対応】N7○、N4×、E6○、O7○、MacIE5○、 ★ - font-weight・・・・・・・・・・・・・・・・・・・・フォントの太さ
- 【ワード】 normal :標準、 bold :太字、 lighter :
細く、 bolder*太く。数値100〜900
【初期値】normal、【継承】○ 【対象】【対応】N7○、N4△、E6○、O7○、MacIE5○、 ★ - font-size・・・・・・・・・・・・・・・・・・・・フォントのサイズ
- 【ワード】 xx-small、x-small、small、medium、large、x-large、xx-large、
smaller、larger、
【百分比】、【数値】
【初期値】medium、【継承】○ 【対象】【対応】N7○、N4○、E6○、O7○、MacIE5○、 ★ - line-height・・・・・・・・・・・・・・行の高さ
- 【ワード】 normal ：標準
【百分比】、【数値】
【初期値】normal、【継承】○ 【対象】【対応】N7○、N4○、E6○、O7○、MacIE5○、 ★ - font-family・・・・・・・・・・・・・・・・・・・・フォントの種類
- 【種類】 sans-serif :ゴシック、serif :明朝、cursive :筆記体、fantasy :
装飾的、monospace :等幅
【名前】
【初期値】user、【継承】○ 【対象】 【対応】N7○、N4△、E6○、O7○、MacIE5○、 ★ - font-size-adjust・・・・・・・・・・・・・・・・フォントのサイズを調整
-
【初期値】none、【継承】○ 【対象】【対応】N7−、N4−、E6−、O7−、MacIE5−、 ★ - font-stretch・・・・・・・・・・・・・・・・・・・・フォントを縦横を調整
- 【ワード】normal、wider、narrower、ultra-condensed、extra-condensed、condensed、semi-condensed、semi-expanded、expanded、extra-expanded、ultra-expanded、inherit
【初期値】normal、【継承】○ 【対象】【対応】N7×、N4×、E6×、O7×、MacIE5× ★ - text-shadow・・・・・・・・・・・・・・・・・・フォントに影？
-
サポートしているブラウザがそんなにあるとも思えませんが、ビルダーはよく吐きます。
そして、マカーではこれをやられると何も読めません。ビルダーをお使いの方は、text-shadowは削除することをお勧めします。
【色】、【数値】、【ワード】none、inherit
【初期値】none、【継承】× 【対象】【対応】N7×、N4×、E6×、O7×、MacIE5× ★
テキスト
- text-align・・・・・・・・・・・・・・・行揃え
- 【ワード】 left、right 、center
、justify均等割付△
【初期値】user、【継承】○ 【対象】 ブロック レベル要素【対応】N7○、N4○、E6○、O7○、MacIE5○ ★ - text-decoration・・・・・・・・・テキストの装飾
- 【ワード】 none 標準、
underline下線 、overline上線 、line-through 打消
【初期値】none、【継承】○ 【対象】【対応】N7○、N4△、E6○、O7○、MacIE5○ ★ - vertical-align・・・・・・・・・・・・縦方向の位置
- 【ワード】baseline 標準、 top 上端揃、middle 中央揃、 bottom 下端揃、
text-top 上端揃、 text-bottom 下端揃、super 上付き文字、sub 下付き文字、
【百分比】、【数値】
【初期値】baseline、【継承】× 【対象】 イン ラインレベル、テーブル・セル 【対応】N7○、N4×、E6○、O7○、MacIE5△ ★ - letter-spacing・・・・・・・・・・・文字の間隔
- 【数値】、【ワード】 normal ：標準、
inherit
【初期値】normal、【継承】○ 【対象】【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - word-spacing・・・・・・・・・・・・単語の間隔
- 【数値】、【ワード】 normal ：標準
inherit
【初期値】normal、【継承】○ 【対象】【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - text-indent・・・・・・・・・・・・・・一行目のインデント
- 【百分比】、【数値】、【ワード】 inherit
：標準
【初期値】0、【継承】○ 【対象】 ブロックレベル 【対応】N7○、N4△、E6○、O7○、MacIE5○ ★ - text-transform・・・・・・・・・・大文字・小文字
- 【ワード】 none ：デフォルト capitalize ：単語の先頭文字を大文字 lowercase ：全て小文字uppercase：全て大文字
【初期値】none、【継承】○ 【対象】【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - white-space・・・・・・・・・・スペース・タブ・改行
- 【ワード】
normal ：デフォルト。半角スペース・タブ・改行を、1つの半角スペースとして表示、自動改行 。
pre ：連続する半角スペース・タブ・改行を、そのまま表示。 自動改行 。
nowrap ： 自動的に改行しない。
【初期値】normal、【継承】○ 【対象】 ブロックレベル 【対応】N7○、N4△、E6○、O7○、MacIE5○ ★
幅・高さ
- width・・・・・・・・・・・・・・・・・・・・・幅
- 【百分比】、【数値】、【ワード】 auto ：標準、 inherit
【初期値】auto、【継承】× 【対象】 除：インライン、テーブル列、列グループ 【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - max-width・・・・・・・・・・・・・・・・幅の最大値る
- 【百分比】、【数値】、【ワード】 none ：標準、 inherit
【初期値】none、【継承】× 【対象】 除：インライン 【対応】N7○、N4×、E6×、O7○、MacIE5× ★ - min-width・・・・・・・・・・・・・・・・・幅の最小値
- 【百分比】、【数値】、【ワード】 none ：標準、 inherit
【初期値】user、：× 【対象】 除：インライン 【対応】N7○、N4×、E6×、O7○、MacIE5× ★ - height・・・・・・・・・・・・・・・・・・・・・高さ
- 【百分比】、【数値】、【ワード】 auto ：標準、 inherit
【初期値】auto、：× 【対象】 除：インライン、テーブル列、列グループ 【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - max-height・・・・・・・・・・・・・・・・高さの最大値る
- 【百分比】、【数値】、【ワード】 none ：標準、 inherit
【初期値】none、：× 【対象】 除：インライン 【対応】N7○、N4×、E6×、O7○、MacIE5× ★ - min-height・・・・・・・・・・・・・・・・・高さの最小値
- 【百分比】、【数値】、【ワード】 none ：標準、 inherit
【初期値】user、【継承】× 【対象】 除：インライン 【対応】N7○、N4×、E6×、O7○、MacIE5× ★
ボックス
- 上下左右、指定順
-
値1つの場合： 「上下左右」
値2つの場合： 「上下」「左右」
値3つの場合： 「上」「左右」「下」
値4つの場合： 「上」「右」「下」「左」 - margin・・・・・・・・・・・・・・・・・・・・マージン
-
【数値】、【百分率】、【ワード】inherit
margin-top： 上マージン
margin-bottom： 下マージン
margin-left： 左マージン
margin-right： 右マージン
【初期値】0、【継承】× 【対象】 除くテーブル要素 【対応】N7○、N4△、E6○、O7○、MacIE5○ ★ - padding・・・・・・・・・・・・・・・・・ パディング
- 【数値】、【百分率】、【ワード】inherit
padding-top： 上パディング
padding-bottom： 下パディング
padding-left： 左パディング
padding-right： 右パディングを
【初期値】0、【継承】× 【対象】除くテーブル要素 【対応】N7○、N4△、E6○、O7○、MacIE5○ ★ - border・・・・・・・・・・・・・・・・・・・・ボーダーのスタイル・太さ・色
-
border-width、border-style、border-colorを指定
【例】{border: 1px solid #ff0000;}
border-top・・・・・・・・・・・・・・上ボーダーのスタイル・太さ・色
border-bottom・・・・・・・・・・・下ボーダーのスタイル・太さ・色
border-left・・・・・・・・・・・・・・左ボーダーのスタイル・太さ・色
border-right・・・・・・・・・・・・・右ボーダーのスタイル・太さ・色
【初期値】none、【継承】× 【対象】指定要素参照 【対応】N7○、N4△、E6○、O7○、MacIE5○ ★ - border-width・・・・・・・・・・・・・ボーダーの太さ
-
【数値】、【ワード】none、inherit、thin、 thick、 medium、
border-top-width・・・・・・・・上ボーダーの太さ
border-bottom-width・・・・・下ボーダーの太さ
border-left-width・・・・・・・・左ボーダーの太さ
border-right-width・・・・・・・右ボーダーの太さ
【初期値】medium、【継承】× 【対象】【対応】N7○、N4△、E6○、O7○、MacIE5○ ★ - border-color・・・・・・・・・・・・・・ボーダーの色
-
border-top-color・・・・・・・・上ボーダーの色
border-bottom-color・・・・・下ボーダーの色
border-left-color・・・・・・・・左ボーダーの色
border-right-color・・・・・・・右ボーダーの色
【色】
【初期値】color要素、【継承× 【対象】【対応】N7○、N4△、E6○、O7○、MacIE5○ ★ - border-style・・・・・・・・・・・・・・ボーダーのスタイル
-
border-top-style・・・・・・・・上ボーダーのスタイル
border-bottom-style・・・・・下ボーダーのスタイル
border-left-style・・・・・・・・左ボーダーのスタイル
border-right-style・・・・・・・右ボーダーのスタイル
【ワード】none 、hidden 、 solid ： 1本線 、double ：2本線 、dashed ：破線、dotted：点線、 groove ：窪んだ線 、 rigde ：隆起した線 、
inset ：上と左のボーダーが暗く、下と右のボーダーが明るく囲まれた領域が窪む。
outset ：上と左のボーダーが明るく、下と右のボーダーが暗く囲まれた領域が隆 起。
【初期値】none、【継承】× 【対象】【対応】N7○、N4△、E6△、O7○、MacIE5△ ★ - outline・・・・・・・・・・・・・・・・・・・アウトラインのスタイル・太さ・色
-
outline-color、outline-style、outline-widthを指定。指定方法はborderに同じ、
上下左右の別は無。
outline-color・・・・・・・・・・・・・アウトラインの色
outline-style・・・・・・・・・・・・・アウトラインのスタイル
outline-width・・・・・・・・・・・・・アウトラインの太さ 【初期値】指定要素参照、【継承】× 【対象】【対応】N7×、N4×、E6×、O7○、MacIE5○ ★
表示・配置
- position・・・・・・・・・・・・・・・ボックスの配置方法
-
【ワード】static：デフォルト位置、relative：デフォルトの位置を基準、
absolute：ページ枠または親要素を基準、fixed：ie未対応、 inherit
【初期値】static、【継承】× 【対象】generatedを除 く全て 【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - top、left、right、bottom・・・・・・・・・・・・・上、左、右、下からの距離
-
【百分比】、【数値】、【ワード】inherit、auto、
【初期値】auto、【継承】× 【対象】positionを指定 された要素 【対応】N7○、N4×、E6○、O7○、MacIE5− ★ - display・・・・・・・・・・・・・・・・要素の表示形式
-
【ワード】inline ：インライン、block ：ブロック、 list-item：リスト形式、
none ：非表示、
run-in、compact、marker、table 、inline-table、table-row-group、
table-header-group、table-footer-group、table-row、table-column-group、
table-column、table-cell、 table-caption 、 none、inherit
【初期値】inline、【継承】× 【対象】positionを指 定された要素 【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - float・・・・・・・・・・・・・・・・・・左右の配置、回込み
- 【ワード】 none、
left、right、inherit
【初期値】none、【継承】× 【対象】positionを 指定されていない要素 【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - clear・・・・・・・・・・・・・・・・・・回込み解除
- 【ワード】 none、left、
right、both、inherit
【初期値】none、【継承】× 【対象】ブロックレベル要素 【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - z-index・・・・・・・・・・・・・・・・重なりの順序
- 【ワード】 auto、integer、
inherit 【順数】数字が大きいほうが手前に表示される
【初期値】auto、【継承】×、 【対象】positionを 指定された要素 【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - visibility・・・・・・・・・・・・・・・ボックスの表示・非表示
- 【ワード】
visible、hidden、collapse、inherit
【初期値】visible、【継承】×、 【対象】 【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - overflow・・・・・・・・・・・・・・・はみ出た内容の表示方法
- 【ワード】
visible、 hidden、scroll、auto、 inherit
【初期値】visible、【継承】× 【対象】ブロック レベル要素 【対応】N7△、N4×、E6△、O7△、MacIE5△ ★ - clip・・・・・・・・・・・・・・・・・・・・ボックスを切取り表示
- 【ワード】 shape、
auto、 inherit
【初期値】auto、【継承】× 【対象】ブロックレ ベル要素 【対応】N7−、N4−、E6−、O7−、MacIE5− - direction・・・・・・・・・・・・・・文字表記の方向（左右）
- 【ワード】 ltr：
左から 、 rtl：右から 、 inherit
【初期値】ltr、【継承】○ 【対象】【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - 'unicode-bidi・・・・・・・・・・・・・・文字表記の方向（左右）
- 【ワード】 normal、embed：無効、 bidi-override：有効、 inherit
【初期値】normal、【継承】× 【対象】【対応】N7○、N4×、E6○、O7○、MacIE5○ ★
リスト
- list-style・・・・・・・・・・・・・・・・・・マーカー
-
list-style-type、list-style-position、list-style-imageを指定
【初期値】指定要素参照、【継承】○ 【対象】list-item 【対応】N7○、N4△、E6△、O7○、MacIE5○ ★ - list-style-image・・・・・・・・・・・マーカー画像
- 【URI】none、inherit
【初期値】none、【継承】○ 【対象】list-item 【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - list-style-type・・・・・・・・・・・・マーカー文字の種類
- 【ワード】 disc、
circle 、 square 、 decimal 、 decimal-leading-zero 、 lower-roman 、
upper-roman 、 lower-greek 、 lower-alpha 、 lower-latin 、 upper-alpha 、
upper-latin 、 hebrew 、 armenian 、 georgian 、 cjk-ideographic 、 hiragana
、 katakana 、 hiragana-iroha 、 katakana-iroha 、 none 、 inherit
【初期値】disc、【継承】○ 【対象】list-item 【対応】N7○、N4×、E6△、O7○、MacIE5△ ★ - list-style-position・・・・・・・・・マーカーの表示位置
- 【ワード】
inside領域の中(字下げ無し） 、 outside：領域の外(字下げ有） 、inherit
【初期値】outside、【継承】○ 【対象】list-item【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - marker-offset・・・・・・・・・マーカーの表示位置
- 【ワード】 auto 、
inherit
【初期値】auto、【継承】× 【対象】list-item 【対応】N7×、N4×、E6×、O7×、MacIE5× ★
テーブル
- table-layout・・・・・・・・・・・・・・テーブル
- 【ワード】 auto、fixed、inherit
【初期値】auto、【継承】× 【対象】tableとinline-table要素 【対応】N7−、N4−、E6−、O7−、MacIE5− ★ - caption-side・・・・・・・・・・・・・・テーブルのキャプションの位置
- 【ワード】 top、bottom、left、right、inherit
【初期値】top、【継承】○ 【対象】table-caption要素 【対応】N7○、N4×、E6×、O7△、MacIE5× ★ - border-collapse・・・・・・・・・・・セルのボーダー
- 【ワード】 collapse、separate、inherit
【初期値】collapse、【継承】○ 【対象】tableとinline-table要素 【対応】N7○、N4×、E6○、O7○、MacIE5○ ★ - border-spacing・・・・・・・・・・・セルのボーダーの間隔
- 【百分比】、【数値】 、【ワード】inherit
【初期値】0、【継承】○ 【対象】tableとinline-table要素 【対応】N7○、N4×、E6×、O7○、MacIE5× ★ - empty-cells・・・・・・・・・・・・・・空白セルの枠線
- 【ワード】 show、hide、inherit
【初期値】show、【継承】○ 【対象】table 【対応】N7×、N4×、E6×、O7×、MacIE5× ★
内容挿入・引用符
- content・・・・・・・・・・・・・・・・・・・コンテンツ挿入
- 【URI】例： { content:url(img/xxx.gif); }、【string】文字列の挿入「"」「’」等で囲む【例】：{ content:"■ "; }、
【counter】、
【ワード】open-quote、close-quote、no-open-quote、no-close-quote ]+ 、quoteで定義された内容を挿入 attr(X)、 inherit
【初期値】empty string、【継承】× 【対象】適用要素の前後 【対応】N7×、N4×、E6×、O7△、MacIE5△ ★ - quotes・・・・・・・・・・・・・・・・・・・・引用符を設定する
- 【ワード】 none 、 inherit【string】
【初期値】user、【継承】○ 【対象】全て 【対応】N7−、N4−、E6−、O7−、MacIE5−
その他
- cursor・・・・・・・・・・・・・・・・・・・カーソル
- 【URI】*【ワード】auto、
crosshair 、default、pointer、move、e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、text、wait、 help、inherit
【初期値】auto、【継承】○ 【対象】全て 【対応】N7○、N4×、E6○、O7○、MacIE5○ ★
- scrollbar・・・・・・・・・・・・・・・・・・スクロールバー
-
指定は【色】win+ieのみ
scrollbar-arrow-color・：矢印
scrollbar-track-color：背景
scrollbar-face-color：表
scrollbar-highlight-color：左中
scrollbar-shadow-color：右中
scrollbar-3dlight-color：左外
scrollbar-darkshadow-color：右外
【string】
【初期値】−、【継承】○ 【対象】− 【対応】N7×、N4×、E6○、O7△、MacIE5× ★ - counter-increment
- 【identifier】、【integer】、【ワード】 none、inherit
【初期値】none、【継承】× 【対象】 【対応】N7−、N4−、E6−、O7−、MacIE5− - counter-reset
- 【identifier】、【integer】、【ワード】 none、inherit
【初期値】none、：× 【対象】 【対応】N7−、N4−、E6−、O7−、MacIE5−
値
- 【色】
-
{ color: #FF0000; } #で始まる6桁のカラーコード
{ color: red ; } カ ラーネーム
{ color: #f00; } #で始まる3桁のカラーコード
{ color: rgb(255,0,0); } rgb10進法による指定
{ color: rgb(100%,0%,0%); } rgb％ による指定 - 【ワード】
- キーワードによる指定、キーワードを記述
- 【百分率】
- %で指定
- 【数値】
- px、em、exで指定
- 【URI】
- {プロパティ : url(img/xxx.jpg)}
{プロパティ : url(http://www.xxx.com/)} - 【初期値】
- デフォルト、指定無しの状態
- 【継承】
- 継承の有無
- 【対象】
- 記述無しは全ての要素に指定可能
- 【サンプル】
- ★ブラウザ対応状況検証用サンプルがあります。
適応対象補足
- 【対応】
-
○ ブラウザにて対応が確認されたもの、一部未対応の値があっても使用可能な場合のものも含む
× 未対応
△ 一部未対応、設定により対応
− 未確認
-
N7 Netscape 7.1
N4 Netscape Navigator 4.7
E6 Internet Explorer 6 SP1
O7 Opera 7.23
F1 Firefox 1.0
MacIE5 Internet Explorer 5.0
-
手持ちのブラウザで検証しましたが、環境によって結果が変わることもあるかもしれません。
また、プロパティをサポートしていても、他のプロパティ、 親、隣接要素との兼合いで指定が無視されたりバグが起きるあります。
スタイルシートのバグについては『CSSバグ辞典スレッド』の要約で纏められています。
その他
こちらのページは覚書です。 質問は受け付けておりません。予めご了承ください。
誤字脱字および記述に間違え等を見つけられた方はメールフォームからお知らせ下さると嬉しいです。
