CSSは、HTMLで作られた文書にデザインを施し、見栄えを整える役割を担っています。
HTMLの記事でも頻繁に登場しましたが、今回は、改めてCSSとは何かについてまとめたいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
CSSは、Cascading Style Sheets（カスケーディングスタイルシート）の略です。
このカスケーディング（カスケード処理）とは、複数の指定がある場合に、予め決められた優先度のルールによって、優先度が一番高い指定だけ有効になる仕組みのことです。
CSSは、このカスケード処理という仕組みを使ったスタイルシートで、優先度が高いスタイルが、抵触するスタイルを上書きするスタイルシートです。
スタイルシートを使って作られたWebサイトは、ブラウザに表示されて、ユーザの目に届きます。
そして、ブラウザは、スタイルシートを解釈して表示を行います。
スタイルシートには、HTML文書に直接書かれたものもありますし、外部ファイルとしてHTMLから独立したものもありますし、各ブラウザでデフォルト設定されたものもあります。
このような複雑な状況の中で、作り手が反映させて欲しいスタイルシートを、ブラウザが間違いなく把握できる方法として、カスケード処理を行うスタイルシート（CSS）が広く使われています。
このように、CSSのカスケード処理は、優先順位決定の仕組みであることを理解しておくと、CSSが意図通りに反映されない場合に、他に優先度が高いCSSがないかチェックすることができます。CSSの指定の場面ではよく生じる問題なので、この気付きはとても大切です。
CSSは、<p style = ”color:red;”>こんにちは</p>（p要素内のテキスト(=こんにちは)を赤文字にするCSS）のように、htmlタグに埋め込む書き方もありますが、通常は、次のような書き方をします。
body{
color:#00F;
font-size: 15px;
line-height:1.6em;}
上記のように指定すると、body要素内にあるすべてのテキストについて、文字の色は青（#00F）、文字のサイズは15px、行の高さは文字の高さの1.6倍となります。
さらに、このCSSを、Webサイトの全HTMLファイルで読み込ませると、Webサイト全体のテキストを、このスタイルで統一することができます。
そして、body内の特定の部品（見出しなど）のスタイルを変えたい場合は、該当する要素に対してCSSを追加すればOKです。その場合も、目的の要素を同じスタイルで統一することができます。
h1{
color:#F00;
font-size:120%}
先のCSSに上記の指定を追加すると、見出し（h1）の文字色が赤（#F00）、文字のサイズがbody要素内の他の文字サイズの120％（15pxの120％で18px）となります。
このように、CSSは、短いセンテンスと記号で、スタイルを細かく指定していくことができます。
HTMLだけでCSSの指定をしてなくても、文字の太さや大きさ、段落の間隔など、ブラウザでそれなりに見やすく表示されたりします。
これは、どのブラウザも各々デフォルトのCSSを持っているからです。
ブラウザのデフォルトスタイルは、優先度が一番低いため、新たにCSSの指定をすると、そのCSSがブラウザのデフォルトのCSSを自動的に上書きします。
（優先度のルールについては、別記事でまとめたいと思います。）
これまで普通に使ってきましたが、スタイルシートとは、もともと編集やDTP業界で使われていた言葉で、かなりの歴史があります。
新聞や雑誌などの印刷物の誌面をレイアウトするときに使う用語です。
文字の太さ、大きさ、罫の色や太さやサイズ、マージンの幅などの情報（=スタイル）を、スタイルシートに保存して、各エレメントに適用します。
身近なものでは、Microsoft OfficeのWord、Adobe Illustratorなどでスタイルシートを使った経験があるのではないでしょうか。
このように、スタイルシートとは、Webの世界のものではなく、文書の表示形式を制御するしくみのようなものです。
ただ、Webの世界では、スタイルシートと言えばCSSというイメージがあるかと思います。
WebサイトのCSSも、印刷物のスタイルシートと同じように、ページのタイトルや見出し、本文の段落、画像などのスタイルを指定します。
Webの場合、このタイトルや見出し、本文の段落、画像などは、全部HTML要素です（見出し：<h1> ～ <h6>、段落：<p>、画像：<img>）。
それらHTML要素のスタイルを指定するのがCSSの役割です。
Webページを作る場合には、文書そのものはHTML、スタイルはCSS、というように、役割分担をするというルールがあります。
このルールを決めたのが、W3C（World Wide Web Consortium）という非営利団体です。
W3Cは、WWW ( World Wide Web ) で利用される技術の標準化を促進する団体で、HTMLやCSS、APIなどのさまざまな仕様を考えて、決定（定義）し、発表（勧告）しています。
Webサイトが登場してしばらくの間は、ほとんどのサイトがHTMLだけで作られていてCSSを使うことは、あまり一般的ではありませんでした。
当時は、CSSをサポートしているブラウザと、そうでないブラウザがあったからです。
各ブラウザはシェアを獲得するために、独自にHTMLタグを作ったりしていました。
そして、HTML文書は、サイトのデザイン情報を大量に書き込むため、長くて複雑でした。しかしながら、ブラウザによっては見れないページがあったりして、とても不安定な状態でした。
そこで、1996年にW3Cが「 CSS1.0 」をまとめて、デザイン情報はCSSで定義するように勧告したのでした。
それ以降、各ブラウザはW3C準拠で開発を進めたので、どのブラウザでもCSSを設定通りに表示できるようになりました。
ブラウザがW3C準拠の仕様になっているので、W3C準拠の仕様でサイトを作れば、どのブラウザでもこちらの思い通りの表示で見てもらえます。
そして、そのW3Cが「 HTMLは文書構造のみを、CSSでレイアウトを 」と提唱してるので、その通りに作るのが一般的となりました。
W3Cが提唱している通りに、HTMLでは文書構造だけを書いて、見た目の情報はCSSに書けば、ビジターみんながそれぞれちゃんと、そのサイトが伝えたい情報をゲットできます。
例えば、古いブラウザで見てる人や、CSSを無効にして見てる人、音声読み上げブラウザを使ってる人など、とにかくサイトに来てくれる人に、みんな誰にでも同じようにサイトの情報を伝えることができます。
この「 誰でも同じようにゲットできる 」ようにするのが、アクセシビリティという考え方です。
W3C準拠の作り方をしていれば、アクセシビリティが確保できます。
※アクセシビリティ(accessibility) とは、「アクセスのしやすさ」という意味です。
交通のアクセスだけでなく、物に対しての近付きやすさというのが本来の意味です。
Webの場合は、閲覧環境などへの対応のしやすさも意味します。
INTERNOUS,inc. All rights reserved.
