"The mark-up of the CSS specifications"の翻訳

原文
"The mark-up of the CSS specifications" (http://www.w3.org/Style/spec-mark-up.html)
原著作権者
W3C
翻訳者
久保渓
注意
公式版はW3Cに掲載されている英語版であり、日本語版はあくまでW3Cから権威付けられた参考文書にすぎません。この文書には、翻訳上の誤りがあり得ます。翻訳者は翻訳の正確性を保証しません。あくまでご自身の責任でご利用ください。
その他
このサイトに置かれているその他の翻訳物の一覧は、トップページをご覧ください。

CSS仕様のマークアップ

(このページはCSSスタイルシートを使用しています。)

起源

CSS3ソース

CSS2ソース

ソフトウェア

CSSレベル 2の仕様とさまざまなCSSレベル 3のモジュールは、 HTMLを超えた特定のマークアップを持っています。そのマークアップは、適切に スタイルできるように、違った種類の情報(プロパティ名、情報のノート、例など) を許可していますが、とりわけ仕様書を読むためのさまざまな自動ツールを許可 します。それらのツールは、すべてのプロパティのインデックスを作成したり、 機械が読解可能な文法を抽出したり、すべての例をチェックしたりすることが できます。以下のセクションに詳しい説明があります。

マークアップ慣例の起源

CSS2とCSS3のマークアップは同じではありません。CSS3のマークアップは、 数年若くCSS2のほうの改良版になっています。 それは語義がよりコンパクトで 豊富です。

公開されたテキストのCSS内のマークアップは、テキストを書くときに著者が 使用するマークアップとか、これもまた完全には一致しません。後者はドキュメントが 公開される前に自動で拡張される略語を持っています。例えば、著者はほとんど リンクを作成することはありません。その代わりに、彼らは言葉の役割を示す 特別なタグや文字(プロパティ名、技術的な用語、書誌的な参照等)を含め、 それらのそれぞれの単語が自動的にそれらの定義にリンクされます。

少ないタイピングは、より少ないエラーとコンテンツにより多くの時間を 割くということを意味しています。また、リンクを多くの他のマークアップを 追加するのはコンピューターなので、最終的なドキュメントはより一貫性の 高いものとなります。それと同時に、著者が仕事しているドキュメントは、それでも いかなる普通のHTMLツールからでも編集、閲覧することができる完全なHTMLドキュメント です。それはただ、最終的なドキュメントよりもより少ないリンクと少し少ない カラーを持っているだけです。

そのような一貫性のあるドキュメントは、いくつかの優位性を持っています。 例えば、コンテンツのテーブルや、インデックス、プロパティのリストなどは、 すべて自動的に作成されます。また、多くのさまざまな自動チェックはドキュメント が公開される前に自動で実行されます。例えば、テキスト内に出現するプロパティは すべて定義されているのか、すべての文法は完全なものか、すべての例は正当か、 すべての書誌的な参照は定義されているか、などです。

CSS3のソースのマークアップ

著者がCSS3モジュールを書く方法は、いつもドキュメントを一旦公開する方法 ではありません。著者が使用しているマークアップは、ここに含まれていますが、 読者はそれを目にすることはありません。

マークアップにかんする二つの重要な特徴(そしてそれ上で動作するプログラム)は:

プロパティ

プロパティは、シングルクォートに包まれている一つの単語である。例えば、

'font'
'text-indent'

それは、すべて著者が記述しなければならないものである。そのような 引用された言葉は、自動的に プロパティの定義にリンクする<a> 要素に “property”クラスを持った形で包まれます。

<a class=property href="#font0">'font'</a>
<a class=property href="#text-indent">'text-indent'</a>

プロパティ名のすべての出現は、それらが やいくつかのCSSコードに現れた場合を除いて、このようにマークアップ されます。 プロパティの定義もまた引用を得ることはありません。

インラインCSSコードとCSSキーワード

インラインCSSもまた、シングルクォーとか二つのシングルクォーとの組み合わせ に包まれます。例えば、

'color: blue'
''display: none''

著者は、引用符のみをタイプし、テキストは自動的に公開時に、 <span>プロパティが“css”クラスを持った形でラッピング されます。もし引用符が重複している場合、一組は削除されます。

<span class=css>'color: blue'</span>
<span class=css>'display: none'</span>

CSSキーワード(プロパティ名とは別のもの)は、プロパティと区別するために、 著者によって二組のシングルクォーでタイプされなければなりません。

''none''

この公開されたドキュメントの結果は、上と同じようにシングルクォートと <span>を持ったものになります。

<span class=css>'none'</span>

値のタイプ

値のタイプは、カギ括弧と<var>要素で包まれています。例えば、

<var>&lt;integer&gt;</var>
<var>&lt;color&gt;</var>
<var>&lt;percentage&gt;</var>

[そのようなタイプの定義のマークアップは、まだ決定されていません。]

相互参照と定義済み用語

用語の定義された例は、<dfn>要素(つまりはアルファベットの順に インデックスされるということ)に包まれます。

<dfn>dog</dfn>

定義を参照するには、著者はいくつかのインライン要素(<em>, <span> など)に使い方を内包させるだけで、その使用方法は自動的に<a>要素として 定義された例にリンクされます。

もしその使用方法と定義が文字的に同じではない場合、タイトルと属性は まったく一致する用語を与えます。例えば、

<dfn title="dog">dogs</dfn>
<em>dog</em>
<span title="dog">dog</span>

この結果は以下のようになります。

<dfn id=dogs0 title="dog">dogs</dfn>
<em><a href="#gogs0">dog</a></em>
<span title="dog"><a href="#dogs0">dog</a></span>

プロパティの定義

プロパティの定義は、このようなテーブルで構成されています。

名前: 挿入語句
値: [ <長さ> | <パーセンテージ> ]{1,4}
初期値: (個別のプロパティを見てください。)
適用される場所: すべての要素
継承: なし
パーセンテージ: ブロックを含めた幅*
メディア: ビジュアル
計算された値: 個別のプロパティを見てください。
*) もし含んでいるブロックが水平型の場合、 それ以外は高さ。

それらは以下のように作成されます。

<table class=propdef>
  <tr>
    <td>名前:
    <td><dfn>挿入語句</dfn>
  <tr>
    <td>値:
    <td>[ <var>&lt;長さ&gt;</var> | <var>&lt;パーセンテージ&gt;</var>
    ]{1,4}
  <tr>
    <td>初期値:
    <td>(個別のプロパティを見てください。)
  <tr>
    <td>適用される場所:
    <td>すべての要素
  <tr>
    <td>継承:
    <td>なし
  <tr>
    <td>パーセンテージ:
    <td>ブロックを含めた幅*
  <tr>
    <td>メディア:
    <td>ビジュアル
  <tr>
    <td>計算された値:
    <td>個別のプロパティを見てください。
  <tr>
    <td colspan=2 class=footnote>*) もし含んでいるブロックが水平型の場合、
      それ以外は高さ。
</table>

テーブルは“propdef”のクラスを持っており、定義されたプロパティ名 は、<dfn>に包まれます。(しかし、シングルクォーとではありません。) ドキュメントが公開される時には、ID属性が自動的に<dfn>に追加され、 プロパティ名はアルファベット順の目次とプロパティの目次に追加されます。

記述子の定義

記述子(@font-faceルール内部のフォントの特徴)の定義は、似たものです。 それらは、以下のようになります。

名前: x-height
値: <number>
初期値: 定義なし
メディア: ビジュアル

テーブルは、“descdef”のクラスも持ち、以下のようになります。

<table class="descdef">
<tr><td>名前: <td><dfn>x-height</dfn>
<tr><td>値: <td>&lt;number&gt;
<tr><td>初期値: <td>定義なし
<tr><td>メディア: <td>ビジュアル
</table>

書誌的な参照

二つの種類の書誌的な参照があります。一つは規範的なものでもうひとつは 参考的なものです。著者は前者を、

[[!CSS3BOX]]
[[!UNICODE4]]

として記述し、この時“CSS3BOX”と“UNICODE4”は 外部のrefer(1)データベースで定義されているエントリーのラベルとなります。 参考的な参照は同じですが、感嘆符がありません。

[[SELECT]]
[[MEDIAQ]]

公開されたドキュメントでは、そのような参照項目は、以下のように書誌に 対してのリンクに拡張されます。

<a href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a>
<a href="#UNICODE4" rel=biblioentry>[UNICODE4]<!--{{UNICODE4}}--></a>
<a href="#SELECT" rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>
<a href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>

コメントを含むことについての理由は、<a>要素を取り除くことなく最終的 なドキュメントが編集できることと、書誌がダブル四角括弧がなくても再生成すること ができるためです。(理論的には、公開された仕様は変更されることはありませんが、 実務と理論はいつも同じではありません。…)

文献

文献は、書誌的な参照と外部の書誌的なデータベース内のデータから、自動的に 生成されます。その結果は、以下のソース内の二つのコメントの場所に挿入されます。

<!--normative-->
<!--informative-->

前者は規範的な参照のリストであり、後者は参考的な参照のものです。 その公開されたドキュメント内での結果は以下のようになります。

<!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS3LINE>[CSS3LINE]

   <dd>Michel Suignard; Eric A. Meyer. <cite>CSS3 module: line.</cite> 15 May
    2002. W3C Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2002/WD-css3-linebox-20020515">http://www.w3.org/TR/2002/WD-css3-linebox-20020515</a>
    </dd>
   <!---->

   <dt id=CSS3SYN>[CSS3SYN]

   <dd>L. David Baron. <cite>CSS3 module: Syntax.</cite> 13 August 2003. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813">http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

用語のインデックス

単語やフレーズをアルファベット順に配置するもっとも簡単なマークアップは、 <span>を“index”と一緒に用いることです。

<span class=index>containing block</span>

その用語がテキストでの表示の仕方と違った表示の仕方でインデックスに表示 されるときには、タイトル属性がそのインデックスのためのテキストを保持します。

<span class=index title="box">boxes</span>
<span class=index title="inherited value">inherit a value</span>

その用語が二ついつをの違ったエントリーでインデックスされる時には、 タイトル属性は垂直棒で仕切られたさまざまなエントリーを持ちます。

<span class=index title="outer edge|margin edge">outer (margin) edge</span>

その用語が他の一つの用語の補助的なエントリーとして表示される時には、 タイトル属性は感嘆符で仕切られたエントリーと補助エントリーを持ちます。

<span class=index title="edge!!outer">outer edge</span>
<span class=index title="edge!!inner">inner edge</span>

もちろん、補助用語と複数用語は合成することができます。

<span class=index title="edge!!outer|edge!!margin">outer edge</span>

もし出現が用語の例の定義と考えられる場合には、要素<dfn>はspanを 置き換えクラスを取り除きます。

<dfn>padding</dfn>

タイトル属性は、<dfn>要素上に、<span>上とまったく同じように配置 することができます。

すべてのインデックス用語は、自動的にID属性を得ます。

インデックス

インデックス用語から生成されるアルファベット順のインデックスは、 自動的に以下のコメントの場所のドキュメントに挿入されます。

<!--index-->

拡張された結果は以下のようになります。

<!--begin-index-->
<ul class=indexlist>
 <li>anonymous, <a href="#anonymous0"><strong>#</strong></a>
 <li>'writing-mode', <a href="#writing-mode"><strong>#</strong></a>
</ul>
<!--end-index-->

例は、“example”クラスを持つマークアップで、<div>かもしくは <pre>のいずれかです。前者は、例が説明文や画像を持っている場合で、後者は コードだけで構成されている場合です。

<div class=example>
...
</div>

<pre class=example>
...
</pre>

図表

図表は通常見出しを持っています。図表と見出しは<div>内に “figure”と一緒に包まれています。

<div class="figure">
  <p><img src="box.png" alt="Boxes have four sides [schema]">
  <p class=caption>Relation between four…
</div>

ノート

“note”クラスは、規範的なノートを示します。それは典型的に、 <p>、<div>、もしくは <span>で使用されます。

<p class=note>Note that the…

セクション番号

セクション番号は、普通は自動的に追加されます。それらは、“secno” クラスを持つspanに内包され、以下のようになります。

<span class=secno>1. </span>

サブセクションは、1.1., 1.1.1というように番号付けされます。

見出し

CSS3は、たったひとつの<h1>要素を持っていて、それは<title>要素 と同じものです。(可能性的には出版と省略で区別されます。)

コンテンツのテーブル

コンテンツのテーブルは、自動的に生成され、以下のコメントの場所に挿入 されます。

<!--toc-->

その結果は以下のようになります。

<!--begin-toc-->
<ul class=toc>
 <li><a href="#dependencies"><span class=secno>1. </span>Dependencies on
  other modules</a>
 <li><a href="#introduction"><span class=secno>2. </span>Introduction</a>
</ul>
<!--end-toc-->

CSS2のソースのマークアップ

[TODO]

ソフトウェア

CSSワーキンググループは、上記のマークアップを使用された仕様書を、処理、 テスト、もしくは使用するための様々なツールを使用しています。いくつかの ツールはCGIスクリプトのて、またいくつかは、Perlプログラムかsedスクリプトです。 しかし、ほとんどの処理は、 HTML-XMLユーティリティにあるCツールとの様々な合成でなされています。

CSS Valid
CSS!

Bert Bos, W3C スタイルアクティビティリーダー
ウェブマスター
最終更新日: 2009/03/03 12:41:48 $ GMT