<Blink>と<Marquee> (2020)

 (danq.me)
1 ポイント 投稿者 GN⁺ 2025-06-09 | 1件のコメント | WhatsAppで共有
  • 90年代のウェブ黎明期に登場した <blink> と <marquee> タグ は、当時のウェブデザインを象徴する要素だった
  • <blink> タグは Netscape Navigator 2.0 で導入され、遊び半分の目的と美観の乏しさにもかかわらず広く使われた
  • Microsoft はこれに対抗して Internet Explorer に <marquee> タグを導入し、テキストアニメーションをより多様に制御できるようにした
  • 2つのタグをネストして使うと、ブラウザごとに異なるアニメーション効果を提供でき、プログレッシブエンハンスメント の事例として言及される
  • 現在 <blink> は消え、<marquee> も使用は推奨されないが、ウェブの歴史と オンライン・ノスタルジア の代表例として語り継がれている

序論: <blink> と <marquee> タグの回想

  • 最近、同僚のウェブ開発者との会話で HTML の <blink> と <marquee> タグについて冗談を言ったところ、相手の開発者がこの2つのタグを知らないことに気づいた
  • これらのタグは、今の若い開発者にはなじみが薄いが、かつては 90年代ウェブデザインの象徴的な要素 だった

<blink> タグの誕生背景と歴史

  • <blink> タグの考案者は、Lynx ブラウザを作った Lou Montulli だとよく言われるが、実際には彼自身が直接コードを書いたわけではないと明かしている
  • 彼の説明によれば、あるバーで Netscape のエンジニアたちと話していた際、Lynx のようなテキストブラウザでも使える「テキスト点滅効果」が冗談半分で提案され、それをもとに別のエンジニアが一晩で実装したという
  • 1995年に Netscape Navigator 2.0 で <blink> タグが正式に導入され、動く GIF や 初期の JavaScript とともに個人ウェブサイトの体験を形作る一因となった
  • <blink> タグは属性なしで使われ、HTML4 では公式に ジョーク用タグ として記録されているにもかかわらず、90年代後半には広く乱用された
  • 「最新アップデート」の強調など、さまざまなメッセージへの注目を高めるために多用された

<marquee> タグとブラウザ間競争

  • 同じ年に Microsoft が発表した Internet Explorer 2.0 は、Netscape の <blink> とは異なり、<marquee> タグを導入した
  • <marquee> タグは、スクロール方向、速度、繰り返しの有無など 多様な属性 でアニメーションを調整できる
  • <blink> が冗談めかして視覚的な可読性を損なう方向だったとすれば、<marquee> は意図的に効果を強調した
  • 90年代末には、2つのタグを組み合わせる方法—<marquee> の中に <blink>—が、ブラウザ別（IE と Netscape）に異なる効果を提供する手法として流行した

プログレッシブエンハンスメントとウェブ互換性

  • <blink> と <marquee> のネスト利用は、ウェブブラウザが未対応タグを無視し、内部コンテンツはそのままレンダリングする Postel’s Law（寛容の原則） と関係している
  • 新しい HTML 要素（<video> など）も、この理由から非自己終了タグが適用されることが多く、互換性の確保に役立っている
  • <blink>/<marquee> のようなタグを使う場合、タグを知らないブラウザでも情報コンテンツ自体は読むことができた
  • ウェブは、すべての利用者に情報を提供し、一部のブラウザだけが追加効果を楽しめるようにする プログレッシブエンハンスメント の考え方に基づいている

さまざまなブラウザでの変化とサポート

  • Opera の利用者は有料ライセンスを持っていても <blink> や <marquee> の効果をほとんど見ることはなかったが、コンテンツへのアクセスには問題がなかった
  • Netscape 7 は <blink> と <marquee> の両方をサポートしたほぼ唯一のブラウザで、スクロールと点滅を同時に実現でき、ウェブ上でもっとも目にしにくい効果を演出できた

結論: 現在の位置づけとウェブデザインの教訓

  • <blink> タグは現在 完全に姿を消しており（現代のブラウザでは非対応）、必要であれば CSS アニメーション で置き換えられる
  • <marquee> は一部ブラウザで依然として 標準サポートまたは polyfill が存在するにもかかわらず、使用は推奨されない
  • ウェブの歴史と過去のオンライン美学の象徴であると同時に、ウェブ標準と アクセシビリティ、保守性 に関する教訓的な事例として残っている
  • デジタル・ノスタルジアに関心があるなら、昔のウェブデザインに関する資料やサイトを参照するとよい

関連記事

1件のコメント

 
GN⁺ 2025-06-09
Hacker Newsの意見

  • 昔、下のリンクのようなサイトがあったのを覚えている https://web.archive.org/web/20201111125145/https://danq.me/2020/11/11/blink-and-marquee/

  • 自分は3,000年前からいたような気分の人間だ。フレームナビゲーションが悪しき慣行かどうかで激しく議論していた時代を覚えている（iframeではなくフレーム）。フレームを知っている人がいたらうれしい。AJAXが出る前は、HTTP 204を使ってページ更新なしでサーバーにメッセージを送る方法を自分で使っていた。2000年代初頭にはイメージマップも作っていた イメージマップ参考: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map。Dreamweaverで地図の境界線を何日もかけて描いて、クリック可能な国別地図を完成させたこともある。Dreamweaverテンプレートはバージョン管理を使っていなかったので、更新中に修正内容を丸ごと失って復旧不能になることも多かった。input type=imageで画像のクリック位置をバックエンド側で処理していた記憶もある。モーションJPEGを使ってページにストリーミング更新も実装したし、今でもChromeでは動くがFirefoxではやや不安定だ。IEでPNGのアルファブレンディング問題を解決しようとあれこれ試し、結局ActiveX版で少しは使えたが、フラットデザインが流行して不要になった。ナビゲーションにはJAVA、Flash、Silverlightまで全部使った。スペーサーGIF、条件付きコメント、Firebug登場後に開発環境がどれだけ楽になったかも鮮明に覚えている。いつの間に年を取ったのかわからないまま時間が流れていった感覚だ

    • 昔フレームでWebソフトウェアを開発していたが、特に問題は感じなかった。みんなアクセシビリティの話をするが、具体的にどこが問題なのか今でもよくわからない

    • IE6のあらゆる奇妙なバグや制限の中で、サポートを求める顧客のために働いていた記憶がある。デザイナーがPhotoshopで角丸デザインを渡してくるたびにため息をつかざるを得なかった。当時のレスポンシブとは、実際には複数のデスクトップ解像度に対応する程度のものだった。角を画像として切り出し、テーブルセルに直接配置しなければならなかった。こうした手作業で開発者の精神力が大きく鍛えられた気がする

    • Photoshopのsliceツールで画像を細かく分割してgifで書き出し、HTMLテーブルに正確に配置しようと苦労していた時代を覚えている。800x600解像度向けに最適化されたデザインが多かった頃だ。このすべての記憶が時の中に溶けて消えていったような気がする

    • 今でも何度か訪れるサイトでフレームを使っているところがある。Open Group/POSIXのサイトはいまだにフレームを使っている

    • フレームを使ってWebチャットを作ったことがある。上には無限に読み込み続けるチャット画面、下にはinput boxがあり、メッセージ送信時には204で再読み込みを防いでいた。上側のフレームには、ユーザー一覧のある右側フレームをreloadする小さなscriptも送れた。2000年ごろに友人数人と一緒に使っていた

  • 以前、純粋にmarqueeタグだけでアニメーションを実装したサイトを作ったことがある。JavaScriptはまったく使っておらず、誰かに見せるとみんな驚いた https://udel.edu/~ianozi/

    • marqueeタグを見なくなって20年は経つ気がするが、directionパラメータで縦スクロールもできることを知らなかった気がする

  • marqueeタグでいちばん好きだったトリックは、入れ子にして使うことだ。方向を変えて、内側のmarqueeを逆方向かつ同じ速度に合わせると、一瞬停止してまた動くような効果を出せた。速度を変えればもっと複雑な動きも実現できた。この方法を正しく動かすには、inner marqueeに最大幅を設定する必要があった記憶がある

  • 昔はblinkタグがあまりに嫌いで、使っていたブラウザ（たしかNetscape）のバイナリファイルでblinkをblonkに書き換えて、もう点滅しないようにしたことがある

    • 自分はこういうバイナリいじりを主にSlackクライアントでよくやる（Electronアプリなのでものすごく簡単）。自分が嫌いな機能（例: 通知を隠す、入力中シグナルを遮断するなど）も簡単に消せる

    • 誰かがblonkタグを使っていたら、今ごろblonkingが生まれていたかもしれない。かなり面白いハックだと思う

    • バイナリ修正はかなり面白い。__gnu_warningを__gnu_whiningに変えて、gets()の警告メッセージを消したりしていた。バッファオーバーランはまあ起きるかもしれないが、雑に作るコードではそこまで気にしない

  • marqueeタグはHTMLインジェクションのテストにとても便利だ。ほとんど誰も使わない動くタグなので、攻撃が成功したかすぐわかる。非技術者相手でも、本来動くはずのないテキストが動いているのを見せれば、boldのようなものよりはるかに簡単に危険性を理解してもらえる

    • HTMLサニタイズをするとき、イースターエッグ用にmarqueeだけホワイトリストに残し、他はほぼ全部ブロックしている

    • Hacker Newsをカスタムaggregatorで見ているのだが、この投稿でHTMLインジェクションに脆弱だとわかった。2020年の記事が画面をmarqueeで動き回っていた

  • 「獣は復讐の渦巻く雲に囲まれて現れるだろう。不信者の家は破壊され、彼らのタグは終わりの日まで点滅し続けるだろう。」— The Book of Mozilla, 12:10 (about:mozilla) という文句とともに、今Mozillaも消えつつあるのだと思う。まるで終末のようだ

    • 自分は今でもFirefoxをデフォルトブラウザとして使っている

  • 大学の寮フロアのWebサイトを自分のコンピュータで動かしていた時代を思い出す。marqueeで997語にも及ぶ長いメッセージを載せていて、そこには女性、憂鬱、哲学などについて延々と書いていた。メッセージの最後には!があり、それが隠しページへのリンクになっていた。結局、誰かがview sourceでその長文を読んでいるうちにそのページを見つけた

  • 友人はいつも自分のミドルネームをblinkタグで囲んで、escaping漏れや潜在的なxssを素早くテストしていた。昔はこういう単純なやり方でも脆弱性発見にかなり効果があった

  • このコメントは現在工事中です。頻繁に訪れて更新を確認してください

    • 訪問者カウンターとゲストブックはどこにあるのか気になる

    • このページはどのブラウザ向けに最適化されているのか気になる

    • [NEW]表示を忘れないでほしい