MARQUEEの応用サンプル

上方向スクロールメッセージ

◆実行結果

Hikky's Roomへようこそ！
ごゆっくりご覧くださいませ。 (^ ^)

◆ソース内容

<div style="background: #ffc; width: 300px; height: 100px;">
<marquee direction="up" scrollamount="2" scrolldelay="100" width="300" height="100">
<div style="text-align: center;">
<span style="color: #f09; font-weight: bold;">Hikky's Room</span>へようこそ！<br>
ごゆっくりご覧くださいませ。 <span style="color: #00f; font-weight: bold;">(^ ^)</span></div>
</marquee>
</div>

→参考：JavaScriptでは…

横方向スクロールメッセージ（電光掲示板風）

◆実行結果

・・・ご訪問ありがとうございました。 またのお越しをお待ちしております。・・・

◆ソース内容

<div style="color: #ff0; background-color: #000; width: 400px; padding: 6px; border: solid 4px; border-color:#999 #fff #fff #999">
<marquee scrolldelay="150" scrollamount="5" width="400">
・・・ご訪問ありがとうございました。またのお越しをお待ちしております。・・・
</marquee>
</div>

→参考：JavaScriptでは…

縦読み型スクロールメッセージ

◆実行結果

・
・
・
マ
｜
キ
｜
だ
よ
ん
！
・
・
・

◆ソース内容

<div style="color: #fff; background-color: #009; width: 30px; font-weight: bold; font-family: monospace;">
<marquee direction="up" width="30" scrolldelay="200">
<div style="text-align: center;">
・<br>・<br>・<br>マ<br>｜<br>キ<br>｜<br>だ<br>よ<br>ん<br>！<br> ・<br>・<br>・
</div>
</marquee>
</div>

画像のスクロール

◆実行結果

◆ソース内容

<marquee scrollamount="2" scrolldelay="60">
<img src="../img/butterfly1.png" alt="蝶" width="40" height="42">
</marquee>

動くテーブル

ブラウザのバージョンによってはTD要素にNOWRAP属性を指定しないと文字列が短く改行されてしまうようです。（IE5.5では不要なようです。）

※ 実行結果のテーブルにはソース内容の指定以外にこのサイトのスタイルシートが適応されています。

◆実行結果

動く文字

マーキーだよん！

◆ソース内容

<marquee behavior="alternate" scrolldelay="250">
<table border="1">
<tr><td nowrap>動く文字</td></tr>
<tr><td nowrap>マーキーだよん！</td></tr>
</table>
</marquee>

リンクやボタンなど

リンクやフォーム部品のボタンなども動かせます。ただし、意地悪な利用でしかないのは言うまでもありません。 ^^;　次の例は「逃げるリンク」です。（※ リンク先はトップページです。）

◆実行結果

逃げるリンク

◆ソース内容

<marquee behavior="alternate" scrolldelay="25" truespeed>
<a href="index.htm">逃げるリンク</a>
</marquee>

テーブルの中を動く文字

スクロールの方向が右または左の場合にはMARQUEE要素またはMARQUEE要素を置いたTD要素にCSSまたは属性でWIDTHを指定しないと実行されません。

※ 実行結果のテーブルにはソース内容の指定以外にこのサイトのスタイルシートが適応されています。

◆実行結果

マーキーだよん！

◆ソース内容

<table border="1">
<tr><td style="width:200px">
<marquee behavior="alternate" scrolldelay="250">マーキーだよん！</marquee>
</td></tr>
</table>

ボタンの中を動く文字

◆実行結果

マーキーだよん！

◆ソース内容

<button>
<marquee scrolldelay="250" width="80">マーキーだよん！</marquee>
</button>

→参考：JavaScriptでは…

点滅する文字

SCROLLAMOUNTとWIDTHを同じ値にすれば計算上は点滅になるはずなのですが、実際にはあまりうまくいきません。時々文字が欠けて表示されることがあるようです。SCROLLAMOUNTとWIDTHの値は点滅させるテキストの横幅よりやや大きめの値にしたほうが良いようです。

◆実行結果

点滅します。

◆ソース内容

<marquee scrolldelay="667" scrollamount="86" truespeed width="86">点滅します。</marquee>