| 
|
css1仕様書を読む手助けとして
ブラウザのサポート・日本語の問題など直ぐにスタイル・シートだけにとはいかないのですが、基本であるブロック構造をSGML・HTMLと引き継ぎ、このブロック構造を書式箱型模型と拡張し、その構成要素を通して様式のバラエティーを実現していくスタイル．シート（様式規則集）は、その意味を今から十分に理解しておくべきものです。
カスケーディン、つまり滝状直列的に規則が支配するという別の意味の大切なことがあります（カスケーディング順位、滝状直列的順位）。
HTMLを正しいブロック構造で書いていると、スタイル・シートは容易に導入できるようになり、移行期としてHTML 4.0 Transitional でHTMLタグ付けと様式規則を併用するやり方をとっていくのが、現段階の日本語環境では実際的な選択と言えるかと思います。
［目次］css1仕様書日本語訳(by OKAHASHI)
css1での書式箱模型（フォーマッティング・モデル）
SGMLマーク付けの基本的なブロック構造です
「やさしいSGML入門」 から
11 SGMLの利用
ハイパーテキストシステムは、文書内や文書間の協調リンクをサポートして、テキスト処理の別のやり方を改善します。また、この様なシステムに要求される基本的なブロック構造もまたSGMLマーク付けの基本的なブロック構造です：個々の文書を識別し一緒に結び付ける（リンクする）能力は、SGMLのことを行う方法の一部として、拘束なく生じます。所有権の存るソフトウェアーを使うことよりもリンクを明確にタグ付けすることによって、ハイパーテキストの開発者は自分たちが作成する資源が有用であり続けることを確信できます。SGML文書をハイパーテキスト・システムに読み込むには、「14章：Linking, Segmentation, and Alignmen」で言及された様に、SGMLタグを正しく解釈できる処理系だけを要求します。
HTMLもブロック構造です。
<UL>
<LI>1st element of list
<LI>2nd element of list
</UL>
+------------------------------+
| <UL> |
| +--------------------------+ |
| | <LI>1st element of list | |
| +--------------------------+ |
| +--------------------------+ |
| | <LI>1st element of list | |
| +--------------------------+ |
| </UL> |
+------------------------------+
スタイル・シートの書式模型（フォーマッティング・モデル）のように、パディング・マージン部分はありません。核になるブロック部分は共通です。パディング・マージン部分を調整できるので、スタイル・シートが様式（スタイル）が豊富になるわけです。
スタイル・シートは、HTMLブロック構造に、スタイル・シート固有のブロック構造を補足追加してより多彩な様式を実現します。「HTMLブロック構造」がしっかり書かれていないと補足追加の足元がなくなります。「スタイル・シート固有のブロック構造」は、書式模型（フォーマッティング・モデル）と言われ、この説明に一章が当てられています。
「HTMLブロック構造」の記載では、閉じタグの省略が許されているものもあります。スタイル・シートを書く際には、「HTMLブロック構造」を明確にしておくために、閉じタグを省略しない方が安全です。
<STYLE TYPE="text/css">
UL {
background: red;
margin: A B C D;
padding: E F G H;
}
LI {
color: white;
background: blue; /* so text is white on blue */
margin: a b c d;
padding: e f g h;
}
</STYLE>
..
<UL>
<LI>1st element of list</LI>
<LI>2nd element of list</LI>
</UL>
_______________________________________________________ | | | A UL margin (transparent) | | _______________________________________________ | | D | | B | | | E UL padding (red) | | | | _______________________________________ | | | | H | | F | | | | | a LI margin (transparent, | | | | | | so red shines through) | | | | | | _______________________________ | | | | | | d | | b | | | | | | | e LI padding (blue) | | | | | | | | | | | | | | | | h 1st element of list f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | max(a, c) | | | <- note the max | | | _______________________________ | | | | | | | | | | | | | | d | e LI padding (blue) | | | | | | | | | | | | | | | | h 2nd element of list f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | c LI margin (transparent, | | | | | | so red shines through) | | | | | |_______________________________________| | | | | | | | | G | | | |_______________________________________________| | | | | C | |_______________________________________________________|
以下の図式は、役に立つ専門用語です：
--------------- <-- top
top margin
---------------
top border
---------------
top padding
+-------------+ <-- inner top
| | | | | | | |
|--left--|--left--|--left--|-- content --|--right--|--right--|--right--|
| margin | border | padding| | padding | border | margin |
| | | | | | | |
+-------------+ <-- inner bottom
^ ^ ^ ^
left left inner edge right inner edge right
outer outer
edge bottom padding edge
---------------
bottom border
---------------
bottom margin
--------------- <-- bottom
------------------ <<<<<-- 先端
先端余白 margin
------------------
先端境界線 border
------------------
先端詰め物 padding
+-------------+ <<<---- 内側先端
| | | | | | | |
|--左側--|--左側--|--左側--|-- 内 容 --|--右側--|--右側--|--右側--|
| 余白 | 境界線 | 詰め物 | | 詰め物 | 境界線 | 余白 |
| | | | | | | |
+-------------+ <<<---- 内側下端
^ ^ ^ ^
^ ^ ^ ^
左外側端 左内側端 右内側端 右外側端
下端詰め物
---------------
下端境界線
---------------
下端余白
--------------- <<<<<-- 下端
次期HTMLやXMLでは、ルビをサポートすべく ［ ルビ］作業候補 がで、この考え方も箱型モデルと同じ範疇でインライン要素にruby要素を導入するも のです。以下は、原著である "http://www.w3.org/TR/WD-ruby/"からの図です。
|
|
|
HTML 3.2では、 <!ELEMENT BODY O O %body.content>> で、ボディ内には%body.contentがきます。 <!ENTITY % body.content "(%heading | %text | %block | ADDRESS)*">
その%body.contentとは、%heading | %text | %block | ADDRESS のことです。つまり、%text も 認められています。
しかし、ボディ内ではブロック−レベル要素しか認めないのがHTML 4.0 Strictで、スタイル・シートでの箱型モデルもブロック−レベル要素をもとにしていますので、 2の記載方法をとることが大切になります。HTML 2.0の記載は、この方向で、スタイル・シートはこの段階から考案されていましたが、ブラウザなどの装備がなく、HTML 4.0になるころから装備もぼつぼつ準備されれスタイル・シートが話題になってきました。WDGの解説［ スタイル・シートの現在！］を参照。
ブロック・レベル要素は、パラグラフ・ブリークといわれる一行空白で、各ブロックを表現する装備になっています。紙媒体、本など、ではパラグラフ間に空白行はきませんので、はじめは馴染めなくてBRでパラグラフを作りたくなります。ここで、スタイル・シートが生きてきます。
ブロック単位が箱型モデルになっていて上に見たような構成になっているので、この構成部分を調整することで、パラグラフ・ブリークがゼロに設定できます。これで、紙媒体と同じ様な様式にパラグラフを表現できるようになります。箱型モデルはブロック構造を元にしているので、スタイル・シートを使わない場合でも、正しくHTMLを記載しておくようにしておかなければなりません。
HTMLの構造をマーク付けする要素に属性としてスタイル（様式）を指定することがありますが、構造のみを指定するという本来のSGMLアプリケーションとしてのHTMLからは外れたことです。キャンバス上での見出しのセンタリングです。CSSの導入によってHTML構造要素に様式を構造と分離して指定できるようにします。HTML要素は本来の構造マーク付けだけをすることになります。CSSは、HTML構造要素をセレクターとして様式指定をします。
CSSを使わないで、見出しをHTML要素で構造化（指定）し様式として配置属性で中央化を使うと（要素＋属性）：
<H1 align="center"> How to Carve Wood </H1>
構造化はHTML要素で様式はCSSを使うと、同じことを次の様にします：
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
H1 { text-align: center}
</STYLE>
<BODY>
<H1> How to Carve Wood </H1>
これはすべてのH1宣言をセンタリングすることに注意して下さい。要素のclass属性を設定することでスタイルの及ぶ範囲を減らすことができます：
<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
H1.wood {text-align: center}
</STYLE>
<BODY>
<H1 class="wood"> How to Carve Wood </H1>
CSS2から：CSS1での説明より分かりやすいので引用します。ここでも、ブロック構造が基本にあることの意味を再確認し、その限界を乗り越えるのに擬似（pseudo：類似した）を導入しています。擬似という言葉にに馴染めないなら、類似−要素・類似−クラスとしてもいい概念です。
5.10 擬似（類似）−要素と擬似（類似）−クラス
普通CSS2での様式は、文書樹構造上の位置に基づいて、要素に添えつけられます。この簡潔なモデルで多くの場合十分ですが、ある種の普通の印刷上のシナリオは、文書樹構造に基づくだけではできないかもしれません。例えばHTML 4.0には、パラグラフの最初の行に照会する要素はなく、従ってそれに照会する単純なCSS選択子もありません。
CSSは、擬似−要素と擬似−クラスを導入し、文書樹構造以外に在る情報に基づいた書式を可能にしています。
Webster's Dictonary:
［要約へ戻る］
HTMLの体裁用要素とスタイル・シート（様式規則）を並記しておくと言う過渡的な方法ですが、ブラウザがカスケード順位を守っていないとこれも意味をなさなくなります。
［アクセス性についての神話］からの引用
- 神話 #1：アクセスしやすいページはHTML 2.0で記載しなければならない
いいえ。制作者はHTML 2.0・HTML 3.0・HTML 3.2・HTML 4.0や拡張機能を使い、なをアクセスしやすさを保ことができます。その鍵は、非サポート・ブラウザで適切に降格（低均化）する機能を使い、よくサポートされていない機能への依存を避けることです。HTMLテーブルのようなケースでは、余分な作業と工夫を必要としますが、HTML 4.0の新機能は後方互換性をわきまえて設計できます。
スタイル・シートは、適切に降格（低均化）する機能の優秀な例です。スタイル・シートの適切な使用によってサイトを有意義に描写し、しかもどんな非サポート・ブラウザでもサイトへのアクセス性を妨げません。
［要約へ戻る］