動く文字は<MARQUEE>タグではなくJavaScriptを使用する | デザインってオモシロイ -MdN Design Interactive-

動く文字は<MARQUEE>タグではなくJavaScriptを使用する

2026.4.25 SAT

【サイトリニューアル!】新サイトはこちらMdNについて


Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。




動く文字は<MARQUEE>タグではなくJavaScriptを使用する


 ブロードバンド化に伴い最近ではFlashで制作されているサイトが多くなってきた。Flash Playerプラグインの普及率も高くなり、制作会社がFlashで制作することをためらう必要はないといえる。しかし、Flashを使う必要がないが動きをつけたいという場合も出てくるであろう。そんなときはHTMLやJava Scriptを使用して簡単な動きを表現すればよい。

 ブラウザで文字要素を自動スクロールさせたい場合、<MARQUEE>タグを使用すれば簡単に制作できる。しかし、この<MARQUEE>タグは、ブラウザによって対応しているブラウザと対応していないブラウザがある。以前のNetscape Navigatorなどのブラウザでは動かずに表示されたりと意図しない表現になってしまう。

 すべてのブラウザでこの機能を実装させたい場合は、JavaScriptを使用して実現させるとよい。【1】は自動スクロールさせるためのJavaScriptの一例である。JavaScriptを使用すれば、すべてのブラウザで対応させることができるし幅広く応用して使用できるので、文字要素を自動スクロールさせる場合はこの方法をオススメする。


var msg = " 動く文字は<MARQUEE>タグではなくJavaScriptを使用する "
//上部に表示させたい文字列を入力する。

var delay = 200
var timerId
var i = 0
function formMsg()
{if (i <= 700)
{i++
document.forms[0].banner.value = msg
msg = msg.substring (2, msg.length) + msg.substring (0, 2)
timerId = setTimeout("formMsg()", delay)}
}
【1】文字要素を自動スクロールさせるJavaScriptの一例

解説:横山 剛

(※本文中、及びキャプション内で使用している「<」、「>」は、全角になります。ご注意ください。)





twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在