HTML `<blink>` と `<marquee>` (2020)

 (danq.me)
1 ポイント 投稿者 GN⁺ 2025-06-09 | 1件のコメント | WhatsAppで共有
  • 1990年代の個人ホームページでは、「最新アップデート」を目立たせるために 点滅テキストやスクロールテキスト がよく使われており、この2つのタグは今では触れることの少ないウェブ文化の痕跡となっている
  • <blink> は 1995年に Netscape Navigator 2.0 に入ったタグで、Lou Montulli が発案者としてよく挙げられるものの、本人は実際の実装コードは書いていないと述べている
  • 同年、Microsoft Internet Explorer 2.0 は <marquee> を導入し、スクロール方向・速度・繰り返し・往復動作を制御する 属性ベースの効果 を提供した
  • 2つのタグを入れ子にすると、Netscape では点滅、IE ではスクロールが表示され、対応していないブラウザでもテキスト自体は読むことができた
  • <blink> は事実上消滅し、<marquee> は一部の現代ブラウザに残っているが、実際のウェブサイトではアクセシビリティとユーザビリティを損なう デジタル・ノスタルジー に近い

1990年代のブラウザが生んだ視覚効果競争

  • <blink> と <marquee> は、個人ホームページで注目を集めるための代表的な1990年代風ウェブデザイン要素だった
  • Macromedia Dreamweaver でさえ、<blink> を <marquee> で包むやり方をアンチパターンのように扱っていたようだ

  • <blink>: ジョークから広く使われるタグへ

    • <blink> の発明は通常 Lou Montulli の功績とされるが、彼は最終的な実装コードを自分では書いていないと述べている
    • Montulli は 1994年に Netscape に加わる前、テキスト専用ブラウザ Lynx を作った人物である
    • Netscape のエンジニアたちが提案していた視覚効果は Lynx では動かないと語り、両方のブラウザで可能な最も派手な効果はテキストを点けたり消したりすることだ、と冗談を言ったという逸話が残っている
    • その後、名前の明かされていない別のエンジニアが深夜作業で <blink> を追加した
    • Netscape Navigator 2.0 は 1995年に <blink> のサポートを追加し、同じ時期に animated GIF や JavaScript の初期形態も含んでいた
    • 使い方は <BLINK>This is my blinking text!</BLINK> のような、属性のない単純な構造だった
    • HTML4 勧告案が2年後に出るころには、<blink> は冗談として 文書化 されていたが、1990年代後半のウェブでは広く使われていた
    • 個人ホームページの「latest updates」という見出しや、ブロック全体を包む形で使われ、この時代の雰囲気は Cameron’s World で体験できる

  • <marquee>: Internet Explorer のスクロールテキスト

    • Microsoft は Netscape Navigator 2.0 と同じ年に Internet Explorer 2.0 をリリースした
    • Internet Explorer は当時 Netscape が実装した機能を追いかける段階だったが、<blink> の代わりに <marquee> を導入した
    • <marquee> は さまざまな属性 により、スクロール方向、速度、繰り返しの有無、前後に跳ね返る動きを制御できた
    • 例としては <MARQUEE>Oh my god this still works in most modern browsers!</MARQUEE> があり、一部の現代ブラウザでもいまだに動作する

2つのタグを重ねると何が起きたか

  • 1990年代後半には、強調したいコンテンツを <blink> と <marquee> の両方で包むやり方もある程度一般的だった
    • 例は <MARQUEE><BLINK>This is my really important message!</BLINK></MARQUEE> である
    • Netscape の利用者には点滅するテキストが見え、IE の利用者にはスクロールしたり往復移動したりするテキストが見えた
  • このやり方は、ブラウザが知らない要素を無視して描画を続けるというウェブの特性と噛み合っていた
    • Postel’s Law に従い、ブラウザは理解できない入力があっても、ユーザーに対して最善の描画を提供すべきだとされる
    • 現代の <video> 要素が自己終了タグではなくブロック形式である理由も、<video> を知らない古いブラウザが内部の代替コードを読めるようにするためである
  • どちらのタグも知らないブラウザでも、コンテンツのテキスト自体はそのまま読むことができた
    • 対応ブラウザにだけ派手な効果を加え、それ以外の環境には通常のテキストを残すという点で、プログレッシブ・エンハンスメント に近い
    • JavaScript や CSS も同じルールで適用でき、保守性とアクセシビリティの向上に役立つ

現在では歴史的な痕跡に近い機能

  • Netscape 7 は 2002年に <blink> と <marquee> の両方をサポートした珍しいブラウザだった
    • サポート順序や入れ子要素には厄介な点もあったが、一部の個人ウェブページではスクロールと点滅が同時に現れた
  • <blink> は 現在では事実上死んだタグ であり、どうしても必要なら CSS で似た効果を作れる
  • <marquee> は まだ生きている
    • polyfill だけでなく、一部ブラウザのネイティブサポートも残っている
    • それでも、実際のウェブサイトで <marquee> を使うのは避けるべきである
  • デジタル・ノスタルジーを楽しむ資料としては興味深いが、他のユーザーに点滅したり流れたりするテキストを押しつける理由はない

関連記事

1件のコメント

 
GN⁺ 2025-06-09
Hacker News のコメント

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

  • 3,000年前にもあったような気がする
    フレーム内でナビゲーションを使うのは悪い慣行かどうかで議論していた時代を覚えている。iframe ではなく、フレームのこと。AJAX 以前は、ページをリロードせずにサーバーへメッセージを送るために HTTP 204 を使っていたし、2000年代初めには Dreamweaver で国の地図の上に州境を何日もかけて描き、クリック可能な イメージマップを作っていた
    Dreamweaver テンプレートの更新で変更が消えても、バージョン管理がないので復旧する方法はなく、バックエンドで画像上のクリック位置を処理することもあった。Motion JPEG でページ更新をストリーミングし、IE で PNG のアルファブレンドを直そうと何段階も試した末に ActiveX 方式に頼ったりもした
    Java、Flash、Silverlight でサイトのナビゲーションを作り、スペーサー GIF や条件付きコメント、Firebug がどれほど救世主のようだったかも覚えている。いつ年を取ったのかは分からないが、ある日ただそうなっていた

    1. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
    • フレームでWebソフトウェアを作っていたし、まったく問題ないと思っていた。今でもフレームの実際の問題がよく分からない。たまにスクリーンリーダーのアクセシビリティが話題に出るが、具体的に何が問題なのかはいまだに分からない
    • IE6 をサポートしなければならないクライアント案件をやっていたが、数々のバグや制約の中で、デザイナーが角丸のある Photoshop カンプを渡してくるたびに絶望した
      レスポンシブ対応も必要だったが、当時は主にデスクトップのサイズ別対応で、たいていは角を切り出してテーブルセルに配置しなければならなかった。こういうことを手作業でやっていると、開発者として妙な耐性がつく
    • Photoshop の slice ツールで GIF を非常に精密に切り出し、HTML テーブルに正確に配置していたのを覚えている
      800x600 に最適化されたデザインばかりで、そのすべての瞬間は雨の中の涙のように時の中へ消えていった
    • 今でも週に何度もフレームを使っているサイトを訪れる。Open Group/POSIX 方面には、今どきフレームを使うべきではないと誰も教えていないようだ
    • フレームでWebチャットを作っていた。上側はテキストが無限に読み込まれる領域で、下側はメッセージを送ってもリロードされないように 204 レスポンスを受け取る入力欄だった
      IE4+ の時代には、それが最もエレガントな方法だった気がする

  • 昔作ったものだが、見せるたびに JavaScript がまったくないことに人々が驚く。すべてのアニメーションが marquee タグだけでできている: https://udel.edu/~ianozi/

    • marquee タグを20年くらい見ていない気がするので忘れていただけかもしれないが、direction パラメーターで縦スクロールができるとは知らなかった
    • https://no-js.abhij.it/

  • marquee で一番好きだったテクニックは、異なる方向に入れ子にすることだった
    内側の marquee を外側と反対方向に同じ速度で動かすと、内容がスクロールしてから止まったように見せられたし、さらに何段階も速度を交互に変えると、ランダムに跳ね回るような効果も出せた。これを動かすには、内側の marquee に最大幅を指定する必要があった気がする

  • marquee がとても便利な理由が一つある。HTML インジェクションだ
    marquee は動くし、意図的に使う人がほとんどいないタグなので、HTML インジェクション脆弱性をテストするときに攻撃が成功したかどうかを見分けやすい。非技術者にも「これは動いてはいけないのに動いている」という説明は、「このテキストは太字になってはいけないのに太字になっている」よりずっと伝わりやすい

    • HTML のサニタイズをするときは、イースターエッグとして marquee だけを許可リストに入れ、それ以外はほとんど許可しない
    • カスタムアグリゲーターで Hacker News を見ているのだが、この記事のおかげで自分のアグリゲーターが HTML インジェクションに脆弱だと分かった。画面上で (2020) が marquee のように流れていた
    • いつも <plaintext> タグを使ってきた。閉じられない要素なので、文書の残りを生の HTML に変えてしまい、とても目立つ
      https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

  • blink タグは当然ながら昔から大いに嫌われていて、実験的に使っていたブラウザのバイナリ、おそらく Netscape だったものから "blink" を探して "blonk" に置き換えてみた。じゃーん、もう点滅しなくなった

    • バイナリ編集は昔も今もかなり楽しい。gets() 周りの余計なお説教を黙らせるために "__gnu_warning" を "__gnu_whining" に変えたのを覚えている
      もちろんバッファオーバーランはあるだろうが、使い捨てのプログラムを書いているなら、単にバッファを超えなければいい
    • Slack クライアントにもこんなふうに手を入れた。Electron アプリの利点があるとすれば、本当に簡単だという点で、気に入らない機能を消せる
      例えば通知の非表示や、自分がメッセージを書いている最中だというシグナルを送る機能を切った

  • 「獣は復讐の渦巻く雲に包まれて現れるであろう。信じぬ者たちの家は崩れ落ち、彼らは地の底まで焼かれるであろう。彼らのタグは終末の日まで点滅するであろう」
    about:mozilla の The Book of Mozilla, 12:10 に出てくる一節で、今や Mozilla が地の底まで燃えている。終わりだ

    • それでもまだ Firefox をメインブラウザとして使っている

  • 友人は、エスケープ漏れや潜在的な XSS を素早く確認するために、自分のミドルネームをタグで囲む方法をいつも使っていた。昔はこれで驚くほど問題をよく見つけられた

  • このコメントは工事中です。更新を見るにはこまめに再訪してください

    • アクセスカウンターとゲストブックはどこ？
    • このページはどのブラウザに最適化されていますか？
    • [NEW] もお忘れなく

  • 人々がこうした要素を嫌う理由の一つは、乱用されたからだ
    だがその乱用のおかげで、多くの人が HTML を自分で試してみた。HTML を初めて使う人にとって、blink や marquee を試すのはかなりやりがいのあることで、HTML の世界への入門ドラッグのような存在だった
    こうした要素を使っていた人も、結局は使うべきではないと学んだはずだ。あるいは mySpace のページだったので、そのまま使い続けたかもしれない。blink と marquee を笑うのは簡単で、グラフィックデザイナーが Comic Sans を使う人を見下すのに似ているが、こうしたタブーは、人々が「ちょっとやってみよう」という自信を得るうえで大いに役立っていた