CSS とは何か

前述のように、CSS は文書を（スタイルやレイアウトを）どのように表現するか指定する言語です。

文書 は普通、マークアップ言語を使って構造化されたテキストファイルです。HTML がもっとも一般的な マークアップ言語ですが、SVG や XMLも出会うことがあります。

文書を 表現する とは、それを使いやすいフォームに変換することを意味します。Firefox、Chrome、Edge といったブラウザー はコンピューター画面やプロジェクター、あるいはプリンタで印刷される文書が視覚的に表現されるよう設計されています。

CSS は、例えば見出しやリンクの 色 や フォントサイズの変更といったごく基本的なテキストのスタイル付けにも使えます。例えば、1 段のテキストをレイアウトしてメインコンテンツ領域と関連情報のためのサイドバーに分けるといったレイアウト作成に使うこともできます。アニメーションのような効果も使えます。それぞれの例はこの段落のリンクをご覧ください。

CSS はルールベースの言語です。ウェブページの特定の要素や要素のグループに適用するスタイルのグループを指定することで、ルールを定義します。

例えば、ページの主な見出しを大きな赤い文字で表示するようにすることができます。次のコードは、上記の記述されているスタイル設定を実現する、とても単純な CSS ルールを示しています。

h1 {
  color: red;
  font-size: 5em;
}

• 上の例では、CSS ルールはセレクターで始まるようになっています。これは、スタイルを設定する HTML 要素を選択するものです。この例では、レベル 1 の見出し (h1) にスタイルを設定しています。
• 次に、一組の中括弧 { } があります。
• 中括弧の中には、1つ以上の 宣言 が入ります。これは、プロパティ と 値 の組という形を採ります。コロンの前にプロパティ（上の例では color）を指定し、コロンの後にプロパティの値（この例では red）を指定します。
• この例では、color と font-size の 2 つの宣言を保持しています。それぞれの組は、選択した要素（この例では h1）のプロパティを指定し、次にそのプロパティに与えたい値を指定しています。

CSS のプロパティは、指定されたプロパティによって様々な許容値を持ちます。例えば、color プロパティは様々な色の値を持っています。font-size プロパティもあります。このプロパティは値として様々な大きさの単位 を持っています。

CSS スタイルシートには、このようなルールがたくさん記述され、それらが次々と書かれていきます。

h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}

値によってはすぐに覚えられますが、他にも見なければならない値があることに気がつくと思います。MDN で個々のプロパティのページを見れば、忘れたとき、あるいは値として使用できる他のものを知りたいときに、プロパティとその値をすばやく調べることができます。

CSS を使用してスタイル設定できることは非常に多いので、この言語は モジュール に分割されています。MDN を見ていると、これらのモジュールが参照されているのがわかるでしょう。私たちのドキュメントページの多くは、特定のモジュールを中心に構成されています。例えば、背景と境界モジュールを MDN で参照すると、その目的や含まれているプロパティと機能を探すことができます。そのモジュールの中には、その技術を定義している 仕様書 へのリンクもあります（下記の節も参照してください）。

この段階では、CSS がどのような構造になっているかはあまり気にする必要はありません。しかし、例えば、あるプロパティが他の似たようなものの中に得られる可能性が高く、したがって、おそらく同じ仕様の中にあると認識していれば、情報を見つけやすくなることがあります。

たとえば、背景と境界モジュールに戻ってみましょう。background-color と border-color プロパティがこのモジュール内で定義されているのは理にかなっていると思うかもしれませんし、実際そうなっています。

（HTML、CSS、JavaScript といった）ウェブの標準技術はすべて、仕様書（または単に「仕様」）と呼ばれる文書で定義されており、（W3C、WHATWG、ECMA、Khronos といった）標準化団体によって発行され、技術がどう働くよう期待されているかを定義しています。

CSS も例外ではありません。CSS は W3C 内の CSS 作業グループと呼ばれるグループにより開発されました。このグループは、CSS に関心のあるブラウザーベンダーやその他の企業の代表者で構成されています。またメンバー組織とつながらず、独立した声として行動する invited experts もいます。

新しい CSS の機能は、CSS 作業グループにより開発され、仕様化されています。 特定のブラウザーが実験的に機能を実装させることもありますし、ウェブデザイナーや開発者が要望することもありますし、作業グループ自体が要件を固めることもあります。CSS は絶えず開発されており、新しい機能が利用可能になります。しかし重要なのは、古いウェブサイトが決して壊れてしまわないように、全員が努力していることです。2000 年に作られたウェブサイトは限られた CSS 機能しか使えませんが、最新のブラウザーでも見えるようになっているべきなのです。

CSS の初心者としては、CSS 仕様書が圧倒的であることに気付くでしょう。これらは、ウェブ開発者が CSS を理解するために読むのではなく、エンジニアがユーザーエージェント機能の対応を実装するために使用することを想定しています。経験豊富な開発者の多くは、MDN ドキュメントや他のチュートリアルを参照します。ただし、それらが存在することを知り、使っている CSS やブラウザーによる対応（以下を参照）、および仕様間の関係を理解することは価値があります。

CSS の機能が制定された後、1 つ以上のブラウザーがその機能を実装して初めて、ウェブページを開発する上で有益なものとなります。これは、CSS ファイルに記述された命令を画面に出力するためのコードが書かれていることを意味します。この作業については、CSS はどう働くか のレッスンで詳しく見ていきます。すべてのブラウザーが同時に機能を実装することは珍しいので、 CSS のある部分はあるブラウザーで使用でき、他のブラウザーでは使用できないというギャップがあるのが普通です。このため、実装状況を調べることができるのは有益なことです。

ブラウザーの対応状況は、MDN の各 CSS プロパティページにある「ブラウザーの互換性」という表に記載されています。その表の情報を参考に、あなたのウェブサイトでそのプロパティが使用できるかどうか調べてください。例として、CSS の font-family プロパティのブラウザー互換性一覧表を参照してください。

必要に応じて、ブラウザー互換性表を使って、このプロパティが様々なブラウザーでどのように対応しているかを調べたり、特定のブラウザーとそのバージョンがこのプロパティに対応しているか、あるいは、使用しているブラウザーとバージョンについて注意すべき点があるかどうかを調べたりすることができます。

この記事の最後までたどり着きました。これで CSS とは何かということがある程度理解できたと思いますので、次は自分で CSS を書き始めるための CSS 入門に移動しましょう。

• Overview: CSS の第一歩
• 次のページ