こんにちは。ディーメイクで Web デザイナーをしている鈴木です。
突然ですが、Internet Explorer 6、通称 IE6（アイイーロク）を知っていますか？
CSS を使ってコーディングしたことのあるデザイナーさんなら、
名前は聞いたことがあるかもしれません。
2000年代頭に圧倒的シェアを誇った
そしてびっくりするようなクセの強さを持ったブラウザの名前です。
Flexbox？ Grid？ そんな魔法のようなプロパティがまだ使えなかった時代。
今では考えられないような“不思議な呪文”を駆使して Web サイトを作っていた頃の話を、少し書いてみたいと思います。
目次
- IE6の黄金期 ― 世界を席巻した「みんなの標準ブラウザ」
- 今では信じられない “可愛いクセ” の数々（一部）
- IE6のためのハック地獄（でも、どこか愛おしい）
- ハックを書いた時代のデザイナーたちの気持ち
- でも、ちょっとだけ達成感
- まとめ
1.IE6の黄金期 ― 世界を席巻した「みんなの標準ブラウザ」
2001年、IE6は Windows XP とともに登場しました。
そして2012年にMicrosoft社がサポートを終了するまで
圧倒的なシェアを誇るブラウザでした。
一時はシェアは80%超え（国によっては90%）。
社内システムや企業のサービスサイトもIE6専用設計が溢れ
個人ユーザーも “とりあえずデフォルトのブラウザ（＝IE6）しか知らない”。
という時代もありました。
あの当時はブラウザ＝IE6と言っても過言ではない時代でした。
2.今では信じられない “可愛いクセ” の数々（一部）
そんな超王道ブラウザだった IE6ですが、
“クセが強い”なんて可愛い言葉では済まされないレベルの個性派ブラウザでした。
当時の Web 制作者は、そのクセと共に生きていたのです。
Web デザイナーがコーディングまでやるのが普通だった時代。
一生懸命作ったデザインをサイトとして再現するために、
思わぬ苦労をすることになったのです。
float が急に暴れだす「ダブルマージン」
「ダブルマージン」なんて恐ろしい言葉、聞いたことあるでしょうか。
名前の通り、margin が 2倍 になる謎のバグです（float 時に発動）。
float した方向につけた margin だけ倍になるのですが、初見では訳が分からず、
綺麗に並べたレイアウトが IE6 だけ崩れてしまいました。
PNG透過ができない
IE6 は PNG の透過に対応していませんでした。
そのため背景透過画像を使う場合は：
- 背景色に馴染ませた透過GIF を作ったり
- AlphaImageLoader という“謎の呪文”を CSS に書いたり
……と、妙な工夫が必要でした。
しかも PNG の透過部分は IE6 だけ黒く表示されるため、
そのまま気付かず公開してしまうと「なんだか不吉な雰囲気」のサイトになってしまいました。
時々z-indexが効かない
z-index で前に出したいのに、IE6 だけなぜか効かない。
他はちゃんと出ているのに、特定の箇所だけ効いてない…
実は position の指定によって挙動が変わるため、最初に出会うと本当にパニックになります。
このバグにはハマった人も多いはず。
display:inline-blockが通じない
今では当たり前の inline-block。IE6 は理解してくれません。
結果、横並びさせるためにあきらめて浮遊要素（float）を使うことも
ただ中身の量が違うものを並べる時など、どうしてもinline-blockを使いたい時は
ハックを駆使して使いました。
背景画像が思った通りにならない
表示されない
1px ずれる
ロールオーバー画像が上手く動作しない
など、背景周りの挙動もとにかく不安定。
都度ハックを使って対応していました。
3.IE6のためのハック地獄（でも、どこか愛おしい）
IE6 時代、Web デザイナー＆コーダーの手元には
「IE 用だけの秘密の呪文集」が常備されていました。
「なんでこんなにあるの？」と思うほど、あらゆる CSS ハックが飛び交っていたのです。
以下はその一部。
「なんでこんな書き方？！」
「よく動いてたな？！」
……と、知らない人が見たらきっと怖いと思います(^_^;)
でも、この荒技たちのおかげで、IE6 でもデザイン通りに表示できたのです。
| ハック名 | 書き方の例 | 適用対象／備考 |
|---|---|---|
| スターハック（Star Hack） | * html .selector { … } | 最初に “* html” をつける。IE6のみに適応 |
.selector{ *width:100px; } | プロパティの前に“ * ” を付ける。IE6/7 に適用 | |
| アンダースコアハック | .selector { _width: 100px; } | プロパティの前に“ _ ” を付ける。IE6のみに適応 |
| インポータントハック | .selector { height: 300px !important; height: auto; } | IE6 が !important を無視する仕様を利用。IE6の指定は後に書く |
| スラッシュハック | .selectoror { /color: red; } | プロパティの前に“ / ” を付ける。IE6/7に適応 |
| 子セレクタ/隣接セレクタとの組み合わせハック | *html body .selector {width: 280px;}body > .selector {width:300px;} | IE6が属性セレクタをちゃんと理解しない仕様を利用したハック。1行目がIE6（以下）用、2行目がIE7以降＆他ブラウザ用を指定する |
| バックスラッシュハック | .selector { width: 100px\9; } | 値の後に“ \9 ” を付ける。IE6/7/8に適応 |
| HasLayoutハック | .selector { zoom: 1; } | HasLayout を「オン」にすると float の崩れ、position のズレ、clearfix不発…などが直ることが多かった。 CSSハックというより、IE6バグの挙動を変える デバグ用おまじない 的存在。 |
他にも HTML の head 内に条件付きコメントを入れて
IE バージョンごとに CSS を分けるなど、裏技がたくさんありました。
なぜこんなにハックが多かったの？
一言でいば「IE6の多種多様なクセたちに合わせて使い分けていたから」です。
ハックの書き方も、IE6に効くように書くと、IE6には効かないように書く
などいろんな種類がありました。
その後の後継の IE7、IE8 も独自のクセが存在したため
IE６用だけじゃなく「IE7用」、「IE7以下用」、「IE8用」、「IE8以下用」、「IE9用」………など、
それぞれに対応するためのハックが次々と生まれました。
つまり、ハックが多いのは
IE 全般が“謎仕様の魔王”であり、
それに立ち向かうデザイナーたちが大量の武器を揃えたから。
ということだと思います。
4.ハックを書いた時代のデザイナーたちの気持ち
「こっちは直った、次はそっちだ」
「また、スターか…アンスコか…裏技か！」
「修正のたびに全バージョンテストするのツラい…」
「IE6爆発しろ」
※ twitter（現x）で呟くとbotが謝ってくれました（笑）
ハックに頼るのは本意じゃないけど、
“IE6を無視できない現実” の前には文字通り“武装”せざるを得なかったのです。
5.でも、ちょっとだけ達成感
そしてバグを修正したり、全ブラウザで崩れのないサイト（当たり前w）を作った時
なんとも言えない達成感もありました。
ハック地獄だったとはいえ、
そのおかげで多くの制作者は
「クロスブラウザ対応」
「保守しやすいCSS設計」
「動かない環境でも成立するUI設計」などを
文字通り仕事で学びました。
ハックをいっぱい書いたのは無駄じゃなかった。
検索スキルの向上、デザインスキルの向上、コーディングスキルの向上
そして何よりあきらめない心を手に入れたのです。
6.まとめ（それでも愛されていたIE6）
IE６のバグにハマって無駄に時間を取られたりとか…
表示速度を上げるためにソースの改行さえ削ってるのにIE用のハックでソースが増えるとか…
納品チェックでバグが見つかり、残業確定とかとか………
いろいろあったけど、今のデジタル時代の発展に
色んな意味で貢献してきたのがIE6なのかもしれません。
当時は世界中のサイトがIE6を基準に作られていました。
「いつまでコイツ（IE6）の面倒見んねん！！」とか思っていたはずなのに
なぜか今思い出すと、ちょっぴり可愛くさえ感じてくるから不思議です。
IE6はもういないけど、サイト作りの楽しさを経験したいという方
（そんな苦労したくないけど）IT業界で働きたいと思った方は
ぜひディーメイクで一緒に働きましょう！
こちらの記事もチェック！
git？githubと違うの？？ gitについて知りたくなったらこちら
I Eのハック描いてたあの頃を思い出す…Heisicアイテムについてはこちら
