builder by ZDNet Japanをご愛読頂きありがとうございます。

builder by ZDNet Japanは2022年1月31日にサービスを終了いたします。

長らくのご愛読ありがとうございました。

なつかしの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のマーキー

ブログの新規登録は、2021年12月22日に終了いたしました。

folllow builer on twitter
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]