ノート

Windows版のIE4.0までのブラウザ、IE6.0以降の互換モード、Mac版のIE5の互換モード、Opera7.0以降の互換モード(*1)などでは、widthプロパティとheightプロパティの適用される範囲が、W3Cの定める標準的な仕様とは異なっています。仕様において内容領域の幅や高さを設定するはずのものが、これらの「互換モード」においては内容領域の外側にあるパディングとボーダーを含んだ領域の幅や高さとして設定されます。特にボーダーを太くしたり、パディングを広く取る場合などには、W3Cの仕様に沿った正しい表示を行うブラウザとはまったく異なる表示結果となるので、注意が必要です。「標準モード」では内容領域の幅と高さを示します。

*1 現行のOpera9においては改善されています(2007/01/10)。 DOCTYPE Doctypeスイッチ
互換モード ほぼ標準モード 標準モード

上下に並んだ複数のブロック要素のボックス間においてはマージンの相殺(そうさい)が行われ、隣接するマージンの最大値が相殺後のマージンとして用いられます。正負の値が混在する場合には、正の最大値と負の最小値を足した値がマージンとなります。正の値が存在しない場合には、隣接するマージンの最小値がマージンとして用いられます。 ただし、floatプロパティを指定されたボックス(浮動体)および、positionプロパティによって絶対配置、相対配置されたボックスにおいては、マージンの相殺は行われません。

一般的なブラウザでは、body要素に「8px」程度のマージンが設定され、パディングは「0」に指定されています。しかしながら、Opera6では、逆にマージンが「0」に設定され、パディングがある程度設定されています。そのため、Opera6においてもbody要素のコンテンツをウィンドウの表示領域全体にぴったりと表示させたい場合などには、マージンだけでなくパディングも「0」に指定しておく必要があります。

ブラウザの「互換モード」におけるセンタリングは、一般的にcenter要素、div要素などを用いて行います。 ただし、<center>-</center>、<div align="center">-</div>は、HTMLの文法上非推奨なマーク付けとなります。

ブラウザの「標準モード」におけるセンタリングは、一般的にスタイルシートを用います。ブロック要素内のインライン要素に対してはtext-align:center、ブロック要素に対してはmargin:autoを用いて行います。 IEの「互換モード」では、margin:autoは無視されるのでブラウザの表示モードには十分注意を払ってください。

HTMLの文法上は大間違いになりますが、非推奨なマーク付けが基本的に無視される「標準モード」において、非推奨なマーク付けを禁止するStrictなDTDの宣言を行い、center要素、div要素によるセンタリングをマーク付けした際にも、ie8 ff3 o9 sf4 gc2 N7各ブラウザにおいてセンタリングは行われます。

*1 本来的には、HTMLのバージョンを示す<!DOCTYPE>によって、マークアップ分けすべきです。

CSSでは、クラスセレクタやIDセレクタが非常に大きな力を持っています。したがって文書作成者は、体裁にほとんどなんら関係のない要素、たとえば、HTMLにおいては、div要素やspan要素などをベースとして、それらにclass属性やid属性などでスタイル情報を与えれば、独自の構造化言語を設計することができるものと考えられます。

しかしながら、文書の構造要素は世間一般に広く受け入れられている一般的な意味合いを持ちます。文書作成者は独自の構造化言語の使用を避けなければなりません。文書作成者が定めた構造化言語では、さまざまな場面で、たとえばサーチエンジンや音声ブラウザなどにおいて、全く意味を理解してもらえない可能性があります。

HTML4.01の仕様においては、clear属性はインライン要素であるbr要素のみが有する属性ですが、CSS2の仕様においては、clearプロパティはブロック要素のみに適用されるプロパティであることに注意しなければなりません。
しかしながら実際には、-ie8 ff3 o9 sf4 gc2各ブラウザにおいても、インライン要素であるbr要素にclearプロパティを指定し、回り込みを解除することができます。

既存のブラウザでは、適用要素を絶対配置(position:absolute)された要素とし、ボックスの上辺と左辺を基準とした見える範囲(表示域)を長さを用いて「rect(上,右,下,左)」という矩形で指定します。負の値を指定することもできます。値に「auto」を指定した場合には、その値は「0」となります(*1)。

*1 この仕様はCSS2.1から正式に採用されました。　文字方向が左→右の場合左辺からの長さ、右→左の場合右辺からの長さとなります。また、絶対配置のボックスにもマージンは存在しますが、CSS2.1の仕様書の「clipプロパティ」におけるボックスにマージンは含まれません。

指定方法もCSS2のものとは大きく異なり、それぞれボックスの、上辺から表示域までの空白域、左辺からの表示域、上辺からの表示域、左辺から表示域までの空白域、を指定します。「overflow」の値も関係ありません。

下の2つのルールは、点線で描かれた矩形の表示域を生成します(p要素は「position:absolute」であるものとします)。実線で描かれた矩形はボーダー、パディングを含むボックスを表します(「clipプロパティ」におけるボックスにマージンは含まれません)。

「italic」と「oblique」は、どちらも斜体フォントを指定します。「italic」は、文字がつながるようなデザインを施されてたフォントファミリ中でitalicに分類されたフォントを指定します。該当するフォントが存在しない場合にはobliqueに分類されたフォントを指定します。一般的にitalic、cursive、kursivなどのフォントがitalicに分類されます。

「oblique」は、標準フォントを単に傾けたようなシンプルなデザインが施されているフォントファミリ中でobliqueに分類されたフォントを指定します。一般的にoblique、slanted、inclineなどのフォントがobliqueに分類されます。

フォントファミリ中にitalic、obliquなどのフォントが存在しない場合、通常は標準フォントを数学的に処理して斜体に近い書体に変えて使用します。

リンクのスタイルを指定する際によく利用されるセレクタの例を紹介します。リンクに使用する擬似クラスには決められた順序があります。link、visited、hover、acriveの順です。 リンクに関する疑似クラス

固定レイアウトでは、表の水平方向のレイアウトがセルの内容量に依存しません。その代わり、表全体の幅、列幅、ボーダー、そしてセル間隔の影響を受けます。固定レイアウトは、最初の行(横列)のデータを読み込んだ段階でレイアウトを開始します。このレイアウトを行うためには、表全体の幅「width」が指定されている必要があります。

自動レイアウトは、テーブル全体のデータを読み込んでから最終的なレイアウトを決定します。全体を読み込んでからレイアウトを行うので場合によっては非効率であるといえます。

いかなる場合においても、「border-style:hidden」が最優先され、この値が適用された箇所にはボーダーは表示されません。また、「border-style:hidden」が指定されていない場合は、より太いボーダーが優先されます。幅が同じである場合には、「double」「solid」「dashed」「dotted」「ridge」「outset」「groove」「inset」の順に表示されます。ボーダーの種類も幅も同じで色だけが異なる場合は、「セル」「横列」「横列グループ」「縦列」「縦列グループ」「テーブル」の順に表示されます。

IE6では、独自拡張で以下のようなカーソルを指定することができます。

hand ie4- 手の形になります。主にリンクなどに利用します。 all-scroll ie6- 上下左右にスクロールできることを示します。 col-resize ie6- 左右にリサイズできることを示します。 row-resize ie6- 上下にリサイズできることを示します。 no-drop ie6- ドラッグアイテムがカーソルのポジションに移動できないことを示します。 not-allowed ie6- 処理が実行できないことを示します。 progress C21- ie6- バックグランドで処理が実行されていることを示します。 vertical-text ie6- 縦書きのテキストが選択可能であることを示します。

アウトラインは、フォーカス(:focus)などの疑似クラスやスクリプトと組み合わせて、フォームのボタン、フィールド、リンクなどのオブジェクトを動的に強調して見せたいときに用いるプロパティです。

アウトラインは、ボーダー辺のすぐ外側に描画されるスペースを取らない輪郭線を形成します(*1)。アウトラインは常にボックスの前面に表示され、表示、非表示の切り替えの際にも文書の再表示は行われません(*2)。線幅を有するボーダーと異なり、スペースを取らないアウトラインは、文書整形に影響を与えません。また、矩形からなるボーダーとは異なり、常に四角形であるとは限りません。たとえば、複数行にわたるインライン要素のアウトラインは、その文書全体の輪郭線からなる多角形を形成します。

Netscape6以降では、代わりの外部スタイルシートを複数用意しておいて、ユーザーが任意に選択できるように指定することができます。そのためにはmeta要素のcontent属性、代替のlink要素、推奨のlink要素のtitle属性に同じ名前(識別子)を指定して下記のように記述します。

ユーザーが任意に選択できるスタイルシート

meta要素の指定 代替スタイルシート 推奨スタイルシート 推奨スタイルシートがデフォルトのスタイルシートとなり、代替スタイルシートが選択可能となります。

固定スタイルシート

link要素に通常の指定を行った場合は固定スタイルシートとなります。

IE3.0やNetscape4.xには、line-heightプロパティに関するバグがたくさんあります。たとえば、IE3.0の場合は単位を付けない数値を指定するとピクセル数として認識され、Netscape4.xでは絶対単位を指定していると印刷で問題が発生する場合があります。Netscape4.xでは、line-heightプロパティを指定した範囲に画像が含まれていると、画像に続くテキストが画像の下に表示されてしまうというバグがあります。

* 誤り 2006/08/23に行ったこの考察は根本的に間違っています。正式なサンプルはvertical-alignに在りますので、そちらを参考にして下さい。

vertical-alignプロパティは満足にサポートされておらず、その振る舞いは、参照する親ボックスによって異なるようです(2005/09/21, 2006/08/23 IE6における調査)。

参照する文字(親ボックス)がデフォルトのフォントサイズの場合
参照する文字(親ボックス)がデフォルトのフォントサイズの場合は、baseline, middle, sub, super, text-top, text-bottom, top, bottomのすべてのキーワードが指定値に揃えられます。
参照する文字(親ボックス)のフォントサイズを大きくした場合
参照する文字(親ボックス)のフォントサイズの大きくした場合、middle, super, text-topなどのキーワードによるレンダリング(描画)は期待したものとは異なるようです。
内在数法を持つ置換要素を親ボックスとして参照する場合
同様に内在寸法を持つ置換要素(img、input、textarea、select、object要素)を親ボックスにした場合にも、middle, super, text-topにおけるレンダリング(描画)は期待したものとは異なります。

Windowsのユーザーであれば、「Times New Roman」というフォントの名前を目にしたことがあると思います。このフォントには、元となる1つのフォントしかないわけではなく、太字用にデザインされた「Times New Roman Bold」、イタリック用にデザインされた「Times New Roman Italic」、太字のイタリックとしてデザインされた「Times New Roman Bold Italic」という別々のフォントが用意されています。フォントは、計算によって太くしたり斜めにしたりすることもできますが、あらかじめ専用にデザインされたフォントを用意しておくことで、より美しい表示や印刷が可能になります。

このように、同じ種類でありながら別々のスタイル専用にデザインされたフォントをまとめて「フォントファミリ」と呼んでいます。上記の例では「Times New Roman」がフォントファミリ名ということになります。

font-familyプロパティやfontプロパティでフォントファミリ名を指定する場合は、名前を構成する文字やスペースの全角・半角を間違えずに正確に入力する必要があります。Windowsで一般的なフォントファミリ名の全角・半角を以下に示しますので、参考にしてください。

ＭＳ ゴシック 全角「ＭＳ」+半角スペース+全角「ゴシック」 ＭＳ Ｐゴシック 全角「ＭＳ」+半角スペース+全角「Ｐゴシック」 ＭＳ 明朝 全角「ＭＳ」+半角スペース+全角「明朝」 ＭＳ Ｐ明朝 全角「ＭＳ」+半角スペース+全角「Ｐ明朝」 HG丸ｺﾞｼｯｸM-PRO 半角「HG」+全角「丸」+半角カナ「ｺﾞｼｯｸ」+半角「M-PRO」 MS UI Gothic 半角「MS UI Gothic」

半角スペース[ ]などの空白文字を含むフォントファミリ名を指定する場合は、引用符["][']で囲まなければなりません。

Windows版IE5.5までと6.0以降のブラウザの「互換モード」では、特に何も指定していない標準状態のフォントサイズがCSSの「font-size:small」と一致しているため、CSSのキーワードで「font-size:medium」と指定するとフォントサイズが全体的に1段階大きく表示されます。Windows版Netscape4.xから6.x、Opera6.xのほか、Macintosh版IE4.xでも同様の結果となります。

Windows版IE6、Netscape6(Mozilla, Firefoxを含む)、Opera7などや、Mac版IE5以降のブラウザには、文書型宣言<!DOCTYPE>によって「互換モード」「ほぼ標準モード」「標準モード」といった、3つの表示モードに切り替わる、「Doctypeスイッチ」と呼ばれる機能が存在します。

文書作成者は、どのHTMLのバージョンを指定するかによってブラウザの表示モードが切り替わることに、細心の注意を払う必要があります。

CSSで、URIを示す場合には「url(URI)」という関数を使用します。スタイルシートで示す相対URIは、「url(URI)」の記述がある文書からの相対URIとなります。ブラウザによってはスタイルシートを呼び出したHTML文書からの相対URIとなるバグもあるようなので、注意が必要です。

スタイルシートにおける基準URIは、ソース文書のURIではなく、スタイルシートのURIです。

RGB値で色を指定するためには、「#ff0000」「#f00」「rgb(255,0,0)」「rgb(100%,0%,0%)」という4つの形式がありますが、IE3.0などの古いブラウザを除けば、ほぼすべてのCSS対応ブラウザで4形式とも利用することができます。　 WebSafeColors　 ColorNames

なお、WAIのアクセシビリティ・ガイドライン1.0のCSS技術書では、色を指定する場合には色の名前ではなく数値を使用すること、文字色(colorプロパティ)と背景色(background-colorプロパティ)のコントラストを十分なものにすることが推奨されています。

ブラウザの種類やその設定にもよりますが、フォントサイズの指定に「pt」「px」などの単位を使うと、ユーザー側で文字の大きさを変更することができなくなる場合があります。そのような指定をすることは、ユーザーから「必要に応じて文字の大きさを変更する」機能を奪ってしまうことになります。

フォントサイズを指定する場合には、できるだけ「em」や「%」などの相対的な単位を使って、必要に応じて文字の大きさを変えられるようにしておきましょう。

ワープロなどの文書では、「日　時」「場　所」のように、1つの単語の途中に全角スペースを入れて表示幅を調整することがよくあります。しかし、ホームページで同様の事を行うと、音声ブラウザでは正しく読み上げられなくなる可能性が高くなります。

たとえばIBM社のホームページ・リーダーの場合は、「日　時」は「ひ・とき」、「場　所」は「ば・ところ」のように読み上げられます。単語の途中にスペースを入れると、ページ内のテキストを検索する場合などにも不都合が生じますので、文字の間隔を空けたい場合にはスタイルシートで調整するようにしましょう。

IE6までにおいては、画像などにテキストを回り込ませると、場合によってテキストが消えてしまうというバグが存在します。HTMLのimg要素のalign属性を指定した場合などおよび、スタイルシート(CSS)のfloatプロパティを指定した場合も、同様に発生するので注意が必要です。
反転表示をしたり、ウィンドウの大きさを変えたりすると、文字が出たり消えたりするようです。

HTMLのalign属性による回り込みは、img、object、applet、input type="image"、table、iframe、独自要素においては、embed、spacer type="block"において行われます。