• トップ
  • ブログ一覧
  • ホーコン・ウィウム・リーが提唱したCSSの過去と未来
  • ホーコン・ウィウム・リーが提唱したCSSの過去と未来

    広告メディア事業部広告メディア事業部
    2022.05.13

    ITエンタメ

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

    CSSあってのHTML

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

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

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

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

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

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

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

    CSSの誕生

    ホーコン・ウィウム・リーはノルウェー生まれで、コンピューターサイエンスの理学士とMITメディアラボで視覚研究の修士号を取得しました。

    その後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の開発者のティム・バーナーズ・リーが1994年創設し、その翌年からホーコン・ウィウム・リーも関わっています。

    「勧告」というのは、W3C(World Wide Web Consortium)がWWWに関する技術について、実装しても問題なく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に達していくものもあります。

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

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

    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スゲーーーー!!!
    広告メディア事業部

    広告メディア事業部

    おすすめ記事

    GitHubActionsのランナーに触れてみた

    こやまん(エンジニア)

    こやまん(エンジニア)

    2024.03.28

    IT技術

    Azure Data FactoryでSlackへ通知をしてみる

    たかやん(エンジニア)

    たかやん(エンジニア)

    2024.03.28

    IT技術

    GCP Secret Managerを使ってみた

    たなゆー(エンジニア)

    たなゆー(エンジニア)

    2024.03.21

    IT技術

    Bitriseのパイプラインと環境変数

    加納(エンジニア)

    加納(エンジニア)

    2024.03.11

    IT技術