この記事は CSS 昔話 Advent Calendar 2015、10日目の記事です。
面白そうなんで参加してみましたが、CSS ハックとかバグの話は他の方々が、色々面白い記事を書いてくださると思いますので、ここは少し外して、とりとめもない感じになってしまうのは覚悟の上で、空気を読まずに本気で昔の話をしてみようと思います。
私が CSS を触り始めた頃の記憶を辿りつつ。そう、あれはもう 20 年近く前の話......
1990 年代後半
もう昔過ぎてあまり明確には覚えてないんですけども、私が CSS というか、HTML をはじめとした、今でいう Web サイト制作関連の技術に興味を持ちだしたのは 1996年ごろ。
アトランタオリンピックが開催された年で、Yahoo! Japan がサービス開始した年らしい。テレビやラジオをつければ小室哲哉氏プロデュースの曲ばっかり流れていた記憶が。
当時、専門学校でメカトロニクスという分野を通じて機械工学や制御用プログラミングなどを勉強していた私は、その関係でパソコンやインターネットに触れる機会を得て興味を持ったものの、まだ個人がパソコンを買うには結構なお金がかかる時代。
当然そんなお高いものに手が出なかった私は親御さんがお金持ちとかいう恵まれた理由などでパソコンを持っていた友人宅などで遊ばせてもらう程度だったため、本格的な Web サイトの制作などは未経験。
それでも当時登場したばかりで盛り上がっていた Shockwave / Flash で作られたコンテンツとかよく見て回ってたし、簡単な 「ホームページ」 を Geocities （ジオシティーズ / 当時はまだ日本語サービス開始前だったはず） に作ったりして、友人同士で批評しあうみたいなことしてました。
当時は 「Welcome to ○○○○'s World」（○○○○は自分の名前な） みたいなタイトルをセンター寄せ （もちろん center 要素で全体を囲むんだ） で表示するのが定番だったりしましたねぇ（遠い目）。
ちなみに当時の Yahoo! （本家） はこんな感じでした。Google はまだない。
ブラウザ的には 「Netscape Navigator 3.0」 と 「Internet Explorer 3.0」 がリリースされた年。第一次ブラウザ戦争の真っ只中。
今では知ってる人も少ないと思いますけど、当時は Netscape Navigator （Netscape Communicator） が圧倒的にシェアを持ってて、IE のシェアはまだまだ。
でも CSS など、当時勧告が近かった新しい技術への対応や独自拡張は IE の方が積極的に行っていたので （この当時の IE は追う立場でしたから）、Web サイトを作る側からすると、IE の方が楽なのにな～ ネスケ （Netscape Navigator / Netscape Communicator） だと崩れてうぜぇ みたいな会話をしてました。
この頃のネスケでは CSS で背景色を指定してもなぜか文字列の背景にだけしか色がつかないとか、div 要素に width プロパティで幅を明示しないと要素の幅がなぜか勝手に狭くなったり、ある宣言ブロック内に日本語 （例えば font-family: "ＭＳ Ｐゴシック" みたいに） が入ってると宣言ブロック全体がぶっ飛ぶみたいなバグに悩まされたし、あとウィンドウサイズをリサイズするとレイアウトがぶっ壊れる凶悪なバグもあったり （そのためにリサイズされたら画面をリロードする JavaScript が配布されたりしてたし） ......
それに対して IE は比較的バグや表示崩れも少なく、Web サイト制作する人にとっては完全に救世主みたいな存在だったんですよ。シェアをほぼ独占してから開発をサボったせいで、いつまでもバージョンアップされない老害みたいに君臨し続けてみんなから嫌われまくったけど。
ま、IE3.0 も結構ふざけたバグは色々ありましたけどね。例えば table 関連の要素に line-height を指定すると、文字が全部重なって読めなくなるやつとか......
とにかく今みたいに情報が多くないし、探す方法も便利じゃないから、とりあえず指定してみた結果とんでもない崩れ方してハマって、「あぁこれは駄目ってことなのね」 と察する感じが多かったですね。
とはいえ、この当時はまだ CSS あんまり使わなかったです。CSS1 の勧告が 1996 年 12 月だから、IE が実装してたといっても先行実装。
Web サイトもほぼテーブルレイアウト + spacer.gif、スタイルはブラウザのデフォルトスタイル任せってのが普通で、例えば body の背景を指定するなんて時も CSS じゃなくて background 属性や bgcolor 属性でやってた。
回線が細いから画像もそれ程使えないし （使えないっていうか、使ってもいいけどデカイ画像なんかたくさん使ったら読み込みに時間かかっちゃってまともに表示されない）。
今みたいにセマンティック的な、意味づけがどうのとかって話はほとんどの人がはっきり言ってどうでもいいと思ってた時代。文書構造よりもレイアウトだよ。「h1 要素とか文字がでかすぎてダセェから使わねぇ」 みたいに言われてたし、<font size=-1> みたいな表記 （属性値を " で囲まないあたりがミソ） があちらこちらにでてくるような HTML を書いてました。
1998 年
さて、前述の通り自分だけのパソコンはまだ持っていなかった私が、今度こそ本格的に HTML / CSS に興味を持ってハマったのは少し時間が経過した 1998年の後半以降。
この頃、セガからドリームキャストってゲーム機が発売されたんですよ。このゲーム機、モデムがついててインターネットにつなげることができたんですよね （ついでに専用ブラウザも搭載されてたんだよ）。
で、当時まだ貧乏新入社員で実家暮らしだった私は親に頼み込んでテレホーダイを契約してもらい、昼はお仕事、家に帰って夜 11 時からはインターネットという生活 （多分、周りのオジサンに 「23時にダイヤルアップってなんですか？」 って聞くと遠い目されると思うよ）。
その後、頑張ってお金貯めて FMV を購入。ついに自分のパソコンが使えるように。
ジオシティーズも日本語サービスが始まってたので、そこで趣味の Web サイト作る日々。ちなみにこの年、CSS2 が勧告された。HTML も前年に HTML 4.0 が勧告されたばかりで、HTML 4.01 はまだ勧告前。
ブラウザは Windows 98 に無料でバンドルされた Internet Explorer 4 が圧倒的にシェアを得てほぼ独占状態。まだ勧告前の HTML 4.01 に対応し、CSS1 には完全対応をうたって、Web サイト作る側も （少なくとも個人のサイトなら） IE だけ気にしてればいい状態に。filter: で色々できたり最高！ （ちなみに今は CSS filter プロパティが CSS のプロパティとして策定されていますがこれとは別の独自拡張） みたいに思ってました。
といっても、まだ CSS でレイアウトみたいのは少なく、引き続きテーブルレイアウトが主流。クリエイター系のサイトだと Flash でグリグリ動く Web サイトなんかが人気。やたら英語でメニューを作る、文字はなるべく小さい方がカッコいいみたいなノリ。
blockquote 要素をインデントに使ったりとか当たり前。なので昔の HTML 解説書なんかには、blockquote 要素をインデントのために使うのはやめましょうとか、文字を大きくするために h1～h6 要素を使うのはやめましょうとか、<p> は 1 行スペース空けるためのタグじゃねぇみたいな解説がよく出てきてました。最近はさすがに見ないけど、それだけ昔は文書構造ってやつが適当に扱われていたということですね。
なお、この年には The Web Standards Project （WaSP） が立ち上がってます。だからのちの Web 標準的な流れはすでに始まってはいたということですね。個人的にもこの辺から CSS でレイアウトとかしてみて遊んだりしていました。あくまで趣味だから遊びの範囲ですけども。
2000 年代に突入
さらに少し時間は流れて 2000 年。シドニーオリンピックが開催された年。
「2000 年問題」 を無事乗り越え、iモードブームがきたり、ITバブル、IT革命とか騒がれつつ、今もお元気な某元総理がイット、イット言ってた 20 世紀最後の年。海外だと Napster 問題とかが話題だった年ですね。
ちなみに 2000 年になると Yahoo! （本家） はこんな感じのデザインに。
Google も 1997 年に登場して 4 年目。当時はこんなデザインでした。
個人的にはこの年リリースされた Internet Explorer 5.5 はインパクトが大きかった...... 悪い意味で。CSS2 への対応がウリだったけど、実装がかなり中途半端で苦労した記憶が。仕様書通りに書いて崩れるっていう理不尽な状況を経験しすぎてハートが強くなりましたけど。
いや、CSS の対応がイマイチってのはこれ以前の IE や他のブラウザもそうだったんですけども、その頃はあまり CSS を積極的に使ってないからそれ程気にならなかったんでしょうね。ところが CSS2 が勧告されて数年が経って、それへの対応をウリに出てきた新バージョンの IE5.5。これで本格的に CSS が使えるって思ったところでこの出来かよっていう、落胆が大きかった気がします。このあたりから IE に対して少しずつ風向きが変わり始めた感じ。
積極的に CSS などをサポートしたのと Windows にバンドルされるっていう立場を活かして IE4 でライバルを駆逐し、IE5 までは 「当時としては」 よいブラウザって言われてその地位を盤石にしたものの、ライバルがいないことで IE5.5 以降は開発の勢いや精度も低下して...... みたいな流れですね。
とはいえ、この頃になっても自分が作っていた Web サイトでは、CSS はまだメインではなく、margin や padding、背景色や背景画像の指定など、装飾的な部分を中心に、レイアウトは相変わらずテーブルレイアウト。 CSS の指定も style 属性による直書きが多くて、文書構造とスタイルを分離しようっていう考えがあまりなかった気がします。
ちなみにこの年に XHTML 1.0 が W3C 勧告。この前年の 1999 年に HTML 4.01 が勧告。CSS 2.1 は策定中。
2001 年
そして 2001 年についに Internet Explorer 6 が登場。CSS2 への対応強化とか言われたけどこれまた結構中途半端。CSS の話じゃないけど PNG のアルファチャンネルに対応してないとか、文頭に XML 宣言があると互換モードになるクソ仕様など多くの問題を抱え、その後 10年以上 Web サイト制作者を苦しめることになる奴の登場です。
IE6 の有名なバグとしては、float プロパティで指定した値と同じ側に margin の指定をすると （例えば float: left; margin-left: 20px;）、なぜか margin が指定した値の倍で表示されちゃうやつとか、他にも float 関連だと条件によって要素内の文字列が消えちゃうとか、所謂 hasLayout 絡みのバグがよくハマるポイントでした。
しかし、この時期もう IE はシェアほぼ 100% 状態。Firefox などが出てきて第二次ブラウザ戦争が勃発する前の平穏（？） な時期でしたので、ブラウザ間での表示誤差的なものに悩まされることは少なく（あるとしたら古い IE 向けにって感じで、所謂 IE ハック的なのはよく使った気がする）、比較的平和だった記憶があります。
個人的にはこの年から自分で EC サイト立ち上げて活動してたり、初めて Web サイトを作るのでお金もらい始めたりもして色々と今につながる時期。Web サイトの制作はまだ本業ではなく、知り合いのつてで副業って感じでしたが、発注してくれるのが印刷会社さんってことも多く、Mac 比率が高かったことから、Mac 版 IE で表示が変だよとか言われてハマることがたまにありました （Mac 持ってねーしみたいな）。
ちなみに、この年は ADSL がものすごい勢いで流行って、所謂、ブロードバンドインターネット接続が一気に普及開始した年でもあります （もう ADSL とかブロードバンドとかいうワード自体が死語ですよね）。この時期になるとかなり今と変わらない、もちろんモバイルインターネットは無理なんだけど、少なくとも家や会社ではいつでもインターネット使えるみたいな状況になってて、テクノロジー関連企業や大企業さんだけじゃなく、ごく一般の企業や中小企業さんでも Web サイトを作るのが当たり前みたいな空気がありました。
その関係で色々なサイト作るお手伝いさせてもらいましたけど、まだこの頃はテーブルレイアウト。ただ、数年前と違うのは、画像が惜しみなく使えるようになったことで今で言う 「スライス作業」 ってのが格段に増えたのがこの頃だった気がします。デザイン作る → スライス！スライス！ → テーブルに当てはめてレイアウトっていう感じの制作の流れ。
2002 年
日韓ワールドカップ （サッカー） が開催された年。
Movable Type 2.5 が多言語対応したことで、日本で Blog 神、平田氏が日本語化プロジェクトを行っていたころ。
私も Movable Type を使って Blog に近いようなサイトを作ったりしていましたが、この辺から個人的には Web 標準に興味を持って HTML の文書構造にこだわり始め、それに伴って CSS でスタイリングする現在のやり方にかなり近づいていきました。
Movable Type や Blogger （当時はまだ Google に買収される前。当時の Blogger って作ったサイトを FTP で自分のサーバに自動でアップロードできたので、外部 CMS みたいに使えたわけです） を使って CMS の便利さにハマって使いまくりだしたんですけど、そうするとテンプレート化を含め効率よくサイトを制作、管理するために、文書構造 （HTML） とスタイル （CSS） を極力分離する方向に自然と向かっていきます。
とはいっても、お客さんのサイトは崩れたりすると面倒くさいからテーブルレイアウトで作っていた記憶があります。個人のサイトは CSS で色々試してみたいな感じでお勉強。
まだ今みたいな便利なツールもないし、当時のオーサリングツールも画像をスライスしたりテーブルレイアウトするにはないと困るレベルだったけど、CSS を書くにはあまり向いていなかったのもあって、テキストエディタで HTML と CSS 書いていました。
この時期になると、策定中だった CSS 2.1 の内容がある程度固まって （といっても結局、正式に勧告されたのは 2011 年ですけどね）、徐々に出てきた新興ブラウザが Web の標準技術に準拠した実装をウリに徐々に人気を上げてきます。人気を上げてきますといってもそれはごく一部の Web サイト制作者とかの間だけでですが。
2005 年以降
この時期になると、のちに第二次ブラウザ戦争と呼ばれるブラウザ開発競争が始まりますが、特に日本では IE のシェアが盤石過ぎて、戦争といっても帝国軍に対抗する反乱同盟軍的な、超巨大勢力 対 少数派の戦い。
Microsoft さんが Web 標準への準拠を含めてブラウザの開発に力入れないといけないよねー って多少思ってくれたという意味では大きかったと思いますが、結局 IE7 がリリースされたのが 2006 年の後半。しかも下記の記事でも当時書いているように、決して CSS の対応等で素晴らしい感じになったわけじゃないし。
比較的まともになった IE8 がリリースされるのはさらに時間が経って 2009 年ですし、企業ユーザーの大人の都合で IE6 のシェアが下がらなかったことから、その間は IE に文句言いながら Web サイトを作るという今の若い方でもある程度知っている時代に。
なお、この 2005 年 ～ 2009 年くらいの間って、ちょうど Web 標準ブームみたいのがあって、正しい文書構造や CSS の利用が Web サイト制作者の間でも普通になってきた時期。
個人的にも Web 標準関連の書籍を書かせていただいたり、MdN さん主催の Web クリエイター向けイベント 「Designer meets Designers 03」 で登壇させていただいたりと、Web 標準関連では色々と活動していた時期なのでよく覚えています。
2010 年以降
2010 年を過ぎるともう昔話ではないですね。この時期になると CSS3 への対応が話題で、IE 以外のブラウザが 「モダンブラウザ」 と呼ばれ、Progressive Enhancement （プログレッシブエンハンスメント） など、モダンブラウザと、そうでないブラウザ （要するに IE なんだけど） にどういうアプローチでサイトを提供するかみたいな話題もよく出ました。
Internet Explorer 10 がリリースされる 2012 年ごろになると、最新版の IE に関しては CSS への対応で大きな問題がでることもかなり減って、さらにその後 IE6 のサポートが 2014 年に切れることがはっきりすると IE6 はもうよくね？ という空気も少しずつですが広がって IE6 対応の地獄からも Web サイト制作者が徐々にですが解放される方向に向かっていきました。
ま、IE 向けに角丸画像を頑張ってスライスしたり、シャドウの多いデザインだとモニョモニョしたり、仮に IE6 のサポートを無視してよい案件だったとしても結局は IE7 や IE8 向けに余計なことしないといけない地獄は続いたんですけどね。
とはいえ、ここ 1、2 年は CSS で話題になるのも、IE 向け CSS ハックとかの話題から、徐々に CSS だけでこれが作れる、とか CSS3 だとこんなことできるよ、みたいな Tips 系が増えて健全な感じに。そして徐々に IE への憎しみを人々が忘れていきましたとさ。めでたしめでたし。
だがしかし、人々は気がついていなかった、Android 標準ブラウザという新たな脅威が近づいていることに...... To be continued. （ウソ。続かない）
さて、やっぱり書いてみたらとりとめのない感じの内容になってしまいました...... しかも CSS のことあまり書いてない （汗） まぁ気にしないことにしますけど。
それに、私個人の記憶の範囲なので、私が CSS なんてほとんど使ってなかったよという同じ時期でも、いや、もっと CSS 書きまくってましたよ、という方もいるかもしれません。その辺は Web サイト制作を仕事としてやっていたか、趣味だったかなどでも変わってくるかもしれませんね。
思い返してみて思うのは、昔は CSS にしても悩みが 「ブラウザが対応していない」「仕様通りに書いてるのにその通り動作・表示されない」「理不尽にサイトがぶっ壊れる系の凶悪バグ」 みたいな結構不毛 （不毛っていうか、悩んでも自分の力ではなにも解決しないみたいな？） なものが多かったんですけども、近年は仕様もブラウザの実装もかなり出そろって、メンテしやすい CSS とは、みたいな設計の話だったり、ツール群を含めた効率的な CSS の記述、生成方法だったり、同じ悩むにしても建設的な話題が多くて健全だなと思います。よい時代になったものだ。
ということで、CSS を触り始めてから 20 年目を迎えようとする私からは以上です。
記事内の Yahoo!、Google のキャプチャ画像は、Internet Archive より取得しています。
過去に Advent Calendar で書いた記事
Web Accessibility Advent Calendar
- 2015年： 「アクセシビリティ」 を当たり前にするために制作者はどう考えればよいのか
- 2014年： Web アクセシビリティを身近に感じてもらうためのごく簡単なお話
- 2013年： WAI-ARIA はじめの一歩。サンプルソースで学ぶ WAI-ARIA 導入方法
