仕様表を読んでみよう仕様書をきちんと読めるようになると、本来の実装コードはどうあるべきかがわかります。この記事ではCSSプロパティの仕様を読めるようになることを目指します。仕様書にあるプロパティの仕様表に注目してみましょう。実際にW3Cのサイトに見にいってみたはいいものの、英語がずらっと並んでいて思わずタブを閉じてしまった経験はないでしょうか?この記事が、そんな苦手意識を持つ方が、CSSの仕様書を読み始める手助けになれば幸いです。仕様書を読めるようになると、新しい仕様で何ができるようになるのかをいち早く知ることができます。安定した仕様ではあってもブラウザ間の動作が異なる場合に、正しくはどうあるべきなのかを知ることができ、場合によってはブラウザのベンダーにバグ報告をできたりします。それと、これは気持ちの問題ですが、仕様を読んで身に付けた知識は、我流やサイトをちょっと読みかじったその場しのぎの知識より、自信を持って使えるという点がいちばん大きいと私は思います。仕様書を読んでみようW3Cのドキュメントは「仕様書」でありますので、その利用者にとって間違いが起きないように難しい文章で書かれている箇所も多いです。利用者を意識することは少ないと思いますが、仕様書の「利用者」とは主にブラウザを実装するエンジニアと、私たちのようなフロントエンドのエンジニアです。回りくどい英語は、どちらかというと、ブラウザを実装するエンジニアが誤読をしないように配慮されたものかもしれません。これは日本語訳されたものにも同じことが言えます。本来ならばそういった部分も読んでおきたいところです。CSSを書く人が調べることが多いと思われる、各種CSSプロパティ部分を読んでいきましょう。ユースケースなど」という流れで書かれていることが多いです。仕様表の部分は用語や読み方を知らないと何が書かれているのかわかりません。この表はCSSプロパティの詳細をひとまとめにしたものですので、読めるようになれば仕様を正確に掴むことができます。ここを読めるようしたいところです。仕様表の「Value」の項目はプロパティ値の正しい構文が書かれているので、ぜひ読めるようになりましょう。border-radius他の部分は普通のテキストや図で書かれているものが多いので、もしあるならば、日本語訳と照らし合わせながら読んでもよいでしょう。日本語訳に連絡先が記載されていれば、誤訳などを見付けた場合は報告するとよいでしょう。仕様表の基本フォーマット例としてborder-radiusの仕様表を見てみましょう。プロパティの仕様を見るときはこの表を何度も目にすることになるので、最初に読み方を覚えておくと便利です。border-radius仕様表(大きな画像)それではこの表のそれぞれの項目が何を意味しているのかを見ていきましょう。この仕様を使用するプロパティ名。仕様によっては複数記載されている場合もある。正規の値と、その構文。プロパティ値は、1つ以上の構成要素を持つことができる。この部分の読み方は後述。カスケード処理によってプロパティの値を得られず、かつ継承もされていない場合に使用される。プロパティが適用される要素。プロパティによっては対象が制限されていることがあり、そのような情報が記載されている。プロパティ値が先祖要素から継承されるかどうか。プロパティ値がパーセンテージの場合、どのように解釈されるか。ここにN/Aとある場合は、パーセンテージは利用不可。このプロパティが適用されるメディアグループ。メディアグループとはメディアタイプのグループのこと。算出値は実効値ではないので注意。アニメーション可能かどうか。可能な場合、どのようなアニメーションタイプなのかが記載されている。わかりにくい用語を具体的に説明しておきます。toプロパティによっては対象となる要素が制限されていることがあり、そのような情報が記載されています。marginはtable-caption、table、inline-tableを除く、テーブルディスプレイタイプ以外に適用できます。Mediaメディアグループには、たとえばvisualメディアグループがあります。groups(翻訳)を参照してください*。"screen"となります。おさえるべきポイントは、仕様書に書かれているのは、最終的にブラウザが描画する値である実効値ではないということです。values(翻訳)を参照してください。翻訳)を参照してください。border-radius仕様表を読むそれでは、さきほどのborder-radiusの仕様表を読んでみましょう。calc意味:長さ、パーセンテージ、またはcalc関数の、2つの値としてアニメーション可能であるプロパティ値(Value)の構文は、正規表現に似た書式になっています。この表記を正確に読み取る必要があります。]{1,2}次の節では、この構文を大まかに把握してみましょう。値の構文それでは、プロパティ値の構文を読み解いていきましょう。例としてbox-shadowの構文を見てみます。]*プロパティ値の構文はこのようになっていて、仕様表のすぐあとに<shadow>の構文があります。<shadow>の構文は、次のようになっています。<color>?構文を構成する要素には、大まかにいうと、次のような要素があります。キーワード(例:insetなど)データ型(例:<shadow>など)量指定子(例:?など)配置と結合子(例:{}など)構文を要素に分解し、それぞれの意味がわかれば、正しい仕様を知ることができるというわけです。まとめ今回は、CSSプロパティの仕様書の仕様表に着目して、その意味を解説しました。次回以降は、仕様表の中でも特に重要なValue(値)の構文を読み解けるように、具体的な構成要素とその意味を解説していきます。義則フロントエンド・エンジニアECサイトで商品登録や電話対応などの傍ら、独学でWebコンテンツ制作を学び、学習で得た知見をブログで公開していた。HTML、CSS、ビュー周りのJavaScriptを主に担当。CSSアニメーション・トランジションを使用した印象的な表現を得意とする。8の発表後に国内外で注目された。2017年にピクセルグリッドに入社。特定商取引法に基づく。