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

HTMLのマーキー

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

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

　たとえば、<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のマーキー