スタイルシート(Cascading Style Sheet)入門リファレンス
マージン（外側の余白）
上下左右のマージン（余白）を 40px, 10em、10% などのように指定。margin: の引数は 1〜4個指定が可能で、それぞれ、次のように解釈されます。上右下左の順番は、12時の方向から時計順。
margin: 1px; /* 上下左右=1px */ margin: 1px 2px; /* 上下=1px、左右=2px */ margin: 1px 2px 3px; /* 上=1px、左右=2px、下=3px */ margin: 1px 2px 3px 4px; /* 上=1px、右=2px、下=3px、左=4px */
マージンはボーダーの外側の余白、後述のパディングはボーダーの内側の余白になります。
他の要素 マージン
|
※ margin-top: top ※ margin-right: right ※ margin-bottom: bottom ※ margin-left: left
上下左右のマージンをそれぞれ個別に指定します。
margin-right: 2em; margin-left: 2em;
パディング（内側の余白）
上下左右のパディング（余白）を 5.0em, 10em, 160% などのように指定します。padding: の引数は 1〜4個指定が可能で、それぞれ、次のように解釈されます。上右下左の順番は、12時の方向から時計順。
padding: 1px; /* 上下左右=1px */ padding: 1px 2px; /* 上下=1px、左右=2px */ padding: 1px 2px 3px; /* 上=1px、左右=2px、下=3px */ padding: 1px 2px 3px 4px; /* 上=1px、右=2px、下=3px、左=4px */
前述のマージンはボーダーの外側の余白、パディングはボーダーの内側の余白。
※ padding-top: top ※ padding-right: right ※ padding-bottom: bottom ※ padding-left: left上下左右のパディングをそれぞれ個別に指定します。
padding-right: 4em; padding-left: 4em;色
色を指定します。下記の例はいずれも RGB（Red Green Blue）の R のみが 100% の赤色を示します。色の一覧は「色入門・色見本」を参照してください。
H1 { color: red; } /* 色の名前 */
H2 { color: #ff0000; } /* #RRGGBB */
H3 { color: #f00; } /* #RGB */
H4 { color: rgb(255, 0, 0); } /* rgb(R, G, B) 各数値は 0〜255 */
H5 { color: rgb(100%, 0%, 0%); } /* rgb(R, G, B) 各数値は 0〜100% */
ボーダー（枠線）
border: は上下左右すべての、border-xxx: は上下左右それぞれのボーダー（枠線）の width, style, color を一度に指定します。
<div style="border: 1px solid gray;">かきこみます</div>※ border-width: top right bottom left ※ border-top-width: width ※ border-right-width: width ※ border-bottom-width: width ※ border-left-width: width
border-width: は上下左右すべての、border-xxx-width: は上下左右それぞれののボーダー（枠線）の太さを、thin（細線）、medium（規定値：中太線）、thick（太線）のいずれか、または 1px（幅指定） などのような単位付きの数値で指定します。border-width: は引数を 1〜4個指定可能で、省略時の解釈は margin と同様になります。
H1 { border-width: 1px; border-style: solid; }
※ border-style: top right bottom left ※ border-top-style: style ※ border-right-style: style ※ border-bottom-style: style ※ border-left-style: style
border-style: は上下左右すべての、border-xxx-style: は上下左右それぞれののボーダー（枠線）のスタイルを、none（線無し）、dotted（点線）、dashed（粗い点線）、solid（実線）、double（二重線）、groove（谷線）、ridge（山線）、inset（内線）、outset（外線）、inherit（継承）のいずれかで指定します。border-style: は引数を 1〜4個指定可能で、省略時の解釈は margin と同様になります。
H1 { border-width: 1px; border-style: solid; }
※ border-color: color (/IE6/Ff) ※ border-top-color: color (IE6/Ff) ※ border-right-color: color (IE6/Ff) ※ border-bottom-color: color (IE6/Ff) ※ border-left-color: color (IE6/Ff)
border-color: は上下左右すべての、border-xxx-color: は上下左右それぞれののボーダー（枠線）の色を red のような色の名前か、#ff0000 のような RGB形式などで指定します。border-color: は引数を 1〜4個指定可能で、省略時の解釈は margin と同様になります。
H1 { border-color: red; border-width: 1px; border-style: solid; }
リスト
後述の list-style-type, list-style-image, list-style-position を一度に指定します。
LI { list-style: disc inside; }
<li> タグで表示されるマーカーの形を disc（規定値：黒丸）、circle（白丸）、square（四角）、decimal（1, 2, 3...）、lower-roman（i, ii, iii...）、upper-roman（I, II, III...）、lower-alpha（a, b, c...）、upper-alpha（A, B, C...）、decimal-leading-zero（01, 02, 03...）、lower-greek（α、β、γ...）、upper-greek（Α、Β、Γ...）、lower-latin（小文字ラテン文字）、upper-latin（大文字ラテン文字）、hebrew（ヘブライ数字）、armenian（アルメニア数字）、georgian（グルジア数字）、cjk-ideographic（一、二、三...）、hiragana（あ、い、う...）、katakana（ア、イ、ウ...）、hiragana-iroha（い、ろ、は...）、katakana-iroha（イ、ロ、ハ...）、none（なし）、inherit（継承）のいずれかで指定します。ブラウザによりサポート状況は異なります。
UL LI { list-style-type: disc; }
UL LI LI { list-style-type: circle; }
OL LI { list-style-type: decimal; }
OL LI LI { list-style-type: lower-alpha; }
マーカーの位置を outside（規定値：外側）、inside（内側）、inherit（継承）のいずれかで指定します。inside を指定すると、リストアイテムの文章が折り返された時に、マーカー分の字下げが行われなくなります。
LI { list-style-position: inside; }
<li> タグで表示されるマーカーのイメージを URL、none（無し）、inherit（継承）のいずれかで指定します。
UL { list-style-image: url(image/pochi.gif); }
背景の指定
color, image, repeat, attachment, position を一度に指定します。順序は自由で、省略も可能です。body の他、div や table などに対しても用いることができます。
BODY { background: url(image/back.gif) no-repeat fixed 50% 50%; }
※ background-color: color
背景色を指定します。テキスト部分のみの指定も可能です。color には色の名前、transparent（規定値：透明色）、inherit（継承）のいずれかを指定します。
H1 { background-color: #ccccff; }
※ background-image: image
背景画像の URL、または none（規定値：画像なし）、inherit（継承）のいずれかを指定します。span や b や td などにも適用できますが、Netscape 4.0 の場合は tr や table に適用することができないので注意してください。
BODY { background-image: url(http://www.yyy.zzz/image/back.gif); }
※ background-repeat: repeat
背景画像の並べかたを repeat（規定値：敷き詰める）、repeat-x（横方向のみ並べる）、repeat-y（縦方向のみ並べる）、no-repeat（ひとつだけ表示する）、inherit（継承）のいずれかで指定します。
BODY {
background-image: url(image/back.gif);
background-repeat: repeat-y;
}
※ background-attachment: attachment
ウィンドウのスクロールを動かした時の背景の動作を scroll（規定値：一緒にスクロールする）、fixed（スクロールしない）、inherit（継承）のいずれかで指定します。
BODY {
background-image: url(image/back.gif);
background-attachment: fixed;
}
※ background-position: position position
背景の横方向の位置を left（左端）、center（中央）、right（右端）または 50% のような割合で指定し、縦方向の位置を top（上端）、center（中央）、bottom（下端）または 50% のような割合で指定します。fixed と共に指定することにより、背景画像の表示位置を指定することができます。下記の例では、背景画像を中央にひとつだけ表示します。
BODY {
background-image: url(image/back.gif);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
フォント
style や variant などを一度に指定します。height を指定する時は size とスラッシュ（ / ）で区切って指定します。size と family 以外は省略可能です。fonttype には、現在のアイコンラベルやウィンドウメニューに現在使用されているフォントを示す値として caption, icon, menu, message-box, small-caption, status-bar のいずれかを指定します。CSS2 では inherit（継承）も指定可能です。
BODY, TD, TH {
font: italic bold 100%/150% serif;
}
※ font-style: style
normal（規定値：通常）, italic（イタリック）, oblique（斜め）のいずれかを指定します。CSS2 からは inherit（上位のスタイルを継承）が加わりました。
italic と oblique はどちらも斜体フォントになりますが、CSS1 の定義では、元々斜体のフォントを使用するか、通常フォントを無理矢理斜体にして使用するかの差違があります。IIE6.0 や Netscape 4.0 では oblique をサポートしていません。IIE6.0 は未確認ですが、IE5.0 では oblique もサポートしています。
H1, H2 { font-style: italic; }
※ font-variant: variant
normal（規定値：通常）, small-caps（大文字）のいずれかを指定します。CSS2 からは inherit（継承）も指定可能です。small-caps を指定すると、アルファベットの小文字が（すこし小さめの）大文字で表示されるようになります。
H1, H2 { font-variant: small-caps; }
※ font-weight: weight
フォントの太さを normal（規定値）, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 のいずれかで指定します。IIE6.0 や Netscape 4.0 では通常と太字の 2種類しかサポートしていないので、normal（通常）と bold（太字）以外を使用することは少なそうです。
DT { font-weight: bold; }
※ font-size: size
フォントの大きさを指定します。絶対指定として xx-small, x-small, small, medium（規定値）, large, x-large, xx-large、相対指定として larger, smaller、絶対単位指定として 10in, 10cm, 10mm, 10pt, 10pc, 相対単位指定として 10px, 10ex, 10em などを、割合指定として 120% などを指定します。単位を省略して 20 のようには指定できないので注意してください。
周りのフォントに対する相対的な大きさを指定する時は 120% などのパーセント指定が無難です。small や smaller などや、em や ex などの単位は、ブラウザにより解釈が異なるため、予想外のフォントサイズになるという悲劇がおこることがあります。
画像サイズにあわせてフォントの大きさを固定したいという要望がありますが、ブラウザによって単位の解釈が異なるため、すべてのブラウザで同じフォントの大きさを実現するのは困難なようです。詳細は「長さの単位 を参照してください。
BODY, TH, TD { font-size: 16pt; }
※ line-height: height
テキストの高さを 1.5em, 150% などで指定します。行間をあけて、読みやすい文章を記述するのに便利です。IIE6.0 ではテーブルを使用したページで line-height を使用すると、ページのレイアウトが無茶苦茶に崩れてしまうというバグがあるようです。使用する場合は、IIE6.0 を見捨てる覚悟で使用することになります。
BODY, TH, TD { line-height: 130%; }
※ font-family: family, family,...
フォントを指定します。カンマ（,）で複数記述すると、指定したフォントが無ければ次のフォントが採用されます。スペースを含むフォントは "Times New Roman" のように "..." か '...' で囲みます。CSS1 では serif, sans-serif, cursive, fantasy, monospace が定義されています。CSS2 では inherit（継承）がサポートされています。
Windows だと、"ＭＳ ゴシック", "ＭＳ 明朝", "ＭＳ Ｐゴシック", "ＭＳ Ｐ明朝" あたりが一般的です。Ｐ がつくのはプロポーショナルフォントです。Macintosh では "Osaka"、"細明朝体"、"平成角ゴシック" などのフォントがあります。→ フォントの例
Netscape 4.* では、<font face="..."> 同様、フォントの指定はうまくいかないことが多いようです。
BODY, TH, TD { font-family: 'ＭＳ ゴシック'; }
※ font-stretch: stretch
フォントの幅を normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit のいずれかで指定します。IE6.0、Netscape 7.0 ではまだサポートされていません。
BODY, TH, TD { font-stretch: condensed; }
※ font-size-adjust: adjust
フォントの高さと幅の比率（フォントサイズを文字 x の高さで割った値）を、none（指定しない）、0.46 のような数値、inherit（継承）のいずれかで指定します。IE6.0 や Netscape 7.0 ではまだサポートされていません。
H1 { font-size-adjust: 0.46; }
テキスト
テキストの最初の 1行のインデント（字下げ）を 1em のような単位付きの数値、10% のようなパーセント、inherit（継承）のいずれかで指定します。下記の例では、すべての段落（<p>〜</p>）の先頭を 1文字分字下げします。
P { text-indent: 1em; }
テキストの配置を left（規定値：左寄せ）、right（右寄せ）、center（センタリング）、justify（両端揃え）、inherit（継承）のいずれかで指定します。ブロック要素に対して有効です。justify は、IE5.0 や Netscape 6 から対応しています。IE の場合は、text-align のみだと、空白調整による両端揃え、text-justify とくみ合わせると文字間調整による両端そろえを実現するようです。CSS2 ではテーブルにおけるセルの各要素を指定文字で揃える（数値を小数点の位置でそろえるなど）機能もサポートされましたが、大半のブラウザではまだサポートされていないようです。
P { text-align: center; }
※ text-justify: justify
text-align: justify; と組み合わせて使用します。単語間や文字間のスペースを調整して、文章の表示上の右端あわせを行います。justify には、auto（規定値）、newspaper（英文向け）、inter-word（単語間のみによる調整）、distribute-all-lines（最後の行も調整）、inter-ideograph（単語間と文字間による調整）、inter-cluster（アジア言語向け）、distribute（タイ言語向け）、kashida（アラビア語向け）などを指定します。
DIV { text-align: justify; text-justify: distribute-all-lines; }
※ text-decoration: decoration decoration ...
テキストの装飾を none（何もなし）、underline（下線）、overline（上線）、line-through（打ち消し線）、blink（点滅）、inherit（継承）で指定します。複数指定も可能です。下記の例では、A要素に対して none を指定することで、下線の無いリンクテキストを実現しています。
A { text-decoration: none; }
※ text-underline-position: position
下線の場所を、below（規定値：下側）、above（上側）のいずれかで指定します。
.upperline { text-decoration: underline; text-underline-position: above; }
※ text-shadow: color x y shading, ...
テキストに影をつけます。下記の例では、H1要素の右方向 2px、下方向 3pxの位置にぼかし 4px の赤い影と、右方向 5px、下方向 6px の位置にぼかし無しの H1要素と同じ色の影をつけます。その他に none（無し）、inherit（継承）も指定可能です。
H1 { text-shadow: red 2px 3px 4px, 5px 6px; }
※ letter-spacing: space
各文字間のスペースを normal（規定値）、2px などの長さ、inherit（継承）のいずれかで指定します。
BODY, TH, TD { letter-spacing: 0.5em; }
※ word-spacing: space
各ワード間のスペースを normal（規定値）、20px などの長さ、inherit（継承）のいずれかで指定します。
BODY, TH, TD { word-spacing: 3em; }
※ text-transform: transform
大文字、小文字変換について、capitalize（各単語の最初の文字を大文字にする）、uppercase（すべて大文字にする）、lowercase（すべて小文字にする）、none（規定値：何もしない）。
H1 { text-transform: capitalize; }
※ white-space: space
要素の中の空白がどのように扱われるかを normal（規定値：通常）、pre（自動改行しない、空白そのまま）、nowrap（自動改行しない、空白はつめる）、inherit（継承）のいずれかで指定します。
TD { white-space: nowrap; }
※ line-break: mode
行末の禁則処理を、normal（規定値：通常通り「。」や「、」が禁則処理される）、strict（「っ」や「ゃ」なども禁則処理される）のいずれかで指定します。Netscape ではまだサポートされていませんが、通常時の動作として、Netscape 4.* では normal、Netscape 6.0 では strict と同じ動作をするようです。
※ word-break: mode行末の単語禁則処理を、normal（規定値：英文のみ単語の切れ目で改行）、break-all（英文、和文共に単語の途中でも改行）、keep-all（英文、和文共に単語の切れ目で改行）のいずれかで指定します。
※ ruby-align: align<ruby> 要素に対してルビの配置を、auto（規定値：自動）、left（左寄）、center（中央）、right（右寄）、distribute-letter（両端揃え）、distribute-space（均割）、line-edge（行末での処理変更）のいずれかで指定します。
※ ruby-overhang: overhangルビが長い場合のはみ出し具合を auto（規定値：はみ出す）、whitespace（スペース文字分までははみ出す）、none（はみ出さない）のいずれかで指定します。
※ ruby-position: position<ruby> 要素に対してルビの配置を、above（規定値：上部）、inline（横）のいずれかで指定します。inline を指定した場合は、<ruby> 未対応のブラウザのように表示されます。
※ layout-grid: mode type line char (e5) ※ layout-grid-line: line (e5) ※ layout-grid-char: char (e5) ※ layout-grid-mode: mode (e5) ※ layout-grid-type: type (e5)行間や文字間のスペースを調整します。line と char には、行間、文字間のスペースを none（規定値：指定無し）、auto（自動）、3px や 1em などの長さや割合（%）のいずれかで指定します。mode には both（規定値：line と char の両方を適用する）、none（どちらも適用しない）、line（line のみを適用する）、char（char のみを適用する）のいずれかを指定します。type には、loose（規定値：日本語や韓国語に適した方法）、strict（中国語にも適した方法）、fixed（固定）のいずれかを指定します。半角文字と全角文字が混在した時の文字間の開け方が多少異なるようです。
※ text-autospace: mode漢字のような表意文字と非表意文字の間にほんの少しだけ隙間を入れるかどうかを、none（規定値：隙間を入れない）、ideograph-alpha（表意文字と非表意文字の間に入れる）、ideograph-numeric（表意文字と数字の間に入れる）、ideograph-parenthesis（表意文字と括弧の間に入れる）、ideograph-space ※ text-kashida-space: kashida
アラビア語などのテキスト配置を最善化する際に用います。kashida には 50% のようなパーセントか、inherit（継承）のいずれかを指定します。
テーブル
テーブルのキャプションの位置を top（上）、bottom（下）、right（右）、left（左）、inherit（継承）のいずれかで指定します。Netscape 6 では top と bottom のみ有効です。
CAPTION { caption-side: bottom; }
※ table-layout: layout
テーブルのレイアウト方法を auto（規定値：自動）、fixed（固定）、inherit（継承）のいずれかで指定します。fixed を指定すると、テーブルの横幅をテーブルの内容に関わらず固定することができます。
TABLE { table-layout: fixed; width: 300px; }
※ border-collapse: collapse
テーブルの各セルの枠線を collapse（隣のセルの枠線と重ねて表示）、separate（隣のセルとすこし離して表示）。CSS2 の仕様書上の規定値は collapse ですが、大半のブラウザでは separate が規定値のようです。
TABLE.col { border-collapse: collapse; }
TABLE.sep { border-collapse: separate; }
TD { border: 1px solid red; }
※ border-spacing: space space
border-collapse: separate; を指定した際の隙間を 10px のような単位付きの数値で指定します。2px 3px と指定した場合は横に 2px、縦に 3px、10px と指定した場合は縦・横に 10px ずつ隙間があきます。
TABLE { border-collapse: separate; border-spacing: 10px; }
※ empty-cells: mode (Ff)
中身が何もないセルの枠線を show（表示する）、hide（表示しない）、inherit（継承）のいずれかで指定します。CSS2 の仕様上の規定値は show ですが、大半のブラウザでは hide が規定値のようです。show を指定することにより、中身が空のセルにも枠線が表示されるようになります。
TABLE { empty-cells: show; }
アウトライン
リンクやフォーム部品がフォーカス状態になった時に表示される薄い枠線の太さ、形式、色を指定します。それぞれの値は border: を参照してください。
A { outline: 1px solid gray; }
ビジュアル
画面にどのように表示されるかを block（ブロック要素）、inline（インライン要素）、list-item（リスト要素）、none（表示しない） のいずれかで指定します。CSS2 からは marker、run-in、compact、および、table、inline-table、table-row-group、table-column、table-column-group、table-header-group、table-footer-group、table-row、table-cell、table-caption が追加されていますが、まだあまりサポートされていないようです。
.hide { display: none; }
※ position: type (IE6/Ff)
ポジショニングの方法を、static（規定値：本来の位置）、relative（本来の位置からの相対位置指定）、absolute（絶対位置指定）、fixed（絶対位置に固定）、inherit（継承）のいずれかで指定します。通常、top や left と組み合わせて使用します。fixed を使用すると画面のスクロールに対して固定されます。Netscape 6.0 ではサポートされていますが、IE6.0 ではまだサポートされていません。<img> タグの style 属性に直接指定すると、Netscape 4.0 で位置がずれてしまうので、<span> に対して指定すると無難なようです。
<span style="position:absolute; top:100px; left:100px;"> <img src="xxx.gif" width=50 height=50 alt="xxx"> </span>※ top: length ※ left: length ※ bottom: length ※ right: length
上端、左端、下端、右端からの距離を 10px のような単位付きの数値や 50% のようなパーセント指定、または auto（規定値：自動）、inherit（継承）のいずれかで指定します。通常、position: と組み合わせて使用します。
<span style="position:absolute; top:100px; left:100px;"> <img src="xxx.gif" width=50 height=50 alt="xxx"> </span>※ float: float
画像などの表示位置を left（左端）、right（右端）、none（規定値：指定しない）、inherit（継承）のいずれかで指定します。<img> タグの align属性に相当します。right または left を指定すると、テキストがその周りを回り込むように表示されるようになります。回り込みを解除するには clear: を用います。
<img src="xxx.gif" width=50 height=50 alt="xxx" style="float:right;">※ clear: clear
float: によるテキストの回り込みを none（規定値：何もしない）、left（左側の回りこみ解除）、right（右側の回りこみを解除）、both（両側の回りこみを解除）のいずれかで指定します。<br> タグの clear 属性に相当します。
<img src="xxx.gif" width=50 height=50 alt="xxx" style="float:right"> <br style="clear: both;">※ z-index: order
要素同士が重なって表示される場合の、重なりの順序を指定します。z-index に指定した数値が大きなものほど前面に表示されます。
<div style="position:absolute; width:50px; height:50px;
z-index:2; background-color:green; top:10px; left:10px;"></div>
<div style="position:absolute; width:50px; height:50px;
z-index:3; background-color:blue; top:40px; left:30px;"></div>
<div style="position:absolute; width:50px; height:50px;
z-index:1; background-color:red; top:20px; left:50px;"></div>
※ direction: direction ※ unicode-bidi: bidirection
文章の方向（日本語や英語は左から右だが、アラビア語は右から左）を指定します。direction には ltr（規定値：左から右）、rtl（右から左）、inherit（継承）のいずれかを指定します。bidirection には normal（規定値：通常）、bidi-override（direction を有効にする）、embed（無効にする）、inherit（継承）のいずれかを指定します。
<div style="direction:rtl; unicode-bidi:bidi-override;"> 昔の日本語も右から左でしたね </div>※ width: length (/IE6/Ff) ※ height: length (/IE6/Ff) ※ min-width: length (Ff) ※ min-height: length (Ff) ※ max-width: length (Ff) ※ max-height: length (Ff)
横幅、高さ、最小の横幅、最小の高さ、最大の横幅、最大の高さを 100px のような単位付き数値、50% のようなパーセント形式、inherit（継承）のいずれかで指定します。width と height の場合は auto（規定値：自動）も指定可能です。max-width と max-height の場合は 、none（規定値：制限なし）も指定可能です。
<body style="min-width:200px; max-width:500px;"> <img src="xxx.gif" alt="xxx" style="width:50px; height:50px;">※ vertical-align: valign
縦方向の配置を、親要素との相対位置で、baseline（ベースラインあわせ）、middle（中央あわせ）、sub（下付き文字の位置）、super（上付き文字の位置）、text-top（テキストの上限あわせ）、text-bottom（テキストの下限あわせ）、top（上端あわせ）、bottom（下端あわせ）、inherit（継承）、70% のようなパーセント形式、0.5em のような単位付きの数値のいずれかで指定します。baseline は文字 x の、text-bottom は文字 y の下限を意味します。<img> タグの align 属性に相当します。
<div style="font-size:50px;"> <img src="mark.gif" width=10 height=10 style="vertical-align:middle;">Style </div>※ overflow: overflow ※ overflow-x: overflow ※ overflow-y: overflow
領域をはみ出した要素の扱いを、visible（規定値：表示する）、hidden（隠す）、scroll（スクロールバーで表示する）、auto（自動）、inherit（継承）のいずれかで指定します。Netscape ではブロック型要素に対してのみ有効なようです。overflow-x や overflow-y は、overflow の指定を横方向、縦方向のみに適用します。
<div style="width:10em; height:3em; overflow:scroll;">
:
</div>
※ clip: region
表示する範囲を auto（規定値：自動）、inherit（継承）、rect(0px,50px,50px,0px) 形式のいずれかで指定します。position:absolute と併用したときのみ有効なようです。下記の例では、画像の左上 50×50px の範囲のみを表示します。
<img src="xx.gif" style="position:absolute; clip:rect(0px,50px,50px,0px);">※ visibility: visibility
表示するしないを、visible（規定値：表示する）、hidden（表示しない）、inherit（継承）のいずれかで指定します。JavaScript で表示のオン・オフを切り替えることができます。
<span style="visibility:hidden">XXXX</span>
コンテント作成、自動ナンバリング
content: は、:before や :after と組み合わせて、要素の前後に文字やオブジェクトを挿入するのに用いられます。Opera 6.0 などがこの機能をサポートしています。
下記の例ではすべての H1要素の前に を表示します。
H1:before { content: ""; }
下記の例では、ページを音読する際に、H1要素の前に sounds/h1.wav を鳴らします。
@media aural {
H1:before { content: url(sounds/h1.wav); }
}
attr(属性名) は、属性名で指定した属性値を挿入します。下記の例では、<img> による画像の前に alt属性の値を表示します。
IMG:before { content: attr(alt); }
※ quotes: quotes
open-quote、close-quote は、開く引用符、閉じ引用符を意味します。引用符のペアは quotes: で指定します。下記の例では、<q>〜</q> を 「〜」で、二重に囲まれた <q>〜</q> を 『〜』で囲みます。
Q { quotes: "「" "」" "『" "』"; }
Q:before { content: open-quote; }
Q:after { content: close-quote; }
※ counter-reset: counter ※ counter-increment: counter
counter(名前, 形式) は、名前で指定したカウンター値を挿入します。形式には decimal（数値）、lower-roman（小文字ローマ数字）、upper-roman（大文字ローマ数字）、cjk-ideographic（漢数字）、hiragana（あ、い、う・・・）、katakana（ア、イ、ウ・・・）などが定義されています。省略時は decimal になります。カウンター値は counter-increment: で増加させ、counter-reset: でリセットすることができます。下記の例では、章や節の前に、自動的に章番号、節番号を表示します。
H1:before {
content: "第" counter(chapter) "章 ";
counter-increment: chapter;
counter-reset: section;
}
H2:before {
content: counter(chapter) "." counter(section) ". ";
counter-increment: section;
}
counters(名前, 区切り文字, 形式) は、二重、三重に入れ子構造になったカウンター値を区切り文字で連結したものに置換されます。下記の例では、入れ子構造になった <ol> リストにおいて、<ol> が出現する度に item[0]、item[1]、item[2] などの変数が初期化され、<li> の前で、item[0]、item[1]... を "." で連結したものが表示されます。
OL { counter-reset: item; }
LI { display: block; }
LI:before {
content: counters(item, ".") ". ";
counter-increment: item;
}
※ marker-offset: length
marker-offset: は、display:marker と組み合わせて、リストのマーカーを表示する位置を指定します。
LI:before {
display: marker;
marker-offset: 3em;
content: counter(item) ". ";
counter-increment: item;
}
印刷について
印刷時に、page-break-before は要素の直前で、page-break-after は要素の直後で改ページします。mode には auto（規定値：自動）、always（常に改ページ）、avoid（改ページしない）、left（次ページが左ページとなるように改ページ）、right（次のページが右ページとなるように改ページ）、inherit（継承）のいずれかを指定します。次の例は、印刷時、すべての H1要素の前で強制的に改ページします。
H1 { page-break-before: always; }
※ page-break-inside: mode
要素の途中で改ページすることを禁止します。mode には avoid（改ページしない）、auto（規定値：自動）、inherit（継承）のいずれかで指定します。下記の例では、テーブルの途中での改ページを禁止します。
TABLE { page-break-inside: avoid; }
※ size: size
印刷時のページのサイズを、横幅 高さ、または、auto（プリンタに合わせて自動印字）、portrait（縦方向印字）、landscape（横方向印字）のいずれかを指定します。
@page { size: 21.0cm 29.7cm; }
※ marks: mark
印刷時につけるトンボを指定します。mark には、crop（裁断トンボ）、cross（調整トンボ）、none（規定値：無し）、inherit（継承）を指定可能です。
@page { marks: crop; }
※ page: name
あらかじめ定義しておいたページ設定の名前を参照します。
@page yoko { size: landscape; }
#xyz { page: yoko; }
※ orphans: lines ※ widows: lines
orphans: はページ最下部の段落に最低限印字すべき行数を、widows: はページ最上部の段落に最低限印字すべき行数を指定します。規定値は両方とも 2です。例えば、あと 20行しか余白がない場合に 21行の段落を印字する場合、20行と 1行に分割すると、widows: 2; の制限に違反するので、19行と 2行に分割して印字されます。
ユーザインタフェース
この要素にマウスを乗せたときのマウスカーソルの形状を 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 （継承）、または URL指定のいずれかで指定します。
<a href="help.htm" style="cursor: help;">[ヘルプ]</a>※ ime-mode: mode
テキストフォームなどにフォーカスが移動した時の日本語変換（IME）の動作を、auto（規定値：自動）、active（フォーカス移動時にオン）、inactive（フォーカス移動時にオフ）、disabled（IME使用を禁止）のいずれかで指定します。
メールアドレス： <input type="text" style="ime-mode: disabled;">※ behavior: url(behavior)
IE5.0 でサポートされたビヘイビアという機能です。スタイルシートでスタイルを一括指定するのに加えて、ビヘイビア機能で動作（振る舞い）を一括指定することができます。behavior には、スクリプトファイルの URL や、<object> タグで指定したID、IE5.0 のデフォルトビヘイビア名などを指定します。下記の例では、ページ中のすべての画像に対して、「クリックしたら大きさを100×100に変更する」という振る舞いを指定しています。
IMG { behavior:url(http://www.yyy.zzz/scripts/xx.htc); }
ここで、xx.htc ファイルには以下のように記述しておきます。onclick はすべて小文字で記述してください。
<script type="text/javascript">
<!--
attachEvent("onclick", func);
function func() {
this.style.width = "100px";
this.style.height = "100px";
}
-->
</script>
※ scrollbar-base-color: color ※ scrollbar-track-color: color (IE5) ※ scrollbar-face-color: color (IE5) ※ scrollbar-shadow-color: color (IE5) ※ scrollbar-darkshadow-color: color (IE5) ※ scrollbar-highlight-color: color (IE5) ※ scrollbar-3dlight-color: color (IE5) ※ scrollbar-arrow-color: color (IE5)
スクロールバーの色を指定します。IE5.5 以降で使用可能です。scrollbar-base-color は赤系の色とか緑系の色など、スクロールバーのすべての要素の色をまとめて設定します。その他は、影の部分や矢印の部分などそれぞれの要素の色を個別に指定します。
BODY {
scrollbar-base-color: #ffcccc;
}
BODY {
scrollbar-track-color: #ffe0e0;
scrollbar-face-color: #ffbbbb;
scrollbar-shadow-color: #cc9999;
scrollbar-darkshadow-color: #ffcccc;
scrollbar-highlight-color: #ffe0e0;
scrollbar-3dlight-color: #ffbbbb;
scrollbar-arrow-color: #ff6666;
}
音声読み関連
音声読み上げブラウザで読み上げるときの音量を 0〜100 までの数値、120% のようなパーセント指定、silent（無音）、x-soft（レベル 0）、soft（レベル 25）、medium（規定値：レベル 50）、loud（レベル 75）、x-loud（レベル 100）、inherit（継承）のいずれかで指定します。
H1 { volume: loud; }
※ speak: speak
音声ブラウザでの読み上げ方法を、none（読まない）、normal（規定値：通常）、spell-out（テキストのスペルを 1文字ずつ）、inherit（継承）のいずれかで指定する。
ACRONYM { speak: spell-out; }
※ pause: brefore after ※ pause-before: time ※ pause-after: time
音声ブラウザで読み上げる際の間を指定します。pause-before は要素を読む前の間を、pause-after は後の間を、pause は両方の間を一度に指定します。pause の引数がひとつの時は、前後の間を指定します。間は、1s（1秒）、100ms（100ミリ秒）、100%（平均的な 1単語に要する時間）、inherit（継承）のいずれかで指定します。
H1 { pause-before: 5s; }
※ cue: brefore after ※ cue-after: sound ※ cue-before: sound
音声ブラウザで読み上げる際に、要素の前後で読み上げる音声を url(sound.wav) のような URL、none（読み上げない）、inherit（継承）のいずれかで指定します。cue は両方の音声を一度に指定します。cue の引数がひとつの時は、前後の音声を指定します。
H1 { cue: url(in.wav) url(out.wav); }
※ play-during: sound mix repeat
要素を読み上げ中にバックに流す背景音を url(back.wav) のような URLで指定します。URL に加えて mix（親要素の背景音はそのままで音を重ねる）、repeat（背景音を繰り返す）の指定も可能です。URL の代わりに auto（規定値：自動）、none（背景音無し）、inherit（継承）のいずれかを指定することもできます。
.happy { url(happy.wav) mix repeat; }
※ azimuth: angle
音源の方向を -360deg〜360deg の角度で指定します。角度の代わりに left-side（-90deg）、far-left（-60deg）、left（-40deg）、center-left（-20deg）、center（0deg）、center-right（20deg）、right（40deg）、far-right（60deg）、right-side（90deg）の名前を使用することも可能です。これらの名前に behind（背後）を加えた場合は、それぞれの向きが後ろ側になります。他に、leftward（現在より反時計回りに 20deg）、rightward（現在より時計回りに 20deg）、inherit（継承）も指定可能です。
.tanaka { azimuth: far-right; } /* 田中さんは右側 */
.suzuki { azimuth: far-left behind; } /* 鈴木さんは左後ろ */
※ elevation: angle
azimuth: が水平方向の角度を指定するのに対し、elevation: は垂直方向の角度を、-90deg〜90deg の角度指定、below（-90deg）、level（0deg）、above（90deg）、higher（現在より+10deg）、lower（現在より-10deg）、inherit（継承）のいずれかで指定します。
.airplane { elevation: abobe; }
※ speech-rate: rate
読み上げるスピードを 180（1分間に約180語）のような数値、x-slow（80語）、slow（120語）、medium（180〜200語）、fast（300語）、x-fast（500語）、faster（現在より+40語）、slower（現在より-40語）、inherit（継承）のいずれかで指定します。
.tanaka { speech-rate: x-fast; } /* 田中さんの台詞は早口で */
※ voice-family: voice, voice, ...
声の候補を指定します。定義済みのmale（男性）、female（女性）、child（子供）の他、音声ブラウザがサポートする他の声を使用することもできます。
.tanaka { voice-family: comedian, male; }
※ pitch: patch
声のピッチを、120Hz や 1kHz のような数値指定、x-low（低い）、low（低め）、medium（普通）、high（高め）、x-high（高井）、inherit（継承）のいずれかで指定します。
.tanaka { pitch: low; }
※ pitch-range: range ※ stress: stress ※ richness: richness
pitch-range: は声の抑揚を、stress: はアクセント部分の抑揚を、richness: は声の通りやすさを 0〜100 までの数値、inherit（継承）のいずれかで指定します。
.tanaka { pitch-range: 65; stress: 70; richness: 75; }
※ speak-punctuation: mode
セミコロンなどの区切り文字の読み方を、code（文字通り発音する）、none（区切りは入れるが発音しない）、inherit（継承）のいずれかで指定します。
CODE { speak-punctuation: code; }
※ speak-numeral: mode
数字の読み方を、digits（イチ・ニィ・サンのように）、continuous（ヒャクニジュウサンのように）、inherit（継承）のいずれかで指定します。
.userId { speak-numeral: digits; }
※ speak-header: mode
テーブルのセルを読み上げる際にヘッダ情報を読むかどうかを、once（規定値：同じヘッダを参照する一連のセルの前で一度だけ読む）、always（すべての関連セルの前で読む）、inherit（継承）のいずれかで指定します。
TABLE { speak-header: always; }
フィルタ
フィルタとは、スタイルシートの拡張として Internet Explorer 4.0 でサポートされた機能です。文字や画像に対して影付きやぼかしなどのエフェクトをかけることができます。HTMLの記述だけで、画像を貼り付けなくても、
できちゃったりします。IIE6.0以外のブラウザの人のために、この（↑）サンプルのみは画像に変換して貼り付けていますが、実際のサンプルは、「フィルタサンプル」を参照してください。
指定は簡単、style 属性で指定します。指定可能なタグには <body>, <span>, <div>, <img>, <input>, <button>, <table>, <tr>, <th>, <td>, <textarea>, <thead>, <tfoot>, <marquee> がありますが、<span>, <div> で使用する場合は、width, height を指定してやるか、position で absolute を指定してやる必要があります。
<span style="width:100%; filter:Shadow()">
影付きの文字になります
</span>
(...) の中には属性値をカンマ（ , ）で区切って指定します。
<span style="filter: Blur(direction=135, strength=5)">
効果を複数指定する場合はスペースで区切ります。
<span style="filter: FlipH() FlipV()">
※ filter: Alpha() (IE6)
テキストや画像を（半）透明にします。グラデーションをかけることもできます。属性には下記のものがあります。
- opacity=n
- 透明の度合いを0（透明）〜100（不透明）の範囲で指定します。
- finishOpacity=n
- 透明度を指定します。グラデーションは、opacity 〜 finishOpacity の範囲でかけられます。
- style=0|1|2|3
- グラデーションスタイルを指定します。startX, startY, finishX, finishY で指定した領域に対して、1は線形、2は円形、3は長方形型にグラデーションをかけます。0はグラデーションをかけません。
- startX=n, startY=n, finishX=n, finishY=n
- グラデーションをかける領域を指定します。
<img src="〜" width=98 height=98 style="filter: Alpha(opacity=30);">
<div style="width: 100%; filter: Alpha(opacity=60);
background: url(xx.gif); font-size: 48pt;">
半透明 </div>
IIE6.0（Win） で Alpha()を画像に対して適用すると、色が無茶苦茶になって無残な状況になってしまいました。しかし、何故だか、height=, width= のどちらかを、本来の画像の大きさより 2 小さな値に縮小してやると正常に表示できました。
※ filter: Blur() (IE6)画像をにじませたような効果を出します。文字の場合は立体的な影付き文字になります。属性には下記のものがあります。
- add=true|false
- trueを指定すると元の画像をにじませた絵の上に上書き表示します。falseの場合は上書き表示しません。
- direction=n
- 上方向から時計方向の角度を指定します。右上は45、右下は135になります。
- strength=n
- にじませの強さを指定します。
<img src="xx.gif" width=98 height=98
style="filter: Blur(strength=10);">
※ filter: Chroma() (IE6)
画像の中の指定した色を透明にします。属性には下記のものがあります。
- color=rgb
- 透明にしたい色を #RRGGBB の形式で指定します。
<img src="xx.gif" width=98 height=98
style="filter: Chroma(color=#FFFFFF);">
※ filter: DropShadow() (IE6)
影をつけます。属性には下記のものがあります。
- color=color
- 影の色を指定します。
- offX=n, offY=n
- 影を表示する位置を指定します。offX=5, offY=5 は、右に5、下に5の場所に影を表示します。
- positive=true|false
- falseを指定すると、画像の透明化された部分にまで影をつけます。
<div style="filter: DropShadow(color=silver);"> <img src="xx.gif" width=100 height=100> </div>※ filter: FlipH() (IE6)
対象の領域を左右に反転します。
<div style="width: 100%; filter: FlipH();"> : </div>※ filter: FlipV() (IE6)
対象の領域を上下に反転します。
<div style="width: 100%; filter: FlipV();"> : </div>※ filter: Glow() (IE6)
画像やテキストの回りに（太陽の炎のように）影をつけます。
- color=color
- 影の色を #RRGGBB の形式で指定します。
- strength=n
- 影をつける度合いを指定します。
<div style="width: 100%; filter: Glow(color=red);"> : </div>※ filter: Gray() (IE6)
画像やテキストを白黒化します。
<img src="xx.gif" width=90 height=90 style="filter: Gray();">※ filter: Invert() (IE6)
対象領域の色合い、彩度、明るさを反転させます。
<img src="xx.gif" width=90 height=90 style="filter: Invert();">※ filter: Light() (IE6)
画像やテキストに光を当てたような効果を出します。フィルタだけではあまり効果はありません。AddPoint() や ChangeColor() などのフィルタ用メソッドと組み合わせて使用します。
※ filter: Mask() (IE6)画像やテキストの透明部を指定色で塗りつぶし、非透明部を透明にします。
- color=color
- 透明部を塗りつぶす色を指定します。
影をつけます。
- color=color
- 影の色を指定します。
- direction=n
- 影をつける方向を上を0とした時計回りの角度で指定します。右上は45、右下は135です。
<div style="width:100%; filter: Shadow(color=gray)"> 〜 </div>※ filter: Wave() (IE6)
画像やテキストに波かけの効果を出します。
- add=0|1
- 効果適用後、元のイメージを上書き表示するか否かを指定します。
- freq=n
- 波の個数を指定します。
- lightStrength=n
- 光の強さを0〜100の範囲で指定します。
- phase=n
- 波の開始位相を0〜360の範囲で指定します。
- strength=n
- 波の強さを指定します。
<div style="width: 120px; text-align: center;
filter: Wave(freq=2,strength=4,lightStrength=60);">
<img src="〜" width=100 height=100>
</div>
※ filter: Xray() (IE6)
X線によるレントゲン写真のような効果を出します。
<img src="〜" style="filter: Xray();">
<< PAGE TOP >>
