CSSって何？初心者が最初に学ぶべき基礎知識

CSSとは

CSS（シー・エス・エス）とは、「Cascading Style Sheets（カスケーディング・スタイル・シート）」の頭文字を取った言葉で、ウェブページの見た目や振る舞いを定義するための言語です。HTMLで記述したウェブページを画面に表示する際に、装飾や配置について柔軟に制御できる仕組みが備わっています。

CSSはスタイルシート言語（Style sheet language）の一種です。コンピューターが扱う様々な言語の中の方言だと思って下さい。

元々、スタイルシート（Style Sheet）は、HTMLに限らずSGMLやXMLといったマークアップ文書や、オフィスソフトなどの表示形式を制御するために考案されました。中でもCSSは、インターネットの爆発的な普及によって、最も一般的な形式として利用されるようになりました。そのため、本サイトでは「スタイルシート ＝ CSS」として説明します。

CSSの役割と重要性

かつてCSSが未熟な時代のHTMLは、「文書の構造を整える機能」と「画面に映した時の見た目を装飾する機能」が混在していて、非常に扱いづらい言語でした。その問題を解決するために進化したのがCSSです。

CSSが成熟したことによって、HTMLはドキュメントの構造を定義することに専念できるようになりました。HTMLとCSSの役割分担は、バージョンが上がるごとに洗練されています。これにより、まず第一に制作者の学習コストが下がりました。そして制作者が意図したデザインをウェブページに反映させやすくなりました。さらに一番重要なこととして、ブラウザの実装方針が定まり、不具合が減少した事に加えて実現できる機能が多彩になりました。

CSSは、HTMLから表示方法を切り離して役割分担を明確にしました。その結果、ウェブ制作の合理化に貢献し、なくてはならない存在となったのです。

CSSとブラウザの関係

ウェブページは、ウェブサーバーに公開されたドキュメントファイルを、ウェブブラウザが読み込むことによって表示されるものです。その性質上、CSSはブラウザの読解能力に依存しています。

もしも、ブラウザごとに実装されているCSSの仕様が全く違うものだとしたら、制作者は正しい記述形式が分からずに混乱するばかりか、利用するブラウザごとにウェブページの表示が異なるため、インターネットを利用する全ての人が利便性を損なってしまいます。

そんなことが起こらないように、ブラウザを開発する企業（「ベンダー」と呼ばれます）は、HTMLやCSSの仕様に従ってブラウザの機能を更新しています。しかし、ブラウザの種類やバージョンによっては、制作者の意図した通りに表示されないこともあります。そのため、一般的に普及しているブラウザの市場規模とCSSの実装状況は密接に関わっているのです。

上記のような経緯から、自分の制作したウェブページをインターネット上に公開する時、世の中で利用者の多いブラウザでテスト表示を行い、自分の意図した表示が崩れないか、情報伝達に支障が起きない形になっているかを確認する必要があるのです。

CSSの仕様は誰が決めているのか

CSSは、W3C（World Wide Web Consortium）によって1996年に勧告され、現在に至るまでバージョンアップを重ねています。現在は、2011年以降に勧告されたCSS3がメジャーバージョンになっています。元々W3Cは、HTMLの考案者でもあるティム・バーナーズ＝リーがWorld Wide Webの標準を策定するために創設した団体です。

基本的には、W3Cで協議された内容が正式に勧告されると、それを「ウェブ標準」として各ソフトウェアベンダーがブラウザに実装します。アップデートが完了すると、ユーザーへの配布が始まるため、制作者は自ら作成するドキュメントで新しい仕様のCSSが利用可能とみなされます。しかし、ここに大きな落とし穴がありました。

まず、仕様が勧告されてからブラウザに実装されるまでの時間がベンダーごとに異なること。そして、ブラウザごとに「実装のされ方」が異なる場合があり、制作者が仕様通りに記述しても予想通りに表示されないことがあるということです。そして、最新版のブラウザが配布されても、ユーザーがアップデートしなければバージョンは古いままであり、その利用者に対しては新しい仕様は使えないという問題も起こります。

更に、W3Cの方針や進め方が、ベンダーや制作者のニーズに合わないという声が高まったことによって、WHATWGという新しい団体が作られました。この団体は、Apple、Mozilla、Operaによって創設されましたが、まさに主要なブラウザを作っている企業が自分たちで組合を立ち上げたことになります。

このような歴史的背景から、HTMLはW3CとWHATWGという二つの組織によって別々に標準化が進められました。そして現在、そのねじれた環境から脱却し、有効な仕様は名実ともに「HTML Living Standard」に統一されました。私たち個人のウェブ制作者は、まず安定稼働が確認された現実的な範囲で基礎を固め、それから最新の情報を必要に応じて追っていく必用があります。

現在、HTMLの標準仕様はWHATWGによって勧告されます。一方、CSSの仕様は引き続きW3Cが勧告を行います。

CSSを効率良く勉強する方法

CSSを効率良く勉強する方法の第一は、実際に手を動かして書いてみることです。基礎的な知識は上記で説明した通りです。後は書いて、書くしかありません。

一般的な書き方は、サンプルをコピー＆ペーストして必用な箇所をアレンジしていく方法です。その中から頻繁に使うパターンを見つけて覚えておくと便利です。たまにしか使わないパターンや新しい表現方法は、必要になった時点で検索していけば良いでしょう。最初のうちは、ネット上に書かれた情報が正しいのか間違っているのかを判断することが難しいため、信頼できる書籍を一冊買っておくことをお薦めします。

そして、これが出来れば最も素晴らしい手段なのですが、既にCSSの知識を持っている「先生」を見つけて教えてもらうことです。ウェブデザイナーやフロントエンジニアとして仕事の経験がある人が身近にいるのであれば、あなたの書いたソースコードをレビューしてもらいアドバイスをもらいましょう。そのような人が身近にいない場合は、インターネット上のコミュニティに参加して、コメントをもらうというやり方でも問題ありません。とにかく、書いたコードを人に見てもらえる環境が大事です。