1. HOME
  2. ブログ
  3. ITエンタメ
  4. ホーコン・ウィウム・リーが提唱したCSSの過去と未来
ホーコン・ウィウム・リーが提唱したCSSの過去と未来

ホーコン・ウィウム・リーが提唱したCSSの過去と未来

CSSあってのHTML

にゃんこ師匠にゃんこ師匠
よし、これであとはデザインを修正するだけじゃ
ミツオカ頼んだぞ!
ミツオカミツオカ
はい、これなら CSS を変えるだけですぐできます~!
にゃんこ師匠にゃんこ師匠
そういえば、CSS がなぜ誕生したか知ってるか??
ミツオカミツオカ
そういえばなんでだろう…?
便利だから???
にゃんこ師匠にゃんこ師匠
ふむ、CSSの役割は大きいな。
よし、今回はCSSについて話すとするかのお~

HTMLの普及を目指したホーコン・ウィウム・リーが提唱したCSS

HTMLの普及を目指したホーコン・ウィウム・リーが提唱したCSS

HTML(HyperText Markup Language)は、1989年にティム・バーナーズ・リーによって開発されました。

作り出されたばかりの HTML は、単なるテキスト文章でした。

そのため、HTMLを使用したブラウザが求めたのは文字の装飾などのページデザインでした。

そこで、1994年ホーコン・ウィウム・リーが「CSS」を提唱しました。

CSSの誕生

ホーコン・ウィウム・リーはノルウェー生まれで、コンピューターサイエンスの理学士とMTTメディアラボで視覚研究の修士号を取得し、Norwegian Telecom Research4年間の勤務した後に、CERNに勤めはじめました。

ホーコン・ウィウム・リーは「HTMLが普及するには、ページのデザインやレイアウトをHTMLとは別の定義で書けるものが必要だ」と考えました。

そこで考え出されたのがCSS(カスケーディングスタイルシート )です。

CSSの言語はHTMLのコードにも書けますが、別ファイルに書き、それをHTMLにリンクされることで、文字などの装飾やページのレイアウトを可能にし、複数ページでも統一されたデザインにし、カスタマイズもしやすくなります。

にゃんこ師匠にゃんこ師匠
Webページを家に例えれば、HTMLは間取り、CSSは内装というところじゃな!
ミツオカミツオカ
リビングの壁は白にして、茶色のフローリングにして欲しいという感じで変えていけるわけですね
にゃんこ師匠にゃんこ師匠
そうじゃな
Webページでは、body の背景は白にして、コンテンツ部分の背景は茶色するみたいなもんかの
ミツオカミツオカ
オシャレな部屋にも、可愛い部屋にも、CSSを変えるだけで自由自在にできちゃいますね!

ブラウザ戦争後に高まるCSSの重要性

ブラウザ戦争後に高まるCSSの重要性

CSS level 1

CSSの一番初めのバージョンにあたる CSS level 1 は、1996年12月、W3Cに勧告されました。

W3Cとは、「World Wide Web Consortium」の略で、Web技術の標準化を目的とした団体です。

HTMLやCSSなどのWWW関連の仕様書を公開することにより、互換性を高め、ブラウザごとに表示が変わってしまう問題などを防ぐことを目的にしています。

WWWやHTMLの開発者のティム・バーナーズ・リーが1998年創設し、その翌年からホーコン・ウィウム・リーも関わっています。

「勧告」というのは、W3C(World Wide Web Consortium)が仕様についてワーキンググループが起草し、実装しても問題なく、Web標準に値するとディレクターに判断され、公開されるレベルに達したことを言います。

  1. 文字の色や大きさ
  2. 背景の色
  3. ボックスのマージンなど

この頃はまだ実装してからのテストが不十分で、ブラウザに互換性がないことも多く、CSSはあまり使用されませんでした。

CSS level 2

それから2年後の1998年5月に、CSS level 2が勧告されました。

  1. モニターや紙媒体などの表示媒体によってスタイル変更
  2. 音声ブラウザにも対応
  3. 文字を表現する要素の拡大
  4. 疑似クラスや疑似要素

しかし、CSS level 2の仕様書の定義が不明瞭で、ブラウザに表示されないなどの不具合があり、改良されたCSS level 2.1が2011年に勧告されました。

ブラウザ戦争

CSS level 2が勧告された頃は、Internet ExplorerNetscape 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

モジュールごとのlevelでWeb作成の自由度が増したCSS

CSS level 3

インターネットが普及するとともに、Webページも動的な効果も増えデザイン性も多様化していきました。

CSSに求められる機能も増えていき、それらをまとめて勧告することが困難となりました。

そのような時に生まれたCSS level 3は、CSS level 2を元にして、モジュール(機能)ごとに勧告がされるようにしました。

それぞれのモジュールのlevelが分かり、Web作成者もそれに対応できるブラウザをチェックしてページを作成していきます。

ボタン マウスオーバーの表記

上のようなメニューボタンは、以前ならそれぞれの画像を用意しないといけませんでした。

しかし、CSS level 3 はこのようなボタンも背景色やグラデーション、角丸になるコードを書くことなどで可能となりました。

にゃんこ師匠にゃんこ師匠
こうなると作り手側もいろいろとアイデアを出し、それを作り上げる楽しみもあるというものだな
ミツオカミツオカ
表現する幅が広がったんですね
にゃんこ師匠にゃんこ師匠
ただ、画像を使わない分ファイルサイズは軽くなったが、CSSのコードは増え複雑になっていったんじゃ
ミツオカミツオカ
作り側としては嬉しい反面、覚えることも増えるわけか…
にゃんこ師匠にゃんこ師匠
エンジニアは日々修行じゃな…

増えていくモジュールとノーコードに立ち向かうCSS

増えていくモジュールとノーコードに立ち向かうCSS

現在、CSS level 3が主体となっていますが、モジュールの中には level 4に達していくものもあります。

それらは独立してCSS level 4として存在はしていませんが、そのレベルにあるものは「CSS level 4」と呼んでいます。

これからも level 4 に達するモジュールは増えていくことでしょう。

そうなるとそれら全部理解し、使用していくのはかなり大変なことになります。

ホーコン・ウィウム・リーも「認知されずに使用されないモジュールが出てくること」を危惧しています。

これからのCSSは使用されない、またはあまり使用されないモジュールなどは淘汰されてもいくかもしれません。

JavaScriptなど連携する他のプログラムについても更に理解が必要になり、これからのCSSのコーティングはプログラミング知識とデザイン力が試されそうです。

そして近年、Webページをノーコードで作れる「WordPress」や「STUDIO」などが増えていき、Webページ作成にも多様性が出てきました。

テンプレートなど用意され簡単に作れるノーコードのWebページは、制限もあり凝ったページは作れませんが、ツールやユーザーは増えていっています。

だからといってCSSが無くなることはないでしょう。

HTMLとともに成長していったCSSは、Webの世界で深く根付いています。

そして、CSSできる表現の幅はまだまだ広がっていくでしょう。

ホーコン・ウィウム・リーの現在

CERNを経てW3CでCSSに携わってきたホーコン・ウィウム・リーは、今はオペラ・ソフトウェアの CTOに就いています。

彼はOperaのブラウザ開発を通じて今もCSSと繋がりがあります。

500年後の未来のコンピューターでもCSSコードは読めるようになる

とホーコン・ウィウム・リーは語っています。

ミツオカミツオカ
作る側としてはなるべく簡単なのがいいですけどね…
にゃんこ師匠にゃんこ師匠
じゃな…。
さて、さっきお願いしたWebページを見てみるか…
おい、文字が消えてるな
ミツオカミツオカ
あちゃ~、背景の色を間違えて文字と被って見えません(アタフタ…)
にゃんこ師匠にゃんこ師匠
安心せい、CSSなら修正も簡単じゃ
ミツオカミツオカ
そうだった…!!
ここの色を変えれば…よし完了!
にゃんこ師匠にゃんこ師匠
ええー!
文字やボタン、画像が3Dで浮き上がって、ビュンビュン動いておる!
ケーキの画像からは、ケーキの香りが!!
画面を舐めてみたら、ケーキの味が!!
プリントしたら本物のケーキが出てくる…!!
ミツオカミツオカ
これも全部CSSで
にゃんこ師匠にゃんこ師匠
ええーーー!
CSSスゲーーーー!!!

書いた人はこんな人

ライトコード社員ブログ
ライトコード社員ブログ
「好きなことを仕事にするエンジニア集団」の(株)ライトコードです!
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もりは大歓迎!
また、WEBエンジニアとモバイルエンジニアも積極採用中です!

ご応募をお待ちしております!

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア