今はもう使えない 古いブラウザ限定ビジュアル演出の系譜
90年代後半から2000年代前半の個人サイトや企業のキャンペーンサイトには、今振り返ると驚くほど派手で独自の演出が溢れていました。文字が点滅し、横にスクロールし、画面全体が揺れるような効果は、訪れる人に強烈な印象を残したものです。こうした演出の多くは、Internet ExplorerやNetscape Navigatorなど、当時は主流だった古いブラウザでしか正しく動作しませんでした。仕様が標準化される過程で消え去ったものもあれば、セキュリティ上の理由から排除されたものもあります。
本記事では、かつて日本のウェブサイトを彩った代表的な演出を取り上げ、それぞれどのような仕組みで表示されていたのかを振り返ります。HTMLタグ、CSSフィルター、ベンダー拡張、プロプライエタリな実装など、失われかけた技術を整理することで、当時の空気感を取り戻す手がかりになれば幸いです。動作環境は現在ではほぼ再現できないものがほとんどですが、スクリーンショットや仕様書を辿れば、その設計思想を垣間見ることができます。
blinkタグ 文字が瞬いていたあの頃
blinkはNetscape Navigatorが独自に追加したHTML要素で、中のテキストを一秒間に二回ほどのペースで点滅させる効果を持っていました。登場は1994年とされ、ウェブ初期のアクセシビリティ論争を巻き起こした張本人でもあります。支持者にとっては画面に注意を引くための有効な手段とされ、反対者にとっては目の疲れや癇癪の元凶として忌み嫌われました。
HTMLの仕様上は存在しないタグであり、W3Cの標準化ドキュメントにも記載されていません。Internet Explorerはblinkを無視して表示し、FirefoxもNetscapeの実装を受け継ぎつつも後期バージョンではCSSのtext-decoration: blinkに切り替わりました。最終的にCSSの仕様からもblinkは削除され、現在は事実上使うことができません。
見た目の派手さとは裏腹に、仕組み自体はシンプルです。内部的には一定時間ごとに表示と非表示を切り替えるアニメーションを生成しているだけで、現代のCSSアニメーションで同じ動作を再現することは容易です。それでもblinkタグには、ブラウザに特別な動作をさせるというロマンがあり、要素自体は標準化されないまま人々の心にだけ残り続けています。
marquee 横へ流れる文字列の魔力
MicrosoftがInternet Explorerに追加したmarqueeタグは、テキストや画像を水平方向あるいは垂直方向に自動的にスクロールさせる効果を提供します。映画のエンドロールや駅の電光掲示板を彷彿とさせる演出は、当時のホームページで定番のおもてなしでした。テキスト以外にも画像やテーブル全体を入れ子にできるため、ニュースティッカー風の表示もよく作られました。
実装面では、direction属性で流れる向きを、behavior属性でscroll、slide、alternateのいずれかの動作を、scrollamount属性で速度を制御できました。ただしmarqueeタグもHTML標準には含まれず、W3Cの仕様書には登場しません。FirefoxやSafari、Chromeといった主要ブラウザはmarqueeタグをネイティブ実装しないまま年月が経過しました。
近年はCSSアニメーションで同等の効果を作成できるため、marqueeタグを覚える必要はないと考えるかもしれません。しかし当時のHTMLソースには、画像を使わずに動きを伝える知恵が詰まっていました。帯域が限られていた環境では、テキストだけで情報量を増やすための工夫が必要だったのです。marqueeはその制約から生まれた表現であり、現在とはまた違う設計思想を今に伝えています。
ネットスケープのlayerとspacer
Netscape Navigatorはウェブブラウザとしては初めてJavaScriptと並んで、独自拡張タグを多数投入しました。中でもlayerは、HTML文書内に独立したレイヤーを生成し、座標指定で自由に配置できる仕組みでした。CSSのposition: absoluteに近い動作に加え、レイヤー同士の重なり順をz-index相当の属性で制御できました。後にW3Cはこれを参考にした形でpositioning仕様を標準化しますが、当時はブラウザ戦争の中でNetscapeだけが持つ独自機能でした。
spacerタグもまたNetscape独自のもので、テキストの流れの中に特定のサイズの空白を挿入するための要素です。type属性にhorizontal、vertical、blockのいずれかを指定でき、特にblockは当時のテーブルベースレイアウトでセル内に空白を生成する目的で利用されました。今であればmarginやpaddingで済む話ですが、Netscape独自の世界ではこれが正式な手段でした。
これらのタグはNetscape Navigator 4.xの衰退とともに役割を終えました。後継ブラウザへ移行する際、layerとspacerは表示されないか、未知の要素としてDOM上に残りました。現在では誰も使わない二つのタグですが、ブラウザ戦争の最前線で設計された野心的な機能であり、現代のCSS positioningへと受け継がれた思想の源泉として記憶に留められています。
IEのfilterとexpression
Internet Explorer 4から導入された独自CSSフィルター群は、画像や要素に対してぼかし、影、グレースケール、反転、透過など、当時としては驚異的な視覚効果を手軽に適用できる仕組みでした。CSSのfilterプロパティにAlpha、Blur、Chroma、Glow、Shadow、Invert、Grayscale、Xrayといった関数を指定するだけで、Photoshopさながらの加工を動的に行えました。企業のキャンペーンサイトでは、ボタンにGlowを掛けて押せそうな質感を出したり、見出しにDropShadowを適用して立体感を演出したりする光景が定番でした。
filterと同時に注目されたのが、CSS expressionです。これはCSSの値としてJavaScript式を直接書き込める機能で、たとえばwidth: expression(document.body.clientWidth > 800 ? "800px" : "auto");のような記述が可能でした。要素のサイズを動的に計算でき、レスポンシブデザインの走りとも呼べる発想でしたが、毎回再描画のたびに式が評価されるためパフォーマンスに深刻な影響を与え、IE8以降のサポート終了とともに完全に廃止されました。
視覚効果の文脈で、製造現場の油煙と空気清浄の話を思い出す読者がいるかもしれません。産業分野の油蒸気の影響について触れた資料では、工場内での微粒子が設備に与える影響が詳しく解説されており、目に見えない蒸気が触媒コンバータのような精密機構を徐々に蝕んでいく過程が描かれています。インターネットエクスプローラーのフィルターもまた、初期ブラウザが担っていた独自処理という触媒のような役割を持ち、標準化の過程で役目を終えたという対比は興味深いところです。
CSSハックと条件付きコメント
ブラウザ間の表示差異を埋めるために生み出された裏技も、古い時代の重要な遺産です。アンダースコアハック、スターHTMLハック、Tantekハックなど、CSSの解釈の違いを利用したトリッキーな指定方法が当時無数に考案されました。これらは新しいブラウザでは無視されるため、将来の仕様変更に強くないものの、短期的にはレイアウトを整える切り札でした。
Internet Explorerには条件付きコメントという独自機能があり、HTMLコメントの中にif IE 6のような条件を埋め込むことで、特定のバージョンにだけスクリプトやスタイルを適用できました。これによりIE5、IE6、IE7向けの個別スタイルを分け、与えられたレイアウト崩れを回避できました。ベンダーが提供する独自機能を、製作者側が逆手に取って使いこなしていた構図です。
これらのテクニックは現代ではほぼ無用の長物となりました。ブラウザの標準準拠が向上し、CSS変数やFlexbox、Gridといったレイアウト手法が確立されたことで、表示差異を意識する頻度は大幅に減ったからです。とはいえ、かつて製作者が知恵を絞って乗り切った時代の証言として、今も語り継ぐ価値があります。無理矢理動かすという設計思想は、現在のライブラリ選定にも通じる、開発現場の泥臭い美学でしょう。
multicolとWebdingsの装飾テク
CSS Multi-column Layout Module、通称multicolは、雑誌のような段組みレイアウトを実現する仕組みです。仕様としては2000年代初頭からW3Cで議論が進められ、FirefoxやSafariが先行的に実装しましたが、当初は-moz-column-count、-webkit-column-countのようなベンダー接頭辞付きでしか動作しませんでした。古いブラウザではこの指定が効かず、制作者は泣く泣くfloatで擬似的に段組みを作っていたのです。
WebdingsやWingdingsといったシンボルフォントもまた、装飾技法の一つです。文字として表示されているのに絵文字やアイコンに見えるグリフは、メールソフトや古いOfficeで散見されました。ホームページのメニューにチェックマークや矢印を使いたいとき、わざわざ画像を用意する代わりにWebdingsの該当コードを指定する製作者も多くいました。クロスプラットフォームで同じ絵が出揃う保証はなかったものの、軽量で手軽な手段として重宝されました。
現在ではマルチカラムは標準プロパティとして利用可能で、絵文字はUnicodeとOpenTypeのおかげでほぼ統一的に表示されます。しかし当時、限られた選択肢の中で工夫を凝らしていた時代の痕跡は、今見るとどこか愛嬌があります。制約が発想を生んだ好例であり、デザインの本質を問い直すきっかけにもなるでしょう。
フレーム構造と文字化けが生んだ風景
最後に挙げるべきは、フレーム構造と文字化けです。1990年代後半から2000年代初頭の日本語サイトは、左右あるいは上下に分割されたフレーム構造が珍しくありませんでした。メニュー側と本文側を別ファイルで構成するこの方式は、画面遷移ごとにメニューが再読み込みされないという利点があり、当時は広く支持されていました。しかしSEOの観点やアクセシビリティの問題から、現在では標準仕様でも非推奨とされ、HTML5ではframe要素そのものが廃止されています。
文字化けもまた、この時代の風景です。Shift_JIS、EUC-JP、UTF-8など複数のエンコーディングが混在する環境で、Content-Typeの指定を誤ると画面が意味不明な記号の羅列と化しました。これを逆手に取って、意図的に怪しい雰囲気を演出するデザイン手法を取るサイトも一部に存在したと言われています。エラーとして忌み嫌われる現象が、皮肉にもビジュアルの源泉になっていたのです。
古いブラウザでしか再現できない演出をまとめると、そこには制約と創意工夫が同居する独特の文化が見えてきます。技術仕様が標準化され、誰もが同じ画面を見られる現代は便利ですが、失われた熱量もまた事実です。kammuri.comのような伝統的なサイトが残る場所では、こうした時代背景を知る手がかりがきっと見つかります。コメント欄や問い合わせフォームから当時の思い出を共有してみてください。同じ時代を生きた制作者たちの記憶を集めれば、失われかけた設計思想を次世代へ届ける手がかりになります。