CSSの超入門編です。初心者にも分かりやすく、専門用語を使わずに解説します。
CSSは、HTML, JavaScriptと並んで、Webサイト作成にはなくてはならない技術です。
これを読めば、CSSの役割、CSS3の『3』の意味も分かります。
『いまさら見直すのは恥ずかしい』という人にもオススメです。
今回は、CSSの書き方とか具体的な手法は一切ありません。ただただ『CSSってなにもの？』だけの話です。
役に立つというより雑学です。でも、ウェブサイトの技術の中でのCSSの役割がはっきりと分かりますので、最後までお付き合いください。
HTML, CSS, JavaScriptの立ち位置
最初に『CSSとは？』から入ると、一部分の話になるのでよくありません。ここはあえて、Webの全体像から始めます。
HTML, CSS, JavaScriptは、Webサイト作成では
フロントサイド
フロントエンド
と言われます。
Webサイトは、見る側（ブラウザ）と見せる側（Webサーバー）が情報をやり取りすることでページが表示されます。
フロントエンドは見る側、ブラウザの技術です。
ボタンやチェックボックスを表示（HTML）
文字を大きくしたり色を変える（CSS）
コンテンツをマウスで動かす（JavaScript）
などできますよね？
これらは全部、ブラウザが処理をしてユーザーに見せています。
（カッコ内は何が仕事をしているか）
ブラウザは優秀です。HTML, CSS, JavaScriptの3つの仕事をこなしているんだから。
CSSの機能、HTML, JavaScriptとの関係
ブラウザからリクエストを受けて、Webサーバーから送られるデータはすべて文書（文字列）で、それがHTMLです。
（画像や動画などは、文書内のurlから別リクエストで取得。）
HTMLはブラウザとWebサーバーの間でやりとりするファイルのフォーマットです。
HTMLをそのまま表示すると、分からない人には意味不明なものが表示されるだけです。
HTMLの内容は、ブラウザを右クリックして、『ソースコードを表示』で見ることができます。
HTMLは『家の土台と骨組み』です。キッチン、収納、トイレなど決められたところに配置しますがそれだけです。
HTMLはコンポーネントの種類と配置を決める。
文字、ボタン、テキストボックスなどHTMLに配置するものを『コンポーネント』という。
一方、家の見た目を良くするのがCSSです。
CSS（Cascading Style Sheets）は、コンポーネントのサイズ・色・形などの装飾を担当。
HTMLだけだとこんな感じになります。
タイトルサンプル
本文サンプル
本文サンプル
本文サンプル
これにCSSを足すとこんな感じになります。
タイトルサンプル
本文サンプル
本文サンプル
本文サンプル
全然見た目が変わりますね？
ブラウザは文書を表示するアプリ
ブラウザは、構造化された保存文書（HTML）を読みやすく整形して表示するツールとして生まれました。
CSSは、そのときはまだ単独のものではなく、HTMLの一部分のスタイル定義です。
（いまでもstyle属性として残っている。）
CSSはHTMLの定義のひとつから独立したもの
そのあと、画像を表示するなど『新聞・雑誌みたいに表現したい』という流れができてリッチな装飾が必要になります。
このとき
という声が強かったため、style属性を独立させてCSSが開発されました。
JavaScriptはプログラミング言語
家だけ立派にしても豊かな生活はできません。家具・家電など生活の『動き』を用意する必要があります。それがJavaScriptです。
JavaScriptはコンポーネントに動きをつけて、リッチなWebサイトに仕上げます。
- クリックしたら色を変える
- ドラッグ&ドロップでコンポーネントを動かす
など多彩です。最近はWebアプリと言って、Webサイトをアプリケーションとして使うことができます。Webアプリのタッチ（マウス）操作の中核がJavaScriptです。
HTML, CSS, JavaScriptのなかで、JavaScriptだけはプログラミング言語です。
JavaScriptを書くのはプログラミングですが、HTML, CSSは文書を書くだけなのでプログラミングではありません。
（HTML, CSSの作成はWordで文書を書くのと同じ。）
CSSはレベルが上がるにつれて、JavaScriptが担当していた動的な制御を行えるようになっています。
また、HTMLで配置したコンポーネントの位置を変えることもできます。
CSSはバージョン管理じゃない
CSSは、HTML, JavaScriptとちがって、バージョンで管理されていません。CSS3の『3』は、バージョン番号ではなく『レベル』です。
CSSはW3C が仕様の策定・勧告を行なっています。
W3C（ダブリュー・サン・シー）
HTML, CSSの標準化団体。仕様の策定から勧告まで行う。HTML5からは策定は行わず勧告だけを行うようになった。
| 策定 | どのような機能を追加・変更・削除するのか決めること。 |
| 勧告 | 決まった仕様の対応を開発元に促すこと。 |
2019年にHTMLの仕様策定から撤退し、長年対立してきたWHATWGへ移管。
じつはHTML5の仕様策定はWHATWGが行っており、それをW3Cが追認して勧告した。
この時点でHTML5は終わっている。
後継のHTML標準仕様のことを HTML Living Standard という。
CSS3から仕様の策定・勧告の方法が変わる
2018/09の現在、CSSレベルは3で仕様の策定・勧告が定期的に行われています。
ちまたに『CSS3』がよく出てくるのは、CSS3が最高スペックだから話題になるのでしょう。
CSS3は策定・勧告の方法が変わったことでも話題になりました。
CSS3より前は、レベルごとに仕様を決めて策定・勧告されました。しかし、CSS3からは、モジュール（機能）ごとに策定・勧告されるようになります。
CSS3は、CSS2.1をベースにそれぞれのモジュールが独立して策定・勧告が行なわれているので、CSS3という仕様はありません。CSS3はそれぞれのモジュールの策定・勧告の総称です。
いま、CSS4の策定が始まっていますが、CSS3と同じ方法をとっているので、『CSS4で何が変わるのか分からない』と言われています。
CSS3はレスポンシブデザインの中核
いまのWebサイトは、スマホやタブレットなどいろいろなデバイスに対応することが絶対になっています。
レスポンシブWebデザイン（RWD）
レスポンシブデザイン
レスポンシブ
と言います。
CSSは、レスポンシブデザインの実現の大部分を担当しています。専門性・重要性が高まっているのはそのためです。
CSS3でメディアクエリーという機能が追加されました。これは、デバイスのサイズごとに定義することができる機能です。
レスポンシブデザインが必要になって、『CSS3』という言葉がよく聞かれるようになったのはそのためです。
まとめ
CSSは、Webサイトの中核の技術です。レスポンシブデザインによってますます専門性・重要性が高まっています。
Webデザインに関わる人は習得しなければならないものの1つでしょう。
Webデザイナーを目指す人は必ず習得しなければなりません。
あと、セットでHTMLも覚えたほうが良いです。JavaScriptもあるのですが、これは、がっつりプログラミングになるので、余裕があればチャレンジしても良いでしょう。
『コーダーがいるからデザイナーは書けなくてもいい』という声を聞きます。これは間違いです。
どの世界に自分の表現を形にする方法を一度も習得せずに、他人に丸投げして正当化する人がいるのでしょうか？
- 料理長は作れないではなく『作らない』
- 漫画家は書けないではなく『書かない』
三ツ星シェフや大先生クラスでもない人が、誰かに仕事を丸投げするほど『何様ですか？』という話です。
というか、HTML, CSSは文書作成なので、パソコンが使えなくて女性社員に丸投げしていたかつてのオッサンと同じです。
