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

エ・ビスコム・テック・ラボ
2008/08/13 20:14

マーキー(marquee)は文字のスクロールを実現する機能だ。古くからホームページを作っている方には懐かしい機能かもしれない。今回はCSS 3で提案されているマーキーの機能を紹介しよう。

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

 Safariではoverflowプロパティの値を「-webkit-marquee」と指定すると、コンテンツがボックス内で右から左にスクロールする。ボックスにスクロールバーなどは表示されない。

Safariでの表示 Safariでの表示
div	{
	overflow: -webkit-marquee;
	white-space: nowrap; 
	width: 200px;
	border: solid 1px gray;
	}
<div>あいうえお。かきくけこ。さしすせそ。たちつてと。なにぬねの。</div>
ブラウザで表示を確認する

OperaがサポートしたCSSマーキー

 Operaでは、overflowプロパティを「hidden」と指定し、displayプロパティを「-wap-marquee」と指定すると、コンテンツがボックス内で右から左にスクロールする。しかし、標準ではコンテンツを1回表示するとスクロールが終了してしまう。

 そこで、次のサンプルでは「-wap-marquee-loop: infinite」と指定してスクロールを無限に繰り返すように設定している。無限の繰り返しに対応しているのはOpera 9.5以上となっているので注意してほしい。

Operaでの表示 Operaでの表示
div	{
	overflow: hidden;
	display: -wap-marquee;
	-wap-marquee-loop: infinite;
	white-space: nowrap; 
	width: 200px;
	border: solid 1px gray;
	}
<div>あいうえお。かきくけこ。さしすせそ。たちつてと。なにぬねの。</div>
ブラウザで表示を確認する

 なお、OperaWCSS(Wireless profile Cascading Style Sheet)という規格に従ってマーキーの機能をサポートしている。WCSSはモバイル機器向けのスタイルシートの規格として、WAPフォーラム(現Open Mobile Alliance)がリリースしたものだ。そのため、プロパティ名や値には「-o-」ではなく「-wap-」をつけて記述する。

 次回は、スクロールの速度や繰り返しの回数などを指定するCSS 3のマーキーのオプション設定について紹介したい。

  • コメント(1件)

#1 tomita  - 2008/08/18 18:08

builder編集部の冨田です。いつもご愛読頂きまして、ありがとうございます。 本記事に訂正個所がございます。 2ページ目の「Open Mo... 続きを見る
» 不適切なコメントを報告する
記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文(必須) :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ