下記のように important 宣言を指定することにより、タグの style="..." で指定するよりも優先度を上げることができます。

p { color: red !important; }

外部スタイルシートファイルの文字コードを指定します。ファイルの先頭行に記述します。指定可能な文字コードの一覧は http://www.iana.org/assignments/character-sets にあります。

@charset "Shift_JIS";
p { color: red; }

Webフォントを使用可能にします。下記の記述で、font-family にフォント名として myfont を指定可能になります。format() はフォント形式(format名)を指定します。省略可能です。@font-face は、CSS2.0 で定義されましたが、CSS2.1 では削除され、CSS3 で再定義される予定です。

@font-face {
  font-family: myfont;
  src: url(http://www.yyy.zzz/myfont.woff) format("woff");
}
* {
  font-family: myfont;
}

利用可能なフォント形式には下記などがあります。http://www.fontfontfont.com/ などからダウンロードできます。形式を変換する http://onlinefontconverter.com/ などのサービスもあるようです。

下記の例では、システムに Marumojiフォントがあればそれを使用し、無ければ EOT、無ければ WOFF、無ければ TTF形式のフォントを使用します。

@font-face {
  font-family: myfont;
  src: local(Marumoji),
       url(font/Marumoji.eot) format('embedded-opentype'),
       url(font/Marumoji.woff) format('woff'),
       url(font/Marumoji.ttf) format('truetype');
}

フォントファイルは通常、同じドメインのサーバからしかダウンロードできません。他のドメインからダウンロードするには、CORS(Cross-Origin Resource Sharing)を用います。

下記のようにして他の外部スタイルシートファイルを読み込むことができます。

@import url(http://www.yyy.zzz/style.css);
@import "http://www.yyy.zzz/style.css";     /* CSS2以降 */

出力メディアによってスタイルシートを変更することができます。下記の例ではコンピュータスクリーンに表示する際には赤色で、印刷する時には太字で強調を表します。Internet Explorer 5 ではメディアとして screen(スクリーン)、print(印刷)、all(すべて)を指定できます。CSS2.1 ではこの他に aural(読み上げ)、braille(点字)、embossed(ページ付けした点字プリンタ)、handheld(ハンドヘルドデバイス)、projection(プロジェクタ)、tty(テレタイプ)、tv(TV等の低解像度装置)が定義されています。

@media screen {
  em { color: red; }
}
@media print {
  em { font-weight: bold; }
}
@media print, screen {
  em { font-size: 12pt; }
}

ネームスペース(名前空間)を指定します。最初の形式はデフォルトのネームスペースを指定します。次の形式は名前付きのネームスペースを指定します。

@namespace "http://www.w3.org/1999/xhtml";      /* 名前無しのデフォルトの名前空間 */
@namespace svg "http://www.w3.org/2000/svg";    /* 名前(svg)付きの名前空間 */

@namespace で定義した名前は、次のように使用します。

h1 { color: red; }      /* デフォルトの名前空間の中の h1要素 */
svg|rect { ... }        /* svg名前空間の中の rect要素 */

印刷時のページに関わるスタイルを指定します。:first は最初のページ、:right、:left は製本時の右側ページ、左側ページを意味します。ページスタイルでは、margin, margin-top, margin-bottom, margin-left, margin-right, size, marks を指定できます。page-break-before, page-break-after, page-break-inside, page, orphans, widows も参照してください。

@page { margin-top: 2cm; margin-bottom: 2cm; }
@page :first { margin-right: 4cm; }
@page :right { margin-right: 4cm; }
@page :left { margin-left: 4cm; }

色を指定します。下記の例はいずれも 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% */

上下左右のマージン(余白)を 20px, 3em、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-right: 2em;
margin-left: 2em;

上下左右のパディング(余白)を 2.0em, 2em, 120% などのように指定します。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-right: 2em;
padding-left: 2em;

border: は上下左右すべての、border-xxx: は上下左右それぞれのボーダー(枠線)の width, style, color を一度に指定します。

<div style="border: 1px solid gray;">あああ</div>

border-width: は上下左右すべての、border-xxx-width: は上下左右それぞれののボーダー(枠線)の太さを、thin(細線)、medium(既定値：中太線)、thick(太線)のいずれか、または 1px(幅指定) などのような単位付きの数値で指定します。border-width: は引数を 1～4個指定可能で、省略時の解釈は margin と同様になります。

h1 { border-width: 1px; border-style: solid; }

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: は上下左右すべての、border-xxx-color: は上下左右それぞれののボーダー(枠線)の色を red のような色の名前か、#ff0000 のような RGB形式などで指定します。border-color: は引数を 1～4個指定可能で、省略時の解釈は margin と同様になります。

h1 { border-color: red; border-width: 1px; border-style: solid; }

角の丸い枠線を表示することができます。radius には 10px など丸角を構成する円の半径を指定します。10px 20px のように 2つの値を指定すると、それぞれ、楕円の横方向の半径、縦方向の半径を示します。radius-list には、左上(横) 右上(横) 右下(横) 左下(横) / 左上(縦) 右上(縦) 右下(縦) 左下(縦) の 8つの値を指定します。縦方向の半径を省略すると横方向の半径と同じ値になります。左下を省略すると右上と、右下を省略すると左上と、右上を省略すると左上と同じ値が設定されます。

div.rad1 {
  border-radius: 10px;     /* すべての角 */
  border: 1px solid gray;
}
div.rad2 {
  border-radius: 30px 10px;   /* 左上＆右下  左下＆右上 */
  border: 1px solid gray;
}
div.rad3 {
  border-radius: 30px 10px 30px 10px / 30px 10px 30px 10px;
  border: 1px solid gray;
}

ボックスサイズの計算方法を、border-box(ボーダーの外側)、content-box(既定値：コンテンツ部分)、inherit(親要素を継承)のいずれかで指定します。border-box を指定すると、height と width が、ボーダーを含めたサイズとして計算されます。Firefox では -moz-box-sizing の形式をサポートしています。

.box {
  box-sizing: border-box;
  border: 30px solid #ffcccc;
  height: 100px;
  width: 100px;
}

ボックスに影をつけます。h には横方向のずれの長さ、v には縦方向のずれの長さを指定します。blur は省略可能で、ボカシ強度を指定します。spread も省略可能で、指定すると影のサイズが指定長さ分大きくなります。color には色を指定します。省略すると黒になります。キーワード inset を指定すると、影がボーダーの内側に表示されます。カンマで区切って、複数の影を表示することもできます。下記の例では、横方向に 5px、縦方向に 5px ずらし、10px のぼかしをつけた #666666 の色の影を、ボーダーの外側と、内側に表示しています。

.d1 {
  height: 300px;
  width: 300px;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 5px 5px 10px 0px #666666, 5px 5px 10px 0px #666666 inset;
  border: 8px solid #cc6666;
  background-color: #ffdddd;
}

リンクやフォーム部品がフォーカス状態になった時に表示される薄い枠線の太さ、形式、色を指定します。それぞれの値は border: を参照してください。

a:link, a:visited { 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; }

ポジショニングの方法を、static(既定値：本来の位置)、relative(本来の位置からの相対位置指定)、absolute(絶対位置指定)、fixed(絶対位置に固定)、inherit(継承)のいずれかで指定します。fixed は画面のスクロールに対して固定されます。

<span style="position:absolute; top:100px; left:100px;">
<img src="xxx.gif" width=50 height=50 alt="xxx">
</span>

absolute は、relative または absolute を指定した親要素(無ければページ)の左上を原点とします。下記のようにすることで、親要素を原点とした絶対位置(＝親要素からの相対位置)で座標を指定することが可能になります。

<div style="position:relative; width:70px; height:70px; background-color:silver;">
 <div style="position:absolute; top:10px; left:10px;
  width:30px; height:30px; background-color:red;"></div>
 <div style="position:absolute; top:20px; left:20px;
  width:30px; height:30px; background-color:blue;"></div>
 <div style="position:absolute; top:30px; left:30px;
  width:30px; height:30px; background-color:green;"></div>
</div>

上端、左端、下端、右端からの距離を 10px のような単位付きの数値や 50% のようなパーセント指定、または auto(既定値：自動)、inherit(継承)のいずれかで指定します。通常、position: と組み合わせて使用します。

<div style="position:absolute; top:100px; left:100px; width:50px; height:50px;">
<img src="xxx.gif" width=50 height=50 alt="xxx">
</div>

画像などの表示位置を left(左端)、right(右端)、none(既定値：指定しない)、inherit(継承)のいずれかで指定します。<img> タグの align属性に相当します。right または left を指定すると、テキストがその周りを回り込むように表示されるようになります。回り込みを解除するには clear: を用います。

<img src="xxx.gif" width=50 height=50 alt="xxx" style="float:right;">

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 に指定した数値が大きなものほど前面に表示されます。

<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 には ltr(既定値：左から右)、rtl(右から左)、inherit(継承)のいずれかを指定します。bidirection には normal(既定値：通常)、bidi-override(direction を有効にする)、embed(無効にする)、inherit(継承)のいずれかを指定します。

<div style="direction:rtl; unicode-bidi:bidi-override;">
昔の日本語も右から左でしたね
</div>

横幅、高さ、最小の横幅、最小の高さ、最大の横幅、最大の高さを 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;">

縦方向の配置を、親要素との相対位置で、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>

領域をはみ出した要素の扱いを、visible(既定値：表示する)、hidden(隠す)、scroll(スクロールバーで表示する)、auto(自動)、inherit(継承)のいずれかで指定します。overflow-x や overflow-y は、overflow の指定を横方向、縦方向のみに適用します。

<div style="width:10em; height:3em; overflow:scroll;">
    :
</div>

表示する範囲を auto(既定値：自動)、inherit(継承)、rect(上端,右端,下端,左端) 形式のいずれかで指定します。position:absolute と併用したときのみ有効なようです。下記の例では、画像の左上 50×50px の範囲のみを表示します。IE4～IE7 までは、カンマの代わりにスペースで区切る必要があります。

<img src="xx.gif" style="position:absolute; clip:rect(0px,50px,50px,0px);">   /* 標準形式 */
<img src="xx.gif" style="position:absolute; clip:rect(0px 50px 50px 0px);">   /* IE4～IE7 */

注：CSS2 の仕様では、rect() の右位置は、画像の左端からの距離ではなく、右端からのマージンと定義されていました。CSS2.1 では、多くのブラウザの実装にあわせて仕様が変更されるようです。

表示するしないを、visible(既定値：表示する)、hidden(表示しない)、inherit(継承)のいずれかで指定します。JavaScript で表示のオン・オフを切り替えることができます。

<span style="visibility:hidden">XXXX</span>

透明度を 0.0(透明)～1.0(不透明) の間で指定します。下記の例では、赤い半透明の四角形を表示します。

div.box { width:50px; height:50px; opacity: 0.5; background-color: red; }

content: は、:before や :after と組み合わせて、要素の前後に文字やオブジェクトを挿入するのに用いられます。

下記の例ではすべての h1要素の前に ■ を表示します。

h1:before { content: "■ "; }

下記の例ではすべての h1要素の前に画像(icon.gif)を表示します。Opera 4.0～6.* まではこの形式はサポートされていません。

h1:before { content: url(image/icon.gif); }

content に counter(name, style) または counters(name, string, style) を指定することができます。counter-increment, counter-reset も参照してください。

h1:before { content: counter(chapter) ". "; }

下記の例では、ページを音読する際に、h1要素の前に sounds/h1.wav を鳴らします。

@media aural {
  h1:before { content: url(sounds/h1.wav); }
}

attr(属性名) は、属性名で指定した属性値を挿入します。下記の例では、<img> による画像の前に alt属性の値を表示します。

img:before { content: attr(alt); }

open-quote、close-quote は、開く引用符、閉じ引用符を意味します。引用符のペアは quotes: で指定します。下記の例では、<q>～</q> を 「～」で、二重に囲まれた <q>～</q> を 『～』で囲みます。

q { quotes: "「" "」" "『" "』"; }
q:before { content: open-quote; }
q:after  { content: close-quote; }

counter(名前, 形式) は、名前で指定したカウンター値を挿入します。形式には decimal(数値)、lower-roman(小文字ローマ数字)、upper-roman(大文字ローマ数字)、cjk-ideographic(漢数字)、hiragana(あ、い、う・・・)、katakana(ア、イ、ウ・・・)などが定義されています。省略時は decimal になります。カウンター値は counter-increment: で増加させ、counter-reset: でリセットすることができます。下記の例では、章や節の前に、自動的に章番号、節番号を表示します。

body {
    counter-reset: chapter;
}
h1 {
    counter-increment: chapter;
    counter-reset: section;
}
h1:before {
    content: counter(chapter) ". ";
}
h2 {
    counter-increment: section;
}
h2:before {
    content: counter(chapter) "." counter(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: は、display:marker と組み合わせて、リストのマーカーを表示する位置を指定します。CSS2.0 で定義されていましたが、CSS2.1 では廃止されています。CSS3 では代わりに ::marker 疑似要素がサポートされる予定です。

li:before {
  display: marker;
  marker-offset: 3em;
  content: counter(item) ". ";
  counter-increment: item;
}

後述の 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 ul li { list-style-type: circle; }
ol li { list-style-type: decimal; }
ol ol 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); }

印刷時に、page-break-before は要素の直前で、page-break-after は要素の直後で改ページします。mode には auto(既定値：自動)、always(常に改ページ)、avoid(改ページしない)、left(次ページが左ページとなるように改ページ)、right(次のページが右ページとなるように改ページ)、inherit(継承)のいずれかを指定します。次の例は、印刷時、すべての H1要素の前で強制的に改ページします。

h1 { page-break-before: always; }

要素の途中で改ページすることを禁止します。mode には avoid(改ページしない)、auto(既定値：自動)、inherit(継承)のいずれかで指定します。下記の例では、テーブルの途中での改ページを禁止します。

table { page-break-inside: avoid; }

印刷時のページのサイズを、横幅 高さ、または、auto(プリンタに合わせて自動印字)、portrait(縦方向印字)、landscape(横方向印字)のいずれかを指定します。@page { ... } の中で使用します。CSS2.0 で定義されましたが、CSS2.1 で破棄され、CSS3 で再定義される予定です。

@page { size: 21.0cm 29.7cm; }

印刷時につけるトンボを指定します。mark には、crop(裁断トンボ)、cross(調整トンボ)、none(既定値：無し)、inherit(継承)を指定可能です。CSS2.0 で定義されていましたが、CSS2.1 で廃止されました。

@page { marks: crop; }

あらかじめ定義しておいたページ設定の名前を参照します。CSS2.0 で定義されましたが、CSS2.1 では破棄され、CSS3 で再定義される予定です。

@page yoko { size: landscape; }
#xyz { page: yoko; }

orphans: はページ最下部の段落に最低限印字すべき行数を、widows: はページ最上部の段落に最低限印字すべき行数を指定します。既定値は両方とも 2です。例えば、あと 20行しか余白がない場合に 21行の段落を印字する場合、20行と 1行に分割すると、widows: 2; の制限に違反するので、19行と 2行に分割して印字されます。

body { orphans: 4; widows: 4; }

color, image, repeat, attachment, position を一度に指定します。順序は自由で、省略も可能です。body の他、div や table などに対しても用いることができます。

body { background: url(image/back.gif) no-repeat fixed 50% 50%; }

IE9, Firefox 3.6, Chrome 1.0, Opera 10.5, Safari 1.3 以降では、背景を複数指定することも可能です。

body {
  background:
    url(back1.gif) top left no-repeat,
    url(back2.gif) top right no-repeat;
}

背景色を指定します。テキスト部分のみの指定も可能です。color には色の名前、transparent(既定値：透明色)、inherit(継承)のいずれかを指定します。

h1 { background-color: #ccccff; }

背景画像の URL、または none(既定値：画像なし)、inherit(継承)のいずれかを指定します。span や b や td などにも適用できます。

body { background-image: url(http://www.yyy.zzz/image/back.gif); }

背景画像の並べかたを repeat(既定値：敷き詰める)、repeat-x(横方向のみ並べる)、repeat-y(縦方向のみ並べる)、no-repeat(ひとつだけ表示する)、inherit(継承)のいずれかで指定します。

body {
  background-image: url(image/back.gif);
  background-repeat: repeat-y;
}

ウィンドウのスクロールを動かした時の背景の動作を scroll(既定値：一緒にスクロールする)、fixed(スクロールしない)、inherit(継承)のいずれかで指定します。

body {
  background-image: url(image/back.gif);
  background-attachment: fixed;
}

背景を表示する領域を border-box(既定値：ボーダーラインの外側まで)、padding-box(パディングの外側まで)、content-box(コンテンツの部分のみ)のいずれかで指定します。border-box と padding-box の差異は、ボーダーラインを太い点線にすると分かります。Opera では content-box がまだサポートされていません。

.back {
    border: 10px dashed black;
    margin: 20px;
    padding: 20px;
    background-clip: padding-box;
    background-image: url(image/back.gif);
}

背景を表示する際の基準位置を border-box(既定値：ボーダーラインの外側まで)、padding-box(パディングの外側まで)、content-box(コンテンツの部分のみ)のいずれかで指定します。border-box と padding-box の差異は、ボーダーラインを太い点線にすると分かります。

.back {
    border: 10px dashed black;
    margin: 20px;
    padding: 20px;
    background-origin: padding-box;
    background-color: #ffcccc;
}

背景画像のサイズを指定します。sizeは、100px のような長さ、50% のようなパーセント、auto(既定値：自動)、cover(表示領域の横幅にあわせる)、contain(表示領域の縦幅に合わせる)のいずれかで指定します。

.back {
    border: 1px solid gray;
    background-size: contain;
    background-iamge: url(image/back.gif);
}

背景の横方向の位置を 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;
}

normal(既定値：通常), italic(イタリック), oblique(斜め)のいずれかを指定します。CSS2 からは inherit(上位のスタイルを継承)が加わりました。

italic と oblique はどちらも斜体フォントになりますが、CSS1 の定義では、元々斜体のフォントを使用するか、通常フォントを無理矢理斜体にして使用するかの差違があります。

h1, h2 { font-style: italic; }

normal(既定値：通常), small-caps(大文字)のいずれかを指定します。CSS2 からは inherit(継承)も指定可能です。small-caps を指定すると、アルファベットの小文字が(すこし小さめの)大文字で表示されるようになります。

h1, h2 { font-variant: small-caps; }

フォントの太さを normal(既定値), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 のいずれかで指定します。

dt { font-weight: bold; }

フォントの大きさを指定します。絶対指定として xx-small, x-small, small, medium(既定値), large, x-large, xx-large、相対指定として larger, smaller、絶対単位指定として 10in, 10cm, 10mm, 10pt, 10pc, 相対単位指定として 10px, 10ex, 10em などを、割合指定として 120% などを指定します。単位を省略して 20 のようには指定できないので注意してください。

画像サイズにあわせてフォントの大きさを固定したいという要望がありますが、ブラウザによって単位の解釈が異なるため、すべてのブラウザで同じフォントの大きさを実現するのは困難なようです。

body, th, tD { font-size: 16pt; }

テキストの高さを 1.5em, 150% などで指定します。行間をあけて、読みやすい文章を記述するのに便利です。

body, th, td { line-height: 130%; }

フォントを指定します。カンマ(,)で複数記述すると、指定したフォントが無ければ次のフォントが採用されます。スペースを含むフォントは "Times New Roman" のように "..." か '...' で囲みます。CSS1 では serif, sans-serif, cursive, fantasy, monospace が定義されています。CSS2 では inherit(継承)がサポートされています。

Windows では "ＭＳ ゴシック", "ＭＳ 明朝", "ＭＳ Ｐゴシック", "ＭＳ Ｐ明朝" などがサポートされています。Ｐ がつくのはプロポーショナルフォントです。Windows 98 では "MS UI Gothic" が、Windows Vista では "メイリオ" がサポートされました。Macintosh では "Osaka"、"細明朝体"、"平成角ゴシック" などのフォントがあります。→ フォントの例

* { font-family: 'メイリオ', 'ＭＳ Ｐゴシック', 'Osaka'; }

フォントの幅を normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit のいずれかで指定します。CSS2.0 で定義されましたが、CSS2.1 では破棄されました。CSS3 で再定義される予定です。

<div style="font-stretch:condensed; font-family:'Arial'">This is Japan.</div>
<div style="font-stretch:expanded; font-family:'Arial'">This is Japan.</div>

フォントの高さと幅の比率(フォントサイズを文字 x の高さで割った値)を、none(指定しない)、0.46 のような数値、inherit(継承)のいずれかで指定します。CSS2.0 で定義されましたが、CSS2.1 では破棄されました。CSS3 で再定義される予定です。font-family で複数のフォントを指定した場合、フォントによって見栄えの大きさが異なるのを、この数値を指定することによって見かけ上の大きさ(文字 x の高さ)をそろえることができます。

h1 { font-size-adjust: 0.46; }

テキストの最初の 1行のインデント(字下げ)を 1em のような単位付きの数値、10% のようなパーセント、inherit(継承)のいずれかで指定します。下記の例では、すべての段落(<p>～</p>)の先頭を 1文字分字下げします。

p { text-indent: 1em; }

テキストの配置を left(既定値：左寄せ)、right(右寄せ)、center(センタリング)、justify(両端揃え)、inherit(継承)のいずれかで指定します。ブロック要素に対して有効です。CSS2 ではテーブルにおけるセルの各要素を指定文字で揃える(数値を小数点の位置でそろえるなど)機能もサポートされました。

p { text-align: center; }

text-align: justify; と組み合わせて使用します。単語間や文字間のスペースを調整して、文章の表示上の右端あわせを行います。justify には、auto(既定値：ブラウザ依存)、inter-word(単語間のみによる調整)、inter-ideograph(単語間と文字間による調整)、distribute-all-lines(単語間と文字間により最後の行も調整)、newspaper(英文向け)、inter-cluster(アジア言語向け)、distribute(タイ言語向け)、kashida(アラビア語向け)などを指定します。

div { text-align: justify; text-justify: distribute-all-lines; }

テキストの装飾を none(何もなし)、underline(下線)、overline(上線)、line-through(打ち消し線)、blink(点滅)、inherit(継承)で指定します。複数指定も可能です。下記の例では、A要素に対して none を指定することで、下線の無いリンクテキストを実現しています。

a { text-decoration: none; }

下線の場所を、below(既定値：下側)、above(上側)のいずれかで指定します。

.upperline { text-decoration: underline; text-underline-position: above; }

テキストに影をつけます。下記の例では、H1要素の右方向 2px、下方向 3pxの位置にぼかし 4px の赤い影と、右方向 5px、下方向 6px の位置にぼかし無しの H1要素と同じ色の影をつけます。その他に none(無し)、inherit(継承)も指定可能です。CSS2.0 で定義されましたが、CSS2.1 では破棄され、CSS3 で再定義される予定です。

h1 { text-shadow: red 2px 3px 4px, 5px 6px; }

各文字間のスペースを normal(既定値)、2px などの長さ、inherit(継承)のいずれかで指定します。

body, th, td { letter-spacing: 0.5em; }

各ワード間のスペースを normal(既定値)、10px などの長さ、inherit(継承)のいずれかで指定します。

body, th, td { word-spacing: 3em; }

大文字、小文字変換について、capitalize(各単語の最初の文字を大文字にする)、uppercase(すべて大文字にする)、lowercase(すべて小文字にする)、none(既定値：何もしない)、inherit(継承)のいずれかで指定します。

h1 { text-transform: capitalize; }

要素の中の空白がどのように扱われるかを normal(既定値：自動改行する、複数の空白をひとつの空白に置換)、pre(自動改行しない、空白そのまま)、nowrap(自動改行しない、複数の空白をひとつの空白に置換)、inherit(継承)のいずれかで指定します。

td { white-space: nowrap; }

行末の禁則処理を、normal(既定値：通常通り「。」や「、」が禁則処理される)、strict(「っ」や「ゃ」なども禁則処理される)のいずれかで指定します。

行末の単語禁則処理を、normal(既定値：英文等は単語の切れ目で改行、和文などは単語の途中でも改行)、break-all(英文等・和文等共に単語の途中でも改行)、keep-all(英文等・和文等共に単語の途中では改行せず、単語の切れ目で改行)のいずれかで指定します。

単語の途中での改行を許すか否かを normal(既定値：許さない)、break-word(許す)のいずれかで指定します。

行間や文字間のスペースを調整します。mode には both(既定値：line と char の両方を適用する)、none(どちらも適用しない)、line(line のみを適用する)、char(char のみを適用する)のいずれかを指定します。type には、loose(既定値：日本語や韓国語に適した方法)、strict(中国語にも適した方法)、fixed(固定)のいずれかを指定します。半角文字と全角文字が混在した時の文字間の開け方が多少異なるようです。line と char には、行間、文字間のスペースを none(既定値：指定無し)、auto(自動)、3px や 1em などの長さや割合(%)のいずれかで指定します。

漢字のような表意文字と非表意文字の間にほんの少しだけ隙間を入れるかどうかを、none(既定値：隙間を入れない)、ideograph-alpha(表意文字とアルファベットの間に入れる)、ideograph-numeric(表意文字と数字の間に入れる)、ideograph-parenthesis(表意文字と括弧の間に入れる)、ideograph-space(表意文字の位置に適合するように入れる)のいずれかで指定します。複数指定することも可能です。

* { text-autospace: ideograph-alpha ideograph-numeric ideograph-parenthesis; }

アラビア語などのテキスト配置を最善化する際に用います。kashida には 50% のようなパーセントか、inherit(継承)のいずれかを指定します。

縦書きを実現します。mode には lr-tb(横書き：left to right, top to bottom)、tb-rl(縦書き：top to bottom, right to left)のいずれかを指定します。

<div style="writing-mode: tb-rl">
むかし、むかし、あるところに・・・
</div>

<ruby> 要素に対してルビの配置を、auto(既定値：自動)、left(左寄)、center(中央)、right(右寄)、distribute-letter(両端揃え)、distribute-space(均割)、line-edge(行末での処理変更)のいずれかで指定します。

ルビが長い場合のはみ出し具合を auto(既定値：はみ出す)、whitespace(スペース文字分までははみ出す)、none(はみ出さない)のいずれかで指定します。

<ruby> 要素に対してルビの配置を、above(既定値：上部)、inline(横)のいずれかで指定します。inline を指定した場合は、<ruby> 未対応のブラウザのように表示されます。

テーブルのキャプションの位置を top(上)、bottom(下)、right(右)、left(左)、inherit(継承)のいずれかで指定します。

caption { caption-side: bottom; }

テーブルのレイアウト方法を auto(既定値：自動)、fixed(固定)、inherit(継承)のいずれかで指定します。auto の場合、ブラウザは、テーブルの情報をすべて読み込んでから各列の最適な横幅を算出し、表示しますが、fixed を指定した場合、1行目を読み込んだ時点で各列の横幅を算出し、以後、その横幅を維持します。これにより、テーブルの表示が高速化されます。

table { table-layout: fixed; width: 300px; }

テーブルの各セルの枠線を collapse(隣のセルの枠線と重ねて表示)、separate(既定値：隣のセルとすこし離して表示)、inherit(継承)のいずれかで指定します。

table.col { border-collapse: collapse; }
table.sep { border-collapse: separate; }
td { border: 1px solid red; }

border-collapse: separate; を指定した際の隙間を 10px のような単位付きの数値で指定します。2px 3px と指定した場合は横に 2px、縦に 3px、10px と指定した場合は縦・横に 10px ずつ隙間があきます。

table { border-collapse: separate; border-spacing: 10px; }

中身が何もないセルの枠線を show(表示する)、hide(表示しない)、inherit(継承)のいずれかで指定します。CSS2 の仕様上の既定値は show ですが、大半のブラウザでは hide が既定値のようです。show を指定することにより、中身が空のセルにも枠線が表示されるようになります。

table { empty-cells: show; }

この要素にマウスを乗せたときのマウスカーソルの形状を 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)の動作を、auto(既定値：自動)、active(フォーカス移動時にオン)、inactive(フォーカス移動時にオフ)、disabled(IME使用を禁止)のいずれかで指定します。

メールアドレス：
<input type="text" style="ime-mode: disabled;">

IE5.0 でサポートされたビヘイビアという機能です。スタイルシートでスタイルを一括指定するのに加えて、ビヘイビア機能で動作(振る舞い)を一括指定することができます。behavior には、スクリプトファイルの URL や、<object> タグで指定したID、IE5.0 のデフォルトビヘイビア名などを指定します。下記の例では、ページ中のすべての画像に対して、「クリックしたら大きさを100×100に変更する」という振る舞いを指定しています。

img { behavior:url(http://www.yyy.zzz/scripts/xx.htc); }

ここで、xx.htc ファイルには以下のように記述しておきます。onclick はすべて小文字で記述してください。

<script>
attachEvent("onclick", func);
function func() {
    this.style.width = "100px";
    this.style.height = "100px";
}
</script>

scrollbar-base-color は赤系の色とか緑系の色など、スクロールバーのすべての要素の色をまとめて設定します。その他は、影の部分や矢印の部分などそれぞれの要素の色を個別に指定します。IE5.5 では body要素に対して、IE6 以降の標準モードでは html要素に対して指定します。

html, body {
  scrollbar-base-color: #ffcccc;
}

html, 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(継承)のいずれかで指定します。CSS3 では廃止され、代わりに voice-volume が定義されています。

h1 { volume: loud; }

音量を silent(無音)、x-soft(レベル 0)、soft(レベル 25)、medium(既定値：レベル 50)、loud(レベル 75)、x-loud(レベル 100)、inherit(継承)、もしくは 20dB のようなデシベル値で指定します。loud -6dB と記述すると、loud よりも 6DB だけ小さな音で再生されます。

h1 { voice-volume: loud; }

音声ユーザエージェントでの読み上げ方法を、none(読まない)、normal(既定値：通常)、spell-out(テキストのスペルを 1文字ずつ)、inherit(継承)のいずれかで指定する。

acronym { speak: spell-out; }

音声ユーザエージェントで読み上げる際の間を指定します。pause-before は要素を読む前の間を、pause-after は後の間を、pause は両方の間を一度に指定します。pause の引数がひとつの時は、前後の間を指定します。間は、1s(1秒)、100ms(100ミリ秒)、100%(平均的な 1単語に要する時間)、inherit(継承)のいずれかで指定します。

h1 { pause-before: 5s; }

音声ユーザエージェントで読み上げる際に、要素の前後で読み上げる音声を url(sound.wav) のような URL、none(読み上げない)、inherit(継承)のいずれかで指定します。cue は両方の音声を一度に指定します。cue の引数がひとつの時は、前後の音声を指定します。

h1 { cue: url(in.wav) url(out.wav); }

要素を読み上げ中にバックに流す背景音を url(back.wav) のような URLで指定します。URL に加えて mix(親要素の背景音はそのままで音を重ねる)、repeat(背景音を繰り返す)の指定も可能です。URL の代わりに auto(既定値：自動)、none(背景音無し)、inherit(継承)のいずれかを指定することもできます。

.happy { url(happy.wav) mix repeat; }

音源の方向を -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; }  /* 鈴木さんは左後ろ */

azimuth: が水平方向の角度を指定するのに対し、elevation: は垂直方向の角度を、-90deg～90deg の角度指定、below(-90deg)、level(0deg)、above(90deg)、higher(現在より+10deg)、lower(現在より-10deg)、inherit(継承)のいずれかで指定します。

.airplane { elevation: abobe; }

読み上げるスピードを 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; }   /* 田中さんの台詞は早口で */

声の候補を指定します。定義済みのmale(男性)、female(女性)、child(子供)の他、音声ブラウザがサポートする他の声を使用することもできます。

.tanaka { voice-family: comedian, male; }

声のピッチを、120Hz や 1kHz のような数値指定、x-low(低い)、low(低め)、medium(普通)、high(高め)、x-high(高い)、inherit(継承)のいずれかで指定します。

.tanaka { pitch: low; }

pitch-range: は声の抑揚を、stress: はアクセント部分の抑揚を、richness: は声の通りやすさを 0～100 までの数値、inherit(継承)のいずれかで指定します。

.tanaka { pitch-range: 65; stress: 70; richness: 75; }

セミコロンなどの区切り文字の読み方を、code(文字通り発音する)、none(区切りは入れるが発音しない)、inherit(継承)のいずれかで指定します。

code { speak-punctuation: code; }

数字の読み方を、digits(イチ・ニィ・サンのように)、continuous(ヒャクニジュウサンのように)、inherit(継承)のいずれかで指定します。

.userId { speak-numeral: digits; }

テーブルのセルを読み上げる際にヘッダ情報を読むかどうかを、once(既定値：同じヘッダを参照する一連のセルの前で一度だけ読む)、always(すべての関連セルの前で読む)、inherit(継承)のいずれかで指定します。

table { speak-header: always; }

フィルタとは、スタイルシートの拡張として Internet Explorer 4.0 でサポートされた機能です。文字や画像に対して影付きやぼかしなどのエフェクトをかけることができます。HTMLの記述だけで、画像を貼り付けなくても、下記などのグラフィック効果を表現することが可能です。

※ ただし、IEのフィルタ機能は Internet Explorer 10 で廃止されました。今後は、text-shadow, box-shadow などを利用してください。

IE以外のブラウザの人のために、この(↑)サンプルのみは画像に変換して貼り付けていますが、実際のサンプルは、「フィルタサンプル」を参照してください。

指定は簡単、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()">

テキストや画像を(半)透明にします。グラデーションをかけることもできます。属性には下記のものがあります。

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=10);
     background: url(xx.gif); font-size: 48pt;">
■ 半透明 ■
</div>

IE4.0(Win) で Alpha()を画像に対して適用すると、色が無茶苦茶になって無残な状況になってしまいました。しかし、何故だか、height=, width= のどちらかを、本来の画像の大きさより 2 小さな値に縮小してやると正常に表示できました。

画像をにじませたような効果を出します。文字の場合は立体的な影付き文字になります。属性には下記のものがあります。

add=true|false

trueを指定すると元の画像をにじませた絵の上に上書き表示します。falseの場合は上書き表示しません。

direction=n

上方向から時計方向の角度を指定します。右上は45、右下は135になります。

strength=n

にじませの強さを指定します。

<img src="xx.gif" width=98 height=98
     style="filter: Blur(strength=10);">

画像の中の指定した色を透明にします。属性には下記のものがあります。

color=rgb

透明にしたい色を #RRGGBB の形式で指定します。

<img src="xx.gif" width=98 height=98
     style="filter: Chroma(color=#ffff80);">

影をつけます。属性には下記のものがあります。DropShadow() を用いる際は width を指定してください。

color=color

影の色を指定します。

offX=n, offY=n

影を表示する位置を指定します。offX=5, offY=5 は、右に5、下に5の場所に影を表示します。

positive=true|false

falseを指定すると、画像の透明化された部分にまで影をつけます。

<div style="filter: DropShadow(color=silver); width:100%;">
<img src="xx.gif" width=100 height=100>
</div>

対象の領域を左右に反転します。

<div style="width: 100%; filter: FlipH();">
　:
</div>

対象の領域を上下に反転します。

<div style="width: 100%; filter: FlipV();">
　:
</div>

画像やテキストの回りに(太陽の炎のように)影をつけます。

color=color

影の色を #RRGGBB の形式で指定します。

strength=n

影をつける度合いを指定します。

<div style="width: 100%; filter: Glow(color=red);">
　:
</div>

画像やテキストを白黒化します。

<img src="xx.gif" width=90 height=90 style="filter: Gray();">

対象領域の色合い、彩度、明るさを反転させます。

<img src="xx.gif" width=90 height=90 style="filter: Invert();">

画像やテキストに光を当てたような効果を出します。フィルタだけではあまり効果はありません。addAmbient(R, G, B, stlength) や addPoint(x, y, z, R, G, B, stlength) などのフィルタ用メソッドと組み合わせて使用します。

<img src="xx.gif" id="imglight" style="filter:Light();">
<script>
   imglight.filters[0].addAmbient(255,255,255,15);
   imglight.filters[0].addPoint(50,50,20,255,255,128,100);
</script>

画像やテキストの透明部を指定色で塗りつぶし、非透明部を透明にします。

color=color

透明部を塗りつぶす色を指定します。

<div style="width:100%; filter: Mask(color=gray)">
～
</div>

影をつけます。

color=color

影の色を指定します。

direction=n

影をつける方向を上を0とした時計回りの角度で指定します。右上は45、右下は135です。

<div style="width:100%; filter: Shadow(color=gray,direction=135)">
～
</div>

画像やテキストに波かけの効果を出します。

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>

X線によるレントゲン写真のような効果を出します。

<img src="～" style="filter: Xray();">