CSS1、および、CSS2のごく一部、ポジショニング、IE4.0/5.0で定義されているスタイルシートの一部について説明します。仕様書の定義よりも、IEなどのブラウザ（日本語版）でどう実装されているかを中心に説明していきます。仕様書上の定義は翻訳などをご参照ください。

(C1/e3/N4) は、CSS1、Internet Explorer 3.0、Netscape Communicator 4.0 で定義・使用可能であることを意味します。動作の確認はWindowsで行っています。

色は次のような方法で指定します。

color: red
color: #FF0000
color: #F00　　　　　　... #FF0000と同じ
color: rgb(255, 0, 0)
color: rgb(100%, 0%, 0%)

redなどの色の名前は、CSS1では基本16色パレットの色名を、IE3.0、NN4.0ではこれに加えてNetscape色パレットの色名を、さらに、IE4.0やCSS2ではユーザー定義色の色名を指定することができます。

URLは次のように指定します。

background: url(http://aaa.bbb.ccc/zzz.gif)

長さの単位には次のようなものがあります。

font-size: 1.2in ... インチ（1in=2.54cm）
font-size: 1.2cm ... センチメートル
font-size: 1.2mm ... ミリメートル
font-size: 1.2pt ... ポイント（1pt=1/72in）
font-size: 1.2pc ... パイカ（1pc=12pt）

font-size: 1.2em ... フォントの高さ
font-size: 1.2ex ... 文字 x の高さ
font-size: 1.2px ... ピクセル

in, cm, mm, pt, pc は絶対的な長さ、em, ex, px は相対的な長さと定義されていますが、ブラウザによって実装がまちまちです。IE5.0では in〜pc に加えて px も絶対的長さ、NN4.0では px のみが絶対的な長さになるようです。

画面の横幅や通常のフォントサイズに対する割合をパーセンテージで指定することもできます。

font-size: 120% ... 120%の大きさにする。

以降で説明する、styleやvariantなどを一度に指定します。heightを指定する時はsizeとスラッシュ（ / ）で区切って指定します。CSS1ではsizeとfamily以外は省略可能となっています。NN4.0でsizeとfamilyを省略するとfont:全体が無視されます。IE5.0では、さらに、アイコンラベルやウィンドウメニューに現在使用されているフォントを示す値としてicon, menu, messagebox, caption, smallcaption, statusbarが追加されました。

BODY, TD, TH {
    font: italic bold 100%/150% serif;
}

normal（規定値：通常）, italic（イタリック）, oblique（斜め）のいずれかを指定します。italicとobliqueはどちらも斜体フォントになりますが、CSS1の定義では、元々斜体のフォントを使用するか、通常フォントを無理矢理斜体にして使用するかの差違があります。IE3.0やNN4.0ではobliqueをサポートしていません。IE4.0は未確認ですが、IE5.0ではobliqueもサポートしています。<I STYLE="font-style: normal">とすると、IE3.0では斜体のままになりますが、NN4.0では通常（斜体ではない）フォントになります。

H1, H2 { font-style: italic }

normal または small-caps を指定します。small-capsを指定すると、半角全角を問わず、アルファベットの小文字が（すこし小さめの）大文字で表示されるようになります。

H1, H2 { font-variant: small-caps }

フォントの太さを normal, bold, bolder, lighter, 100, 200, ... 900で指定します。IE4.0やNN4.0では通常と太字の2種類しかサポートしていないので、bold以外を使用することは少なそうです。

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% などを指定できます。

周りのフォントに対する相対的な大きさを指定する時は120%などのパーセント指定が無難です。smallやsmallerなどや、emやexなどの単位は、ブラウザにより解釈が異なるため、予想外のフォントサイズになるという悲劇がおこることがあります。

周りのフォントに影響されずに絶対的な大きさを指定するには10ptなどを用いるのが本当ですが、NN4.0などはすべての単位を相対的に扱ってしまうため、ブラウザのフォントサイズによって大きさが変わってしまいます。画像ファイルとフォントサイズをうまくレイアウトできるようになるのは、まだ先のことのようです。

BODY, TH, TD { font-size: 16pt }

テキストの高さを 2.0em, 120% などで指定します。行間をあけて、読みやすい文章を記述するのに便利です。しかし、IE3.0でテーブルを使用したページでこの line-height を指定すると、ページのレイアウトが無茶苦茶になってしまう（テーブルとテーブル前後の文章が重なって読めなくなる）というバグがあります。せっかく便利なスタイルなのですが、IE3.0が消え去るまでは使用は控えた方が安全です。

BODY, TH, TD { line-height: 130% }

フォントを指定します。カンマ（,）で複数記述すると、指定したフォントが無ければ次のフォントが採用されます。スペースを含むフォントは "Times New Roman"のように "..." か '...' で囲みます。CSS1ではserif, sans-serif, cursive, fantasy, monospaceが定義されています。Windowsだと、"ＭＳ ゴシック", "ＭＳ 明朝", "ＭＳ Ｐゴシック", "ＭＳ Ｐ明朝" あたりが一般的です。Ｐがつくのはプロポーショナルフォントです。しかし、NNでは、<FONT FACE="...">同様、フォントの指定はうまくいかないことが多いようです。

BODY, TH, TD { font-family: 'ＭＳ ゴシック'; }

red や green や #0000FF などのフォントの色を指定します。リンクテキストの色を変更するには、A:link { color:red }などの定義済みクラスを指定します。色の詳細は「とほほの色入門・色見本」を参照してください。

H1 { color: #CC0000; }

color, image, repeat, attachment, positionを一度に指定します。順序は自由で、省略も可能です。IE3.0での背景関連は、このbackground:の形式のみがサポートされているようです。BODYタグの他、SPANやTABLEなどに対しても用いることができます。

BODY { background: url(xx.gif) no-repeat fixed 50% 50%; }

背景色を指定します。テキスト部分のみの指定も可能です。colorにはtransparent（規定値：透明色）、もしくは色を指定します。

H1 { background-color: #CCCCFF }

背景画像を指定します。SPANやBタグなどにも使用できますが、NN4.0の場合はTABLEタグやTRタグには使用できませんでした。

BODY { background-image: url(back.gif); }

背景画像の並べかたを repeat（規定値：敷き詰める）, repeat-x（横方向のみ）, repeat-y（縦方向のみ）, no-repeat（ひとつだけ）のいずれかで指定します。

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

ウィンドウのスクロールを動かした時の背景の動作を scroll（規定値：一緒にスクロールする）, fixed（スクロールしない）のいずれかで指定します。NN4.0ではまだサポートされていないようです。

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

背景の横方向の位置を left, center, right, 0〜100% で、縦方向の位置を指定し、スペースで区切って縦方向の位置を top, center, bottom, 0〜100% で指定します。fixedと共に指定すると、背景画像の表示位置を指定することができます。

BODY {
  background-image: url(back.gif);
  background-repeat: no-repeat;
  background-position: center 100px;
  background-attachment: fixed;
}

各ワード間のスペースをnormalまたは10pxなどの長さで指定します。Internet Explorer では、Macintosh 版でのみ使用可能です。

BODY, TH, TD { word-spacing: 3em; }

各文字間のスペースをnormalまたは2pxなどの長さで指定します。

BODY, TH, TD { letter-spacing: 0.5em; }

テキストの装飾を none（何もなし）, underline（下線）, overline（上線）, line-through（打ち消し線）, blink（点滅）の中から指定します。IE3.0ではnone, underline, line-throughが、NN4.0ではこれに加えてblinkが指定可能です。Aタグに対してnoneを指定することで、下線の無いリンクテキストを実現できます。複数指定も可能です。

A { text-decoration: none; }

下線の場所を指定します。position には below（規定値：下側）、above（上側）のいずれかを指定します。

<U STYLE="text-underline-position:above">下線じゃないよな</U>

テキストの配置を baseline, middle, sub, super, text-top, text-bottom, top, bottom の中から、もしくは 70% のようなパーセンテージで指定します。<IMG>タグのALIGN属性に相当します。

capitalize（各単語の最初の文字を大文字にする）, uppercase（すべて大文字にする）, lowercase（すべて小文字にする）, none（規定値：何もしない） のいずれかを指定します。NN4.0では文字コードセットが欧米フォントの際に有効です。

テキストの配置をleft（規定値：左寄せ）, right（右寄せ）, center（センタリング）, justify（両端揃え）のいずれかで指定します。ブロックレベルの要素に対して有効です。justify は、IE5.0（IE4.0?）〜、Netscape6〜対応しています。IEの場合は、text-align のみだと、空白調整による両端揃え、text-justify とくみ合わせると文字間調整による両端そろえを実現するようです。

text-align:justify とくみ合わせて使用します。inter-word, newspaper, distribute, distribute-all-lines, inter-ideograph, inter-cluster, kashida, auto（規定値） などを指定しますが、1行に対して指定するなら distribute-all-lines、自動改行されるような長文に対して指定するなら distribute 当たりがおススメです。値によって、単語間のスペース調整のみで両端揃えしたり、文字間のスペース調整もおこなったり、長文の途中の行と最後の行で適用が変わったりなど、いろいろあるようです。

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

テキストの最初の1行のインデント（字下げ）を数値やパーセントで指定します。段落の最初を字下げする際に便利です。

行末の禁則処理を指定します。modeにnormalを指定すると通常通り（。や、が禁則処理される）、strictを指定すると「っ」や「ゃ」なども禁則処理されるようになります。

行末の単語禁則処理を指定します。modeにnormalを指定すると英文のみ単語の切れ目で改行されます。break-allを指定すると英文、和文共に改行されるようになります。keep-allは英文、和文共に単語の切れ目でのみ改行されるようになります。

<RUBY>タグに対してルビの配置を指定します。alignにはauto（規定値：自動）, left（左寄）, center（中央）, right（右寄）, distribute-letter（均割）, distribute-space（均割）, line-edge（行末での処理変更）などを指定します。

<RUBY>タグに対してルビの張り出しかた（?）を指定します。overhangにはauto（規定値：自動）, none, whitespaceのいずれかを指定しますが、表示上の違いはよく解りませんでした。

<RUBY>タグに対してルビの配置を指定します。positionにはabove（規定値：上部）, inline（横）のいずれかを指定します。inlineを指定した場合は、<RUBY>未対応のブラウザのように表示されます。

line と char には、行間、文字間のスペースを none（規定値：指定無し）、auto（自動）、3px や 1em などの長さや割合（%）のいずれかで指定します。

mode には both（規定値：line と char の両方を適用する）、none（どちらも適用しない）、line（line のみを適用する）、char（char のみを適用する）を指定します。

type は、loose（規定値：日本語や韓国語に適した方法）、strict（中国語にも適した方法）、fixed（固定）のいずれかを指定します。半角文字と全角文字が混在した時の文字間の開け方が多少異なるようです。

BODY { layout-grid: both loose 0.8em 0.2em; }

漢字のような表意文字と非表意文字の間にほんの少しだけ隙間を入れます。none（規定値：隙間を入れない）、ideograph-alpha（表意文字と非表意文字の間に入れる）、ideograph-numeric（表意文字と数字の間に入れる）、ideograph-parenthesis（表意文字と括弧の間に入れる）、ideograph-space（表意文字の位置に適合するように入れる）のいずれかを指定します。

アラビア語などのテキスト配置を最善化する際に用いられます。kashida にはパーセントか、inherit を指定します。

上下左右のマージン（余白）を 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 */

マージンはボーダーの外側の余白、後述のパディングはボーダーの内側の余白になります。

マージン

パディング 要素 ↓ボーダー　　パディング　　ボーダー↓

マージン

マージンを指定した場合、Netscape Communicator 4.01 などでマージンが元に戻らない場合（3重テーブルを使用した場合や、テーブル内で</P>の無い<P>を使用した場合などなど・・・）があるので注意しましょう。（本当は上の図もマージンの外枠をもうひとつ書きたかったのですが・・・）

上下左右のマージンをそれぞれ個別に指定します。

上下左右のパディング（余白）を 2.0, 20em, 120%などのように指定します。パディングは、ボーダーが存在する場合、その内側になります。padding: はmargin:と同様に上下左右のパディングを一度に指定します。

borderは上下左右すべての、border-xxxは上下左右それぞれのボーダーの width, style, color を一度に指定します。IEでは<DIV>などのブロック系タグに使用できます。

<DIV STYLE="border: thin solid">あああ</DIV>

ボーダーの色を指定します。引数は1〜4個指定可能で、margin: と同様に解釈されます。

ボーダーのスタイルを none（線無し）, dotted（点線）, dashed（粗い点線）, solid（実線）, double（二重線）, groove（谷線）, ridge（山線）, inset（内線）, outset（外線）で指定します。引数は1〜4個指定可能で、margin: と同様に解釈されます。

上下左右のボーダー（境界線）の太さを thin（細線）, medium（中太線）, thick（太線）, 1px（幅指定） などのように指定します。border-width: は margin: と同様に上下左右のボーダーを一度に指定します。

list-style-type, list-style-image, list-style-position を一度に指定します。

<LI>タグで表示されるマーカーの形を disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none のいずれかで指定します。

<LI>タグで表示されるマーカーのイメージを指定します。

UL { list-style-image:url(pochi.gif); }

マーカーの位置を inside, outside のいずれかで指定します。insideを指定すると、リストアイテムが折り返された時に、マーカー分の字下げが無視されます。

UL { list-style-position: inside }

ポジショニングの方法を、absolute（絶対位置指定）、relative（相対位置指定）、static（規定値：通常）のいずれかで指定します。<IMG>タグのSTYLE属性に直接指定すると、NN4.0で位置がずれてしまうようです。

<SPAN STYLE="position:absolute; top:100; left:100;">
<IMG SRC="xxx.gif" WIDTH=50 HEIGHT=50 ALT="xxx">
</SPAN>

position:absolute もしくは position:relative と共に使用します。位置を絶対位置、もしくは相対位置で指定します。

画像などの横幅と高さを指定します。

画像などの位置を left, right, none のいずれかで指定します。<IMG>タグのALIGN=leftなどと同様です。

表示するしないを、visible（規定値：表示する）、hidden（表示しない）、inherit（上位のオブジェクトに依存する）のいずれかで指定します。JavaScriptで表示のオン・オフを切り替えることで、いろいろな効果を実現することができます。

<SPAN STYLE="visibility:hidden">
<SPAN STYLE="visibility:inherit">XXXX</SPAN>
</SPAN>

表示する範囲を指定します。regionにautoを指定すると通常通り、rect(0,50,50,0)を指定すると、top=0,right=50,bottom=50,left=0 の範囲のみを表示します。

表示の際の重なりの順序を指定します。この数値が大きなものほど、前面に表示されます。

テキストの回り込み制御を none, left, right, bothで指定します。<BR>タグのCLEAR属性と同様です。

画面にどのように表示されるかを block（ブロック要素）, inline（インライン要素）, list-item（リスト要素）, none（表示しない） のいずれかで指定します。

文章の方向（日本語や英語は左から右だが、アラビア語は右から左）を指定します。directionにはltr（規定値：左→右）、rtl（右→左）、inherit（上位の属性を引継ぎ）のいずれかを指定します。ケースによってはdirectionだけでは右から左にはならないので、その時はbidirectionにnormal（通常）, bidi-override（directionを有効にする）、embed（無効にする）を指定します。

<DIV STYLE="direction:rtl">
昔の日本語も右から左でしたね
</DIV>

要素の中の空白がどのように扱われるかを normal, pre, nowrap のいずれかで指定します。

領域をはみ出したコンテンツの扱いを、scroll（スクロールバーで表示する）、hidden（隠す）、visible（規定値：表示する）、auto（自動）のいずれかで指定します。省略時は visible です。<DIV>, <TEXTAREA>, <SPAN>, <FIELDSET> に対して指定することができます。<TEXTAREA>の場合は、hiddenのみが有効です。

overflowの指定を、縦方向のみ、横方向のみに適用する際に用います。

巨大なテーブルを表示する際に、テーブルを最後まで読み込まないと表示されない状況を改善します。autoを指定すると今まで通りテーブルのすべてを読み込んでから表示を始めます。fixedを指定すると最初の部分のみを読み込んだ時点で横幅を決めて表示するため、体感的表示時間が早くなります。

<TABLE STYLE="table-layout:fixed">
    :
</TABLE>

テーブルの枠線の表示方法を指定します。separateは通常通り、collapse（建物崩壊）は隣り合ったセル間の枠線が重なり合ったように表示します。

マウスを上に乗せた時のマウスカーソルの形状を指定します。cursorにはauto, crosshair, default, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, helpのいずれかを指定します。

このページを印刷したときの改ページの場所を指定します。page-break-beforeはこのスタイルを指定したタグの直前で、page-break-afterはこのスタイルを指定したタグの直後で改ページします。whereにはauto（規定値：自動）、always（常に）、left（左白ページができるまで）、right（右白ページができるまで）のいずれかを指定します。

H1 { page-break-before: left }

テキストフォームなどにフォーカスが移動した時の日本語変換（IME）の動作を指定します。通常はautoで、activeはフォーカス移動時にON、inactiveはフォーカス移動時にオフ、disabledはIMEの使用を禁止します。

メールアドレス：
<INPUT TYPE=text STYLE="ime-mode:disabled">

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

IMG { behavior:url(xx.htc); }

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

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

BODY {
  scrollbar-track-color:#ffffff;
  scrollbar-face-color:#cccccc;
  scrollbar-shadow-color:#ddeeee;
  scrollbar-darkshadow-color:#ffffff;
  scrollbar-highlight-color:#ffffff;
  scrollbar-3dlight-color:#cccccc;
  scrollbar-arrow-color:#cccccc;
}

フィルタとは、スタイルシートの拡張として Internet Explorer 4.0 でサポートされた機能です。文字や画像に対して影付きやぼかしなどのエフェクトをかけることができます。HTMLの記述だけで、画像を貼り付けなくても、
　　
できちゃったりします。IE4.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()">

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

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="xx.gif" WIDTH=98 HEIGHT=98
     STYLE="filter:Alpha(opacity=30)">

<DIV STYLE="width:100%; filter:Alpha(opacity=60)">
<DIV STYLE="background:url(xx.gif); font-size:60pt">
■ 半透明 ■
</DIV>
</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:Choroma(color=#FFFFFF)">

影をつけます。属性には下記のものがあります。

color=color

影の色を指定します。

offX=n, offY=n

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

positive=true|false

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

<DIV STYLE="width:100%; filter:DropShadow(color=silver)">
〜
</DIV>

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

<TABLE STYLE="filter:FlipH()"><TR><TD>
〜
</TD></TR></TABLE>

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

<DIV STYLE="width:100%; filter:FlipV()">
〜
</DIV>

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

color=color

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

strength=n

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

<DIV STYLE="width:100%; filter:Glow(color=red)">
〜
</DIV>

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

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

画像やテキストに光を当てたような効果を出します。

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

color=color

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

影をつけます。

color=color

影の色を指定します。

direction=n

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

<SPAN STYLE="width:100%; filter:Shadow(color=gray)">
〜
</SPAN>

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

add=0|1

効果適用後、元のイメージを上書き表示するか否かを指定します。

freq=n

波の個数を指定します。

lightStrength=n

光の強さを0〜100の範囲で指定します。

phase=n

波の開始位相を0〜360の範囲で指定します。

strength=n

波の強さを指定します。

<IMG SRC="〜" STYLE="filter:Wave(freq=2,strength=4)">

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

<IMG SRC="〜" STYLE="filter:Xray()">