なつかしのHTMLタグ「marquee」--CSS 3のマーキーを検証してみる
マーキー(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のマーキー
- 6人の推薦記事
- 4人がクリップ
-
ソーシャルブックマーク(-)
- トラックバック(0)
-
- タグ
- HTML
- マーキー
- CSS
- スクロールバー
- Internet Explorer 8
- プロパティ
- Opera
- Internet Explorer
- WebKit
- W3C
- Safari
- XHTML
- Firefox
- Open Mobile Alliance
- html/css
- marquee
- WCSS
- -wap-marquee
- overflow: scroll
- Internet Explorer 2.0
- scrollbar
- overflow-style
- WAPフォーラム
- -webkit-marquee
- display
- overflow
- hidden
- html
- CSS 2
- CSS 2.1
- Opera 9.5
- CSS 3
- Webデザイン
- コメント(1件)
- 特集: FirefoxとSafariのCSS徹底検証 (59件)
- ホワイトペーパー
- 企画特集
中小企業のセキュリティリスクとは?
今注目の「サジェスト検索」−デモ掲載中
セキュリティ&ユーザ事例【SIer Club】
SOA、BPM、SaaS −今、企業に必要なこと
ロリポップ!がリニューアル
【徹底対談】運用管理ツールの賢い使い方
インターネット上の悪意を未然に防ぐには?
パンデミック対策特集
集積度も性能も、業界最高水準のブレードPC
ストレージメディア特設サイト開設
御社のログ活用しませんか!?
そのストレージで仮想化に対応できますか?
ESBでIT投資の無駄を劇的に解消する
仮想環境を実現するソリューション特集
◆エン・ジャパン厳選求人☆毎週更新◆
- ■ストレージ容量50%削減保証■
- サービス・ドリヴン・データセンター
- サーバー監視・運用のコストを削減するには
- エンタープライズにおけるSUSEの強み
- 話題のタグ
#1 tomita
- 2008/08/18 18:08:57
Windows 7はLinuxへの切替が簡単:注目の仮想ディスクフォーマット「VHD」
iPhone OS 3.0で変わった「絵文字」
OSSのクラウド基盤「Eucalyptus」を使う(4)--インストール〜ノード構築
俳優経験者が指南する「人前で上手く話すためのティップス10選」
「うるまでるびペイント」登場:絵は上手下手ではなく制作過程に楽しみが
待てば回路の日和あり--「iPhone 3GS」発売、しかし――