スタイルシート リファレンス
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%}
【注意】body要素以外で背景画像をno-repeatでattachmentを指定するとF1、N7、O7で画像が表示されないことがあります。 【初期値】−、【継承】× 【対象】 【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5Ｏ - background-color・・・・・・・・・・・・・・背景色
- 【色】 colorに同じ
【初期値】transparent、 【継承】× 【対象】 【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5Ｏ - background-image・・・・・・・・・・・・・・背景画像
- 【URI】、【例】url(img/xxx.jpg) 【注意】repeatプロパティを指定しないと背景全体に敷詰めた状態になります。
【初期値】none、 【継承】×【対象】 【対応】F1Ｏ、N7Ｏ、N4Ｏ、E6Ｏ、O7Ｏ、MacIE5Ｏ - background-position・・・・・・・・・・・背景画像位置
- 【ワード】 left、center、right、 top、 center、 bottom
【百分比】、【数値】 【注意】百分比、数値はそれぞれ ウィンドウの左からと、上からの距離です。 横ｘ、縦ｙの順番でスペースで区切って記述します。
【初期値】0% 0% 、【継承】× 【対象】 【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5Ｏ - background-repeat・・・・・・・・・・・・・背景画像の繰返し
- 【ワード】 repeat ：縦横、repeat-x ：横方向、repeat-y ：縦方向、
no-repeat 無、inherit
【初期値】repeat、【継承】× 【対象】 【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5Ｏ - background-attachment・・・・・・・・・背景画像の固定・移動
- 【ワード】 fixed ：背景画像の位置を固定 scroll ：スクロールに伴って、
背景画像移動
【初期値】 scroll、【継承】× 【対象】 【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5Ｏ
色
- color・・・・・・・・・・・・・・文字の色
-
【色】
【初期値】user、【継承】Ｏ 【対象】【対応】F1Ｏ、N7Ｏ、N4Ｏ、E6Ｏ、O7Ｏ、MacIE5Ｏcolor: #FF8800 のサンプルです。
color: darkorange のサンプルです。
color: #f80 のサンプルです。
color: rgb(255,140,0) のサンプルです。
color: rgb(100%,50%,0%) のサンプルです。
フォント
- font・・・・・・・・・・・・・・・・・・・・フォント
- font-style、 font-variant、 font-weight、 font-size、 line-height、
font-familyを指定
【例】 {font: italic normal bold 10px/150% serif;}
【初期値】指定要素参照、【継承】Ｏ 【対象】 【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5Ｏ - font-style・・・・・・・・・・・・・・・・・・・・フォント・スタイル
- 【ワード】 normal :標準 italic :イタリック
oblique :斜体、inherit
【初期値】normal、【継承】Ｏ 【対象】 【対応】F1Ｏ、N7Ｏ、N4△、E6Ｏ、O7Ｏ、MacIE5Ｏfont-style:italic のサンプルです。
font-style:oblique のサンプルです。
- font-variant・・・・・・・・・・・・・・・・・・・小文字サイズの大文字
- 【ワード】 normal :標準、small-caps :小文字サイズの大文字
【初期値】normal、【継承】Ｏ 【対象】 【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5Ｏsmall-caps;有：日本語abc
small-caps;無：日本語abc - font-weight・・・・・・・・・・・・・・・・・・・・フォントの太さ
- 【ワード】 normal :標準、 bold :太字、 lighter :
細く、 bolder*太く。数値100〜900
【初期値】normal、【継承】Ｏ 【対象】【対応】F1Ｏ、N7Ｏ、N4△、E6Ｏ、O7Ｏ、MacIE5Ｏfont-weight:bold のサンプルです。
font-weight:lighter; のサンプルです。
font-weight:bolder のサンプルです。
font-weight:normal のサンプルです。
- font-size・・・・・・・・・・・・・・・・・・・・フォントのサイズ
- 【ワード】 xx-small、x-small、small、medium、large、x-large、xx-large、
smaller、larger、
【百分比】、【数値】
【初期値】medium、【継承】Ｏ 【対象】 【対応】F1Ｏ、N7Ｏ、N4Ｏ、E6Ｏ、O7Ｏ、MacIE5Ｏfont-size:xx-small のサンプルです。
font-size:x-small のサンプルです。
font-size:large のサンプルです。
font-size:x-large のサンプルです。
font-size:xx-large のサンプルです。
- line-height・・・・・・・・・・・・・・行の高さ
- 【ワード】 normal ：標準
【百分比】、【数値】
【初期値】normal、【継承】Ｏ 【対象】 【対応】F1Ｏ、N7Ｏ、N4Ｏ、E6Ｏ、O7Ｏ、MacIE5Ｏline-height:50%; のサンプルです。
line-height:50%; のサンプルです。
line-height:50%; のサンプルです。
line-height:100%; のサンプルです。
line-height:100%; のサンプルです。
line-height:100%; のサンプルです。
line-height:200% のサンプルです。
line-height:200% のサンプルです。
line-height:200% のサンプルです。 - font-family・・・・・・・・・・・・・・・・・・・・フォントの種類
- 【種類】 sans-serif :ゴシック、serif :明朝、cursive :筆記体、fantasy :
装飾的、monospace :等幅
【名前】
【初期値】user、【継承】Ｏ 【対象】 【対応】F1Ｏ、N7Ｏ、N4△、E6Ｏ、O7Ｏ、MacIE5Ｏfont-family:sans-serif のサンプルです。
font-family:serif のサンプルです。
font-family:cursive のサンプルです。
font-family:fantasy のサンプルです。
font-family:monospace のサンプルです。
テキスト
- text-align・・・・・・・・・・・・・・・行揃え
- 【ワード】 left、right 、center
、justify均等割付△
【初期値】user、【継承】Ｏ 【対象】 ブロック レベル要素【対応】F1Ｏ、N7Ｏ、N4Ｏ、E6Ｏ、O7Ｏ、MacIE5Ｏtext-align:left のサンプルです。
text-align:right のサンプルです。
text-align:center のサンプルです。
text-align:justify のサンプルです。 - text-decoration・・・・・・・・・テキストの装飾
- 【ワード】 none 標準、
underline下線 、overline上線 、line-through 打消
【初期値】none、【継承】Ｏ 【対象】【対応】F1Ｏ、N7Ｏ、N4△、E6Ｏ、O7Ｏ、MacIE5Ｏtext-decoration:underline のサンプルです。
text-decoration:overline のサンプルです。
text-decoration:line-through のサンプルです。 - vertical-align・・・・・・・・・・・・縦方向の位置
- 【ワード】baseline 標準、 top 上端揃、middle 中央揃、 bottom 下端揃、
text-top 上端揃、 text-bottom 下端揃、super 上付き文字、sub 下付き文字、
【百分比】、【数値】
【初期値】baseline、【継承】× 【対象】 イン ラインレベル、テーブル・セル 【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5△
vertical-align:superのサンプルです。
vertical-align:subのサンプルです。
vertical-align:topのサンプルです。
vertical-align:text-topのサンプルです。
vertical-align:middleのサンプルです。 - letter-spacing・・・・・・・・・・・文字の間隔
- 【数値】、【ワード】 normal ：標準、
inherit
【初期値】normal、【継承】Ｏ 【対象】【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5Ｏletter-spacing:1emのサンプルです。
letter-spacing:0.5emのサンプルです。
letter-spacing:-0.1emのサンプルです。 - word-spacing・・・・・・・・・・・・単語の間隔
- 【数値】、【ワード】 normal ：標準
inherit
【初期値】normal、【継承】Ｏ 【対象】 【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5ＯThis is a sample for word-spacing : 1em
This is a sample for word-spacing : 0.5em
This is a sample for word-spacing : -0.1em - text-indent・・・・・・・・・・・・・・一行目のインデント
- 【百分比】、【数値】、【ワード】 inherit
：標準
【初期値】0、【継承】Ｏ 【対象】 ブロックレベル 【対応】F1Ｏ、N7Ｏ、N4△、E6Ｏ、O7Ｏ、MacIE5Ｏtext-indent:10pxのサンプルです。サンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルです。
text-indent:30pxのサンプルです。サンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルです。 - text-transform・・・・・・・・・・大文字・小文字
- 【ワード】 none ：デフォルト capitalize ：単語の先頭文字を大文字 lowercase ：全て小文字uppercase：全て大文字
【初期値】none、【継承】Ｏ 【対象】【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5Ｏ<p style="text-transform:none;">
This is a sample for text-transform:none
</p">
This is a sample for text-transform:none
<p style="text-transform:uppercase;">
This is a sample for text-transform:uppercase
</p>
This is a sample for text-transform:uppercase
<p style="text-transform:capitalize;">
This is a sample for text-transform:capitalize
</p>
This is a sample for text-transform:capitalize
<p style="text-transform:lowercase;">
This is a sample for text-transform:lowercase
</p>
This is a sample for text-transform:lowercase
- white-space・・・・・・・・・・スペース・タブ・改行
- 【ワード】
normal ：デフォルト。半角スペース・タブ・改行を、1つの半角スペースとして表示、自動改行 。
pre ：連続する半角スペース・タブ・改行を、そのまま表示。 自動改行 。
nowrap ： 自動的に改行しない。
【初期値】normal、【継承】Ｏ 【対象】 【対応】F1Ｏ、N7Ｏ、N4△、E6Ｏ、O7Ｏ、MacIE5ＯThis is a sample for white-space:nowrap width:200px;
This is a sample for white-space:normal width:200px;
This is a sample for white-space:normal width:250px;
This is a sample for white-space:normal width:300px;
Thie is a sample for white-space:pre width:200px;
幅・高さ
- width・・・・・・・・・・・・・・・・・・・・・幅
- 【百分比】、【数値】、【ワード】 auto ：標準、 inherit
【初期値】auto、【継承】× 【対象】 除：インライン、テーブル列、列グループ 【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5Ｏ - max-width・・・・・・・・・・・・・・・・幅の最大値る
- 【百分比】、【数値】、【ワード】 none ：標準、 inherit
【初期値】none、【継承】× 【対象】 除：インライン 【対応】F1Ｏ、N7Ｏ、N4×、E6×、O7Ｏ、MacIE5× - min-width・・・・・・・・・・・・・・・・・幅の最小値
- 【百分比】、【数値】、【ワード】 none ：標準、 inherit
【初期値】user、：× 【対象】 除：インライン 【対応】F1Ｏ、N7Ｏ、N4×、E6×、O7Ｏ、MacIE5× - height・・・・・・・・・・・・・・・・・・・・・高さ
- 【百分比】、【数値】、【ワード】 auto ：標準、 inherit
【初期値】auto、：× 【対象】 除：インライン、テーブル列、列グループ 【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5Ｏ - max-height・・・・・・・・・・・・・・・・高さの最大値る
- 【百分比】、【数値】、【ワード】 none ：標準、 inherit
【初期値】none、：× 【対象】 除：インライン 【対応】F1Ｏ、N7Ｏ、N4×、E6×、O7Ｏ、MacIE5× - min-height・・・・・・・・・・・・・・・・・高さの最小値
- 【百分比】、【数値】、【ワード】 none ：標準、 inherit
【初期値】user、【継承】× 【対象】 除：インライン 【対応】F1Ｏ、N7Ｏ、N4×、E6×、O7Ｏ、MacIE5×
width:100px; height:100px;のサンプルです。
min-width:300px; min-height:300px;のサンプルです。
max-width:100px; max-height:100px;のサンプルです。
ボックス
- 上下左右、指定順
-
値1つの場合： 「上下左右」
値2つの場合： 「上下」「左右」
値3つの場合： 「上」「左右」「下」
値4つの場合： 「上」「右」「下」「左」 - margin・・・・・・・・・・・・・・・・・・・・マージン
-
【数値】、【百分率】、【ワード】inherit
margin-top： 上マージン
margin-bottom： 下マージン
margin-left： 左マージン
margin-right： 右マージン
【初期値】0、【継承】× 【対象】 除くテーブル要素 【対応】F1Ｏ、N7Ｏ、N4△、E6Ｏ、O7Ｏ、MacIE5Ｏ - padding・・・・・・・・・・・・・・・・・ パディング
- 【数値】、【百分率】、【ワード】inherit
padding-top： 上パディング
padding-bottom： 下パディング
padding-left： 左パディング
padding-right： 右パディングを
【初期値】0、【継承】× 【対象】除くテーブル要素 【対応】F1Ｏ、N7Ｏ、N4△、E6Ｏ、O7Ｏ、MacIE5Ｏmargin:15px 1em 0.5em 10px;
padding:1em 3em ;のサンプルです。
オレンジの線から白い枠までがmargin、白い枠からこのテキスト部分までの余白がpadding。 - border・・・・・・・・・・・・・・・・・・・・ボーダーのスタイル・太さ・色
-
border-width、border-style、border-colorを指定
【例】{border: 1px solid #ff0000;}
border-top・・・・・・・・・・・・・・上ボーダーのスタイル・太さ・色
border-bottom・・・・・・・・・・・下ボーダーのスタイル・太さ・色
border-left・・・・・・・・・・・・・・左ボーダーのスタイル・太さ・色
border-right・・・・・・・・・・・・・右ボーダーのスタイル・太さ・色
【初期値】none、【継承】× 【対象】指定要素参照 【対応】F1Ｏ、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、【継承】× 【対象】 【対応】F1Ｏ、N7Ｏ、N4△、E6Ｏ、O7Ｏ、MacIE5Ｏ - border-color・・・・・・・・・・・・・・ボーダーの色
-
border-top-color・・・・・・・・上ボーダーの色
border-bottom-color・・・・・下ボーダーの色
border-left-color・・・・・・・・左ボーダーの色
border-right-color・・・・・・・右ボーダーの色
【色】colorに同じ
【初期値】color要素、【継承× 【対象】【対応】F1Ｏ、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、【継承】× 【対象】【対応】F1Ｏ、N7Ｏ、N4△、E6△、O7Ｏ、MacIE5△solid double dashed dotted groove inset outset rigde - outline・・・・・・・・・・・・・・・・・・・アウトラインのスタイル・太さ・色
-
outline-color、outline-style、outline-widthを指定。指定方法はborderに同じ、
上下左右の別は無。
outline-color・・・・・・・・・・・・・アウトラインの色
outline-style・・・・・・・・・・・・・アウトラインのスタイル
outline-width・・・・・・・・・・・・・アウトラインの太さ 【初期値】指定要素参照、【継承】× 【対象】【対応】F1×、N7×、N4×、E6×、O7Ｏ、MacIE5Ｏoutline-color:#fcc; outline-width:5px; outline-style:double;のサンプル
表示・配置
- position・・・・・・・・・・・・・・・ボックスの配置方法
-
【ワード】static：デフォルト位置、relative：デフォルトの位置を基準、
absolute：ページ枠または親要素を基準、fixed：ie未対応、 inherit
【初期値】static、【継承】× 【対象】generatedを除 く全て 【対応】F1Ｏ、N7Ｏ、N4×、E6Ｏ、O7Ｏ、MacIE5Ｏ - top、left、right、bottom・・・・・・・・・・・・・上、左、右、下からの距離
-
【百分比】、【数値】、【ワード】inherit、auto、
【初期値】auto、【継承】× 【対象】positionを指定 された要素 【対応】F1○、N7○、N4×、E6○、O7○、MacIE5−サンプルです。position:static; left:100px; top:-1.5em;サンプルです。
サンプルです。position:relative; left:100px; top:-1.5em; のサンプルです。
- 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を指 定された要素 【対応】F1○、N7○、N4×、E6○、O7○、MacIE5○<h1 style="display:inline; background-color:#fc7;">のサンプルです。
<span style="display:block;background-color:#fc7;">のサンプルです ここにdisplay:none;のサンプルがあります。
display:list-itemサンプルです。
display:list-itemサンプルです。 - float・・・・・・・・・・・・・・・・・・左右の配置、回込み
- 【ワード】 none、
left、right、inherit
【初期値】none、【継承】× 【対象】positionを 指定されていない要素 【対応】F1○、N7○、N4×、E6○、O7○、MacIE5○ - clear・・・・・・・・・・・・・・・・・・回込み解除
- 【ワード】 none、left、
right、both、inherit
【初期値】none、【継承】× 【対象】ブロックレベル要素 【対応】N7○、N4×、E6○、O7○、MacIE5○float:rightのサンプル。float:rightのサンプル。float:rightのサンプル。float:rightのサンプル。float:rightのサンプル。float:rightのサンプル。float:rightのサンプル。
↑は<hr style="clear:both; margin-top:0px; width:100%;">です。
float:leftのサンプル
float:leftのサンプル
↑は<hr style="clear:left; margin-top:0px; width:100%;">です。 - z-index・・・・・・・・・・・・・・・・重なりの順序
- 【ワード】 auto、integer、
inherit 【順数】数字が大きいほうが手前に表示される
【初期値】auto、【継承】×、 【対象】positionを 指定された要素 【対応】F1○、N7○、N4×、E6○、O7○、MacIE5○z-index:1z-index:2z-index:3 - visibility・・・・・・・・・・・・・・・ボックスの表示・非表示
- 【ワード】
visible、hidden、collapse、inherit
【初期値】visible、【継承】×、 【対象】 【対応】F1○、N7○、N4×、E6○、O7○、MacIE5○123<span style="visibility:hidden;">456</span>789
123789
のサンプルです。 - overflow・・・・・・・・・・・・・・・はみ出た内容の表示方法
-
【ワード】visible、 hidden、scroll、auto、 inherit
【初期値】visible、【継承】× 【対象】ブロックレベル要素
【対応】F1○、N7△、N4×、E6△、O7△、MacIE5△ width:150px; height:80px; overflow:visibleのサンプルです。overflow:visibleのサンプルです。overflow:visibleのサンプルです。overflow:visibleのサンプルです。overflow:visibleのサンプルです。overflow:visibleのサンプルです。overflow:visibleのサンプルです。
width:150px; height:80px; overflow:hiddenのサンプルです。
width:150px; height:80px; overflow:scroll;のサンプルです。overflow:scroll;のサンプルです。overflow:scroll;のサンプルです。overflow:scroll;のサンプルです。overflow:scroll;のサンプルです。
width:150px; height:80px; overflow:auto;のサンプルです。overflow:auto;のサンプルです。overflow:auto;のサンプルです。overflow:auto;のサンプルです。overflow:auto;のサンプルです。 - clip・・・・・・・・・・・・・・・・・・・・ボックスを切取り表示
- 【ワード】 shape、auto、 inherit
【初期値】auto、【継承】× 【対象】positonでabsoluteを指定された要素 【対応】N7×、N4×、E6×、O7×、MacIE5× - direction・・・・・・・・・・・・・・文字表記の方向（左右）
- 【ワード】 ltr：
左から 、 rtl：右から 、 inherit
【初期値】ltr、【継承】○ 【対象】【対応】F1○、N7○、N4×、E6○、O7○、MacIE5○direction: rtl; のサンプルです。
direction: ltr; のサンプルです。 - 'unicode-bidi・・・・・・・・・・・・・・文字表記の方向（左右）
- 【ワード】 normal、embed：無効、 bidi-override：有効、 inherit
【初期値】normal、【継承】× 【対象】【対応】F1○、N7○、N4×、E6○、O7○、MacIE5○direction: rtl; unicode-bidi: bidi-override; のサンプルです。
リスト
- 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-image:url(../img/cat.gif)のサンプル
- list-style-image:url(../img/cat.gif)のサンプル
- 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△- style="list-style-type:discのサンプル
- style="list-style-type:circleのサンプル
- style="list-style-type:squareのサンプル
- style="list-style-type:decimalのサンプル
- style="list-style-type:decimal-leading-zeroのサンプル
- style="list-style-type:lower-romanのサンプル
- style="list-style-type:upper-romanのサンプル
- style="list-style-type:lower-greekのサンプル
- style="list-style-type:lower-alphaのサンプル
- style="list-style-type:lower-latinのサンプル
- style="list-style-type:upper-alphaのサンプル
- style="list-style-type:upper-latinのサンプル
- style="list-style-type:hebrewのサンプル
- style="list-style-type:armenianのサンプル
- style="list-style-type:georgianのサンプル
- list-style-position・・・・・・・・・マーカーの表示位置
- 【ワード】
inside領域の中(字下げ無し） 、 outside：領域の外(字下げ有） 、inherit
【初期値】outside、【継承】○ 【対象】list-item 【対応】N7○、N4×、E6○、O7○、MacIE5○- style="list-style-position:insideのサンプル
list-style-position:insideのサンプル - style="list-style-position:insideのサンプル
list-style-position:insideのサンプル
- style="list-style-position:outsideのサンプル
list-style-position:outsideのサンプル - style="list-style-position:outsideのサンプル
list-style-position:outsideのサンプル
- style="list-style-position:insideのサンプル
テーブル
- table-layout・・・・・・・・・・・・・・テーブル
- 【ワード】 auto、fixed、inherit
【初期値】auto、【継承】× 【対象】tableとinline-table要素 【対応】F1−、N7−、N4−、E6△、O7−、MacIE5− - caption-side・・・・・・・・・・・・・・テーブルのキャプションの位置
- 【ワード】 top、bottom、left、right、inherit
【初期値】top、【継承】○ 【対象】table-caption要素 【対応】F1○、N7○、N4×、E6×、O7△、MacIE5×caption-side:top サンプル サンプル サンプル サンプル
caption-side:left サンプル サンプル サンプル サンプル
caption-side:right サンプル サンプル サンプル サンプル
caption-side:bottom サンプル サンプル サンプル サンプル - border-collapse・・・・・・・・・・・セルのボーダー
- 【ワード】 collapse、separate、inherit
【初期値】collapse、【継承】○ 【対象】tableとinline-table要素 【対応】F1○、N7○、N4×、E6○、O7○、MacIE5○border-collapse: collapse border-collapse: collapse
border-collapse: separate border-collapse: separate - border-spacing・・・・・・・・・・・セルのボーダーの間隔
- 【百分比】、【数値】 、【ワード】inherit
【初期値】0、【継承】○ 【対象】tableとinline-table要素 【対応】F1○、N7○、N4×、E6×、O7○、MacIE5× ★border-spacing:6px; サンプル border-spacing:6px; サンプル - empty-cells・・・・・・・・・・・・・・空白セルの枠線
- 【ワード】 show、hide、inherit
【初期値】show、【継承】○ 【対象】table 【対応】F1○、N7○、N4×、E6×、O7○、MacIE5× ★右の空白セルはempty-cells:show 右の空白セルはempty-cells:hide - vertical-align・・・・・・・・・・・・縦方向の位置
- 【ワード】baseline 標準、 top 上端揃、middle 中央揃、 bottom 下端揃、
text-top 上端揃、 text-bottom 下端揃、super 上付き文字、sub 下付き文字、
【百分比】、【数値】
【初期値】baseline、【継承】× 【対象】 イン ラインレベル、テーブル・セル 【対応】F1△、N7△、N4×、E6○、O7△、MacIE5△△テーブルセル内ではtop、middle、bottomの値のみ対応。vertical-align:baseline vertical-align:super vertical-align:sub vertical-align:text-top vertical-align:top vertical-align:middle vertical-align:bottom vertical-align:text-bottom
内容挿入・引用符
- 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△ ★content:url("../img/cat.gif")のサンプル。対応していれば、この文章は見えず画像が見えています。
content:'★'のサンプル。対応していれば、この文章は見えず★が見えています。 - 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○ ★crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help
- 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バグ辞典スレッド』の要約で纏められています。
その他
こちらのページは覚書です。 質問は受け付けておりません。予めご了承ください。
誤字脱字および記述に間違え等を見つけられた方はメールフォームからお知らせ下さると嬉しいです。
