ウェブランサー

CSSって何?初心者にも分かるスタイルシート入門〈基礎知識〉を解説します

CSSとは、「Cascading Style Sheets(カスケーディング・スタイル・シート)」の頭文字を取った言葉で、ウェブページのスタイル(見た目や振る舞い)を定義するための言語です。HTMLで記述したウェブページを画面に表示する際に、装飾や表示方法について柔軟に制御することができるように作られました。

スタイルシート(Style Sheet)は、HTMLやXMLといったウェブドキュメントのマークアップに対して、その表示形式を制御するために定義された言語です。その中でも、CSSはスタイルシートの中で最も一般的に知られている形式です。このサイトでは「スタイルシート = CSS」として説明します。

CSSの役割と重要性

かつてHTMLは、「ドキュメントの構造を作る役割」と「ウェブページとしての見た目を装飾する役割」が混在していて非常に扱いづらい言語でした。この問題を解決するために進化したのがCSSです。

CSSが作られたことによって、HTMLは徐々にドキュメントの構造を定義することに専念できるようになりました。HTMLとCSSの役割分担は、バージョンが上がるごとに洗練されてきています。CSSは、ウェブページ用に作られたドキュメントが、画面に表示される際に、どの要素に、どんな装飾を施し、どのように表示させるかを指定することができます。

制作者は、CSSに表示方法を集約することによって、合理的にドキュメントを管理できるようになったのです。

CSSのブラウザ依存性

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

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

そのよなことが起こらないように、ブラウザを開発する企業(「ベンダー」と呼ばれます)は、HTMLやCSSの仕様を策定する基準に従ってブラウザの開発を行っています。しかし、一部のブラウザでは独自仕様で特殊な実装が施されるため、しばしばバグの原因や制作者の間の議論の種になっているのが実情です。

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

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

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

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

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

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

このような歴史的背景から、現在ではW3CとWHATWGという二つの組織によって別々に標準化が進んでいます。そのため、私たち個人のウェブ制作者は、時に混乱する事態に遭遇することがあるかも知れませんが、無理して最新の仕様を追うことをせず、安定稼働が確認された範囲で基礎を固めていくことを目指しましょう。

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

CSSを効率良く勉強する方法の第一は、基礎的な知識をしっかり押さえて、とにかく書いてみることです。その次に、頻繁に使う記述パターンを見つけて覚えておくことです。たまにしか使わないパターンや、新しい記述方法は、必要になった時にその都度検索して覚えていけば良いでしょう。初心者のうちは、インターネット上に書かれた情報が正しいのか間違っているのかを判断することができないので、信頼できる書籍を一冊買っておくことをお薦めします。

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

CSSリファレンス

CSSって何? 初めての方はこちらからお読み下さい
CSSの書き方 CSSの書き方について基本的な解説です
CSSの特徴 CSSの特徴を理解して有効に活用しましょう
CSSで使えるセレクタ セレクタとはスタイルを適用する対象を指定するものです
CSSで使える単位 CSSで使える単位の一覧です
ブロックレベルとインライン ブロックレベル要素とインライン要素について詳しく解説
idとclassについて 要素にidとclassで名前を付ける
余白と外枠の関係 余白や外枠を指定する際のコツについて
DOCTYPE宣言・DOCTYPEスイッチ [!DOCTYPE]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます