MARQUEEの応用

MARQUEEはMARQUEE要素の属性やスタイルシートの指定、さらには他の要素を組合わせるといろいろなことができます。

※ 各サンプルは Internet Explorer での表示を基に作成していますので他のブラウザでは表示が乱れるかもしれません。

スクロールメッセージの応用例
画像を動かす
- 画像のスクロール
いろいろなものを動かす
- 動くテーブル
- リンクやボタンなど
ある要素の中で動かす
- テーブルの中を動く文字
- ボタンの中を動く文字
その他
- 点滅する文字

スクロールメッセージの応用例

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

◆実行結果: 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>

いろいろなものを動かす

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>

MARQUEEの応用サンプル