仕様書の読み方 CSSプロパティ編 第1回 仕様表を読んでみよう
仕様書をきちんと読めるようになると、本来の実装コードはどうあるべきかがわかります。この記事ではCSSプロパティの仕様を読めるようになることを目指します。まずは、仕様書にあるプロパティの仕様表に注目してみましょう。
仕様書を読めると何がいいのか
W3Cにある、CSSの仕様書を読んだことはありますか？ 実際にW3Cのサイトに見にいってみたはいいものの、英語がずらっと並んでいて思わずタブを閉じてしまった経験はないでしょうか？
この記事が、そんな苦手意識を持つ方が、CSSの仕様書を読み始める手助けになれば幸いです。
仕様書を読めるようになると、新しい仕様で何ができるようになるのかをいち早く知ることができます。また、安定した仕様ではあってもブラウザ間の動作が異なる場合に、正しくはどうあるべきなのかを知ることができ、場合によってはブラウザのベンダーにバグ報告をできたりします。
それと、これは気持ちの問題ですが、仕様を読んで身に付けた知識は、我流やサイトをちょっと読みかじったその場しのぎの知識より、自信を持って使えるという点がいちばん大きいと私は思います。
仕様書を読んでみよう
W3Cのドキュメントは「仕様書」でありますので、その利用者にとって間違いが起きないように難しい文章で書かれている箇所も多いです。
利用者を意識することは少ないと思いますが、仕様書の「利用者」とは主にブラウザを実装するエンジニアと、私たちのようなフロントエンドのエンジニアです。少し回りくどい英語は、どちらかというと、ブラウザを実装するエンジニアが誤読をしないように配慮されたものかもしれません。
これは日本語訳されたものにも同じことが言えます。本来ならばそういった部分も読んでおきたいところです。が、まずはCSSを書く人が調べることが多いと思われる、各種CSSプロパティ部分を読んでいきましょう。
まずは仕様表の攻略を
CSSプロパティの仕様部分は大雑把に言って「仕様表」「プロパティ値詳細」「注意事項やユースケースなど」という流れで書かれていることが多いです。仕様表の部分は用語や読み方を知らないと何が書かれているのかわかりません。ただ、この表はCSSプロパティの詳細をひとまとめにしたものですので、読めるようになれば仕様を正確に掴むことができます。まずはここを読めるようしたいところです。
特に仕様表の「Value」の項目はプロパティ値の正しい構文が書かれているので、ぜひ読めるようになりましょう。
- 仕様表の例（
border-radius）：CSS Backgrounds and Borders Module Level 3 border-radius
他の部分は普通のテキストや図で書かれているものが多いので、もしあるならば、日本語訳と照らし合わせながら読んでもよいでしょう。日本語訳に連絡先が記載されていれば、誤訳などを見付けた場合は報告するとよいでしょう。
仕様表の基本フォーマット
例としてborder-radiusの仕様表を見てみましょう。
プロパティの仕様を見るときはこの表を何度も目にすることになるので、最初に読み方を覚えておくと便利です。
（大きな画像）
それではこの表のそれぞれの項目が何を意味しているのかを見ていきましょう。
| 項目名 | 説明 |
|---|---|
| Name | この仕様を使用するプロパティ名。仕様によっては複数記載されている場合もある。 |
| Value | 正規の値と、その構文。プロパティ値は、1つ以上の構成要素を持つことができる。この部分の読み方は後述。 |
| Initial | プロパティの初期値。カスケード処理によってプロパティの値を得られず、かつ継承もされていない場合に使用される。 |
| Applies to | プロパティが適用される要素。プロパティによっては対象が制限されていることがあり、そのような情報が記載されている。 |
| Inherited | プロパティ値が先祖要素から継承されるかどうか。 |
| Percentages | プロパティ値がパーセンテージの場合、どのように解釈されるか。ここにN/Aとある場合は、パーセンテージは利用不可。 |
| Media | このプロパティが適用されるメディアグループ。メディアグループとはメディアタイプのグループのこと。 |
| Computed value | プロパティの算出値。算出値は実効値ではないので注意。 |
| Animatable | アニメーション可能かどうか。可能な場合、どのようなアニメーションタイプなのかが記載されている。 |
少しわかりにくい用語を具体的に説明しておきます。
Applies to
プロパティによっては対象となる要素が制限されていることがあり、そのような情報が記載されています。たとえばmarginはtable-caption、table、inline-tableを除く、テーブルディスプレイタイプ以外に適用できます。
Media
メディアグループには、たとえばvisualメディアグループがあります。このグループに属するメディアタイプは"handheld" "print" "projection" "screen" "tty" "tv"です。詳しくは CSS 2.2 - 7 Media types - 7.3.1 Media groups（翻訳）を参照してください*。
*補足：visualメディアグループ
Media Queries Level 4（翻訳）においては、メディアタイプに変更がありますが、CSS2の例に当てはめるとvisualメディアグループは"print" "screen"となります。
Computed value
ブラウザで扱う値は、4種類（指定値、算出値、使用値、実効値）あります。おさえるべきポイントは、仕様書に書かれているのは、最終的にブラウザが描画する値である実効値ではないということです。
詳しくはCSS 2.2 - 6 Assigning property values, Cascading, and Inheritance - 6.1 Specified, computed, and actual values（翻訳）を参照してください。
Animatable
アニメーションが可能な場合のアニメーションタイプの一覧は CSS Transitions - 7. Animatable properties（ED）(ED 翻訳)を参照してください。
border-radius仕様表を読む
それでは、さきほどのborder-radiusの仕様表を読んでみましょう。
（大きな画像）
Name（プロパティ名）
記述：border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
意味：このプロパティ名はborder-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
Value（値）
記述：[ <length> | <percentage> ]{1,2}
意味：値は1つ以上2つ以内の<length>または<percentage>である
Initial（初期値）
記述：0
意味：プロパティの初期値は0
Applies to（適用される要素）
記述：all elements (but see prose)
意味：すべての要素に適用できる（ただし、後述のテキストを参照すること）
Inherited（継承）
記述：no
意味：継承はされない
Percentage（パーセンテージ）
記述：Refer to corresponding dimension of the border box.
意味：パーセンテージは対応するボーダーボックスの寸法を参照する
Media（メディア）
記述：visual
意味：適用されるのは視覚メディアグループ
Computed value（算出値）
記述：two absolute <length> or percentages
意味：算出値は2つの絶対値<length>またはパーセンテージである
Animatable（アニメーション）
記述：as two values of length, percentage, or calc
意味：長さ、パーセンテージ、またはcalc関数の、2つの値としてアニメーション可能である
プロパティ値（Value）の構文は、正規表現に似た書式になっています。この表記を正確に読み取る必要があります。
[ <length> | <percentage> ]{1,2}次の節では、この構文を大まかに把握してみましょう。
値の構文
それでは、プロパティ値の構文を読み解いていきましょう。
まず、例としてbox-shadowの構文を見てみます。
box-shadow: none | <shadow> [ , <shadow> ]*プロパティ値の構文はこのようになっていて、仕様表のすぐあとに<shadow>の構文があります。<shadow>の構文は、次のようになっています。
<shadow> = inset? && <length>{2,4} && <color>?構文を構成する要素には、大まかにいうと、次のような要素があります。
- キーワード（例：
insetなど） - データ型（例：
<shadow>など） - 量指定子（例：
?など） - 配置と結合子（例：
{}など）
構文を要素に分解し、それぞれの意味がわかれば、正しい仕様を知ることができるというわけです。
まとめ
今回は、CSSプロパティの仕様書の仕様表に着目して、その意味を解説しました。次回以降は、仕様表の中でも特に重要なValue（値）の構文を読み解けるように、具体的な構成要素とその意味を解説していきます。