ハクソク

世界を動かす技術を、日本語で。

The title "and (2020)" can be translated into Japanese as: と (2020)

2025年6月8日原文(danq.me)

概要

  • <blink>タグ と <marquee>タグ の歴史的背景
  • 90年代ウェブデザインにおける役割と流行
  • Netscape と Internet Explorer による実装の違い
  • アクセシビリティ や プログレッシブエンハンスメント の観点
  • 現代における評価と再現方法

90年代ウェブデザインの象徴：<blink>と<marquee>タグ

  • <blink>タグ と <marquee>タグ は、1990年代のウェブ黎明期を象徴するHTML要素
  • 若い世代の開発者には馴染みが薄い存在
  • 当時の代表的なウェブデザインツール Macromedia Dreamweaver でも、<blink>と<marquee>の組み合わせはアンチパターン扱い
  • Lou Montulli （Lynxブラウザ開発者、後にNetscape所属）が<blink>の発案者とされるが、実装には直接関与せず
    • バーでの会話から「Lynxでも動作する一番派手な効果は点滅」と冗談を言ったことが発端
    • 匿名のエンジニアが深夜にハックして実装
  • Netscape Navigator 2.0 （1995年リリース）で<blink>が初登場
    • 同時に アニメーションGIF や JavaScript の初期バージョンも導入
  • <blink>タグの記法例：<BLINK>This is my blinking text!</BLINK>
  • <blink>は当初からジョーク的要素が強く、HTML4でも「冗談」として記載
  • しかし90年代後半には個人サイトで多用され、「最新情報」などを目立たせる用途で利用

<marquee>タグの登場と機能

  • Microsoft Internet Explorer 2.0 （1995年リリース）でも<Netscape>の機能を追従
  • <blink>の「冗談」に乗らず、独自に <marquee>タグ を実装
    • テキストのスクロール方向、速度、ループやバウンスなど多彩な属性
  • <marquee>はデフォルトで「不快かつアクセシビリティに悪い」デザインを助長
  • 記法例：<MARQUEE>Oh my god this still works in most modern browsers!</MARQUEE>

両タグの組み合わせと互換性

  • 90年代後半、一部では<blink>と<marquee>を 両方ラップ する手法が流行
    • Netscapeでは点滅、IEではスクロールやバウンス効果
    • 記法例：<MARQUEE><BLINK>This is my really important message!</BLINK></MARQUEE>
  • Postel’s Law （受け入れは寛容に、出力は厳格に）に基づくウェブ設計思想
    • 未知のタグは無視してもコンテンツ自体は表示される
    • <video>タグがブロック要素になった理由も同様

プログレッシブエンハンスメントとアクセシビリティ

  • <blink>や<marquee>の組み合わせで「どちらかのブラウザで効果が出る」設計
  • サポートされないブラウザでも テキスト自体は読める ため、最低限の互換性確保
  • 本来のウェブ設計は「まず全員が使えるものを作り、対応環境では追加の体験を提供」
    • JavaScriptやCSSも同様の原則
    • 保守性やアクセシビリティ向上に寄与

Operaユーザーの体験とNetscape 7の特異性

  • 有料時代の Opera ブラウザ利用者は<blink>や<marquee>の効果をほぼ体験せず
  • Netscape 7 （2002年リリース）は両タグをサポートした稀有なブラウザ
    • タグの順序やネストにより表示の挙動が異なる
    • 両方の効果が同時に現れ、非常に「目に痛い」デザインに

現代における評価と再現方法

  • <blink>タグは 完全に廃止 （CSSで再現可能だが非推奨）
  • <marquee>タグは 一部ブラウザでまだ動作、ポリフィルも存在
  • 現代での使用は推奨されず、 ノスタルジー目的以外で使うべきではない
  • デジタル懐古趣味として楽しむ範囲に留めるべき

まとめ

  • <blink>と<marquee>はウェブ初期の「悪名高き」遺産
  • 技術的な冗談や実験が、時代の流行を生み出した歴史
  • 現代のウェブ開発では アクセシビリティ や プログレッシブエンハンスメント が重視される
  • ノスタルジーを感じたいなら、実際に使うのではなくシミュレーションや歴史資料で楽しむのが賢明

Hackerたちの意見

https://web.archive.org/web/20201111125145/https://danq.me/2...

3000年前にそこにいたよ。フレームでのナビゲーションが悪い実践かどうかで争ってたのを覚えてる。iframeじゃなくて、フレームね。ここにフレームを覚えてる人いる？HTTP 204を使って、ページをリロードせずにサーバーにメッセージを送ってたのも覚えてる。2000年代初頭に、プロとして画像マップを作ってたのも。国の地図に州の境界を描くのに何日もかけて、クリックできる地図を作ったりしてた。Dreamweaverのテンプレートを使って、みんなが間違って更新して変更を失ったり、バージョン管理を使ってなかったから戻せなかったり。画像のどこをクリックしたかをバックエンドで処理してたのも覚えてる。モーションJPEGでページにストリーミング更新してたのも。今でもChromeでは動くけど、Firefoxではあんまり安定してない。IEのPNG修正に向けてのいろんなステップも覚えてる。アルファブレンディングを実現するために... それがActiveXのものがなんとか動くようになるまで。結局、好みが変わって、すべてがフラットになって、もう必要なくなったんだよね。Java、Flash、Silverlightでサイトのナビゲーションを作ってたのも覚えてる。スペーサーGIFや条件付きコメント、Firebugがどれだけ神のような存在だったかも。いつの間にか年を取ったのか、ある日突然そうなった感じ。

└

フレームを使ってウェブチャットを作ったことがある。テキスト用の無限にロードされる上部と、メッセージを送ったときにリロードしないために204を受け取る入力ボックスの下部。IE4+の時代では、これが一番エレガントな方法だったと思う。上部は、右側のフレームをリロードする小さなものも受け取れた。楽しい時代だったな。2000年頃にクラスメートと一緒に使ってた気がする。

└

そこにいたし、（ほとんど）これをやったことがある。Silverlightは使ったことないけど、VRMLやJava Applets、Chromeffectsは使ったことがある。画像マップを手書きで作って、Photoshopから直接ポイント座標を取得してたのも覚えてる。バージョン管理については、変更を加える前にウェブサイトのバックアップを作ることを早い段階で学んだ。私たちのバージョン管理は/site/yyyymmdd/だった。

└

フレームって覚えてる人いる？俺は週に何回もフレームのサイトに行くんだけど、Open Group/POSIXの人たちには、今は使っちゃダメって誰も教えてないみたいだね。

└

Photoshopのスライスツールを使って、HTMLテーブルにぴったり配置されるGIFをエクスポートしてたのを覚えてる。デザインは800x600に最適だったな。あの瞬間たちが、雨の中の涙のように失われていく。

└
└

俺は、これらの瞬間が雨の中の涙のように失われていくって言われると思ってたよ。

└

フレームを使ってウェブソフトを開発してたことがあって、当時はそれが全然問題ないと思ってた。今でもフレームの何が問題なのかよくわからない。たまにスクリーンリーダーのアクセシビリティについて言われるけど、それ以上の具体的なことは聞かないから、実際の問題が何なのかは謎のまま。

└

IE6をサポートしなきゃいけないクライアントのために働いてた時のことを思い出す。あの狂ったバグや制限があって、デザイナーが丸角のPhotoshopデザインを渡してくるたびに絶望してた。しかもレスポンシブにしなきゃいけなかったから（当時は主にデスクトップのサイズが違うだけだったけど）。角を切り取ってテーブルセルに配置する必要があったんだ。こういう手作業をすることで、開発者としてのタフさが身につくんだよね！

└

お前らが信じられないようなことを見てきた。オリオンの肩で燃える攻撃艦。タンハウザーゲートの近くで暗闇に光るCビームを見た。あの瞬間は時間の中で失われていく、まるで…。

└

ボーダー半径が出る前に、丸いコーナーの流体ビューを作ったことを覚えてる。

Hacker Newsで議論の続きを見る