なつかしのHTMLタグ「marquee」--CSS 3のマーキーを検証してみる

エ・ビスコム・テック・ラボ
2008-08-13 20:14:00
  • このエントリーをはてなブックマークに追加

HTMLのマーキー

 マーキーの機能はInternet Explorerがバージョン2.0の時代に独自拡張したもので、<marquee>というHTMLタグで文字のスクロールを設定する仕組みになっている。現在でも、<marquee>タグはバージョン8(ベータ版)を含むInternet Explorerや、Firefox、Safari、Operaといった主要なブラウザでサポートされている。

 しかし、W3CのHTMLやXHTMLの標準規格には含まれておらず、実際に利用される機会はほとんどないのが現状だ。

 たとえば、<marquee>〜</marquee>でマークアップした文字は次のように右から左にスクロールを繰り返す。

<marquee>による文字のスクロール <marquee>による文字のスクロール
<marquee>あいうえお。かきくけこ。さしすせそ。たちつてと。なにぬねの。</marquee>
ブラウザで表示を確認する

CSS 3のマーキー

 CSS 3の草案「CSS Basic box model」では、ボックスに収まらないコンテンツを表示する方法の1つとしてマーキーを利用することができる。

 前回の記事で紹介したように、ボックスに収まらないコンテンツの表示はoverflowプロパティで指定する。たとえば、CSS 2や2.1で「overflow: scroll」と指定すれば、ボックスにスクロールバーを表示してコンテンツ全体を閲覧することができる。

スクロールバーを表示してコンテンツ全体を閲覧できるようにしたもの スクロールバーを表示してコンテンツ全体を閲覧できるようにしたもの
div{
overflow: scroll;
white-space: nowrap; 
width: 200px;
border: solid 1px gray;
}
<div>あいうえお。かきくけこ。さしすせそ。たちつてと。なにぬねの。</div>
ブラウザで表示を確認する

 これに対し、CSS 3では「overflow: scroll」と指定したときに、overflow-styleプロパティでスクロールの方法を指定することができる。

 たとえば「overflow-style: scrollbar」と指定すれば従来のようにボックスにスクロールバーを表示するが、「overflow-style: marquee」と指定すればボックス内でコンテンツがスクロールするようになる。

 しかし、現状ではoverflow-styleプロパティをサポートしたブラウザはなく、SafariとOperaがCSS 3の草案をベースに独自の形でマーキーをサポートしている。

SafariがサポートしたCSSのマーキー

  • コメント(1件)
#1 tomita   2008-08-18 18:08:57
builder編集部の冨田です。いつもご愛読頂きまして、ありがとうございます。
本記事に訂正個所がございます。

2ページ目の「Open Mobile Alliance」を当初、「Opera Media Alliance」と記載して
おりましたので、修正いたしました。

ご迷惑をおかけしました読者の皆様ならびに関係各位に深くお詫び申し上げます。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]