CSSあってのHTML
にゃんこ師匠ミツオカ頼んだぞ！
ミツオカにゃんこ師匠ミツオカ便利だから？？？
にゃんこ師匠よし、今回はCSSについて話すとするかのお～
HTMLの普及を目指したホーコン・ウィウム・リーが提唱したCSS
HTML（HyperText Markup Language）は、1989年にティム・バーナーズ・リーによって開発されました。
作り出されたばかりの HTML は、単なるテキスト文章でした。
そのため、HTMLを使用したブラウザが求めたのは文字の装飾などのページデザインでした。
そこで、1994年ホーコン・ウィウム・リーが「CSS」を提唱しました。
CSSの誕生
ホーコン・ウィウム・リーはノルウェー生まれで、コンピューターサイエンスの理学士とMITメディアラボで視覚研究の修士号を取得しました。
その後Norwegian Telecom Researchに4年間の勤務し、CERNに勤め始めました。
ホーコン・ウィウム・リーは「HTMLが普及するには、ページのデザインやレイアウトをHTMLとは別の定義で書けるものが必要だ」と考えました。
そこで考え出されたのがCSS（カスケーディングスタイルシート ）です。
CSSの言語はHTMLのコード内にも書けますが、別ファイルに書いてHTMLにリンクされることでも、文字などの装飾やページのレイアウトができます。
更にリンクすることにより複数ページでも統一されたデザインにし、カスタマイズもしやすくなります。
にゃんこ師匠ミツオカにゃんこ師匠Webページでは、body の背景は白にして、コンテンツ部分の背景は茶色するみたいなもんかの
ミツオカブラウザ戦争後に高まるCSSの重要性
CSS level 1
CSSの一番初めのバージョンにあたる CSS level 1 は、1996年12月、W3Cに勧告されました。
W3Cとは、「World Wide Web Consortium」の略で、Web技術の標準化を目的とした団体です。
HTMLやCSSなどのWWW関連の仕様書を公開することにより、互換性を高め、ブラウザごとに表示が変わってしまう問題などを防ぐことを目的にしています。
WWWやHTMLの開発者のティム・バーナーズ・リーが1994年創設し、その翌年からホーコン・ウィウム・リーも関わっています。
「勧告」というのは、W3C（World Wide Web Consortium）がWWWに関する技術について、実装しても問題なくWeb標準に達したレベルであることを認めていることをいいます。
- 文字の色や大きさ
- 背景の色
- ボックスのマージンなど
この頃はブラウザがCSSに対応することは少なく、あまり使用されませんでした。
CSS level 2
それから2年後の1998年5月に、CSS level 2が勧告されました。
- モニターや紙媒体などの表示媒体によってスタイル変更
- 音声ブラウザにも対応
- 文字を表現する要素の拡大
- 疑似クラスや疑似要素
しかし、CSS level 2の仕様書の定義が不明瞭で、ブラウザに表示されないなどの不具合があり、改良されたCSS level 2.1が2011年に勧告されました。
ブラウザ戦争
CSS level 2が勧告された頃は、Internet Explorer とNetscape Navigator とでシェアを争うブラウザ戦争が起きていました。
Netscape Navigator はWWWの初期からあったブラウザで、JavaScriptを早くから取り入れなどして、独自の拡張を行い、シェアを伸ばしていきました。
しかし、Netscape Navigator はCSSには対して互換性が乏しく、きちんと表示されないことも多くなり、次第にシェアは落ち込んでいくようになりました。
Internet Explorerの勝利
一方 Internet Explorer は、Windowsとともに大きく普及していきます。
HTMLやCSSにも対応したブラウザへとバージョンアップしていき、2000年になるとNetscape Navigator を抜き、シェアトップの座につきました。
このブラウザ戦争前は、ブラウザによっては対応しない要素があり、Web作成者を悩ませていましたが、CSSがlevel 2.1に改良され、ブラウザもCSSに対応した改良を行い、CSSはWeb制作で必要不可欠な地位を得ることになりました。
にゃんこ師匠ミツオカにゃんこ師匠やはりきちんとした仕様書があって、それを皆が合わせるようにしないと難しいということじゃな！
モジュールごとのlevelでWeb作成の自由度が増したCSS
CSS level 3
インターネットが普及するとともに、Webページも動的な効果も増えデザイン性も多様化していきました。
CSSに求められる機能も増えていき、それらをまとめて勧告することが困難となりました。
そのような時に生まれたCSS level 3は、CSS level 2を元にして、モジュール（機能）ごとに勧告がされるようにしました。
それぞれのモジュールのlevelが分かり、Web作成者もそれに対応できるブラウザをチェックしてページを作成していきます。
上のようなメニューボタンは、以前ならそれぞれの画像を用意しないといけませんでした。
しかし、CSS level 3 はこのようなボタンも背景色やグラデーション、角丸になるコードを書くことなどで可能となりました。
にゃんこ師匠ミツオカにゃんこ師匠ミツオカにゃんこ師匠増えていくモジュールとノーコードに立ち向かうCSS
現在、CSS level 3が主体となっていますが、モジュールの中には level 4に達していくものもあります。
これからは level 4 に達するモジュールが増えていくことでしょう。
そうなるとそれら全部理解し、使用していくのはかなり大変なことになります。
JavaScriptなど連携する他のプログラムについても更に理解が必要になり、これからのCSSのコーティングはプログラミング知識とデザイン力が試されそうです。
そして近年、Webページをノーコードで作れる「WordPress」や「STUDIO」などが増えていき、Webページ作成にも多様性が出てきました。
テンプレートなど用意され簡単に作れるノーコードのWebページは、制限もあり凝ったページは作れませんが、ツールやユーザーは増えていっています。
だからといってCSSが無くなることはないでしょう。
HTMLとともに成長していったCSSは、Webの世界で深く根付いています。
そして、CSSできる表現の幅はまだまだ広がっていくでしょう。
ホーコン・ウィウム・リーの現在
CERNを経てW3CでCSSに携わってきたホーコン・ウィウム・リーは、今はオペラ・ソフトウェアの CTOに就いています。
彼はOperaのブラウザ開発を通じて今もCSSと繋がりがあります。
500年後のコンピューターでもCSSコードは読めるようになる
とホーコン・ウィウム・リーは語っています。
ミツオカにゃんこ師匠さて、さっきお願いしたWebページを見てみるか…
おい、文字が消えてるな
ミツオカにゃんこ師匠ミツオカここの色を変えれば…よし完了！
にゃんこ師匠文字やボタン、画像が３Dで浮き上がって、ビュンビュン動いておる！
ケーキの画像からは、ケーキの香りが…！！
画面を舐めてみたら、ケーキの味が…！！
プリントしたら本物のケーキが出てきた…！！
ミツオカにゃんこ師匠CSSスゲーーーー！！！
