文字をスクロールさせるには？

文字を左右・上下にスクロールさせるには

HTML の複数ブラウザでの確認（ウェブブラウザーの互換性の問題例）でとりあげたみかんとバナナさんのトップページでは、<marquee> が使われていました。このタグのことはまったく知らなかったので検索してみたところ、HTMLタグリファレンスで詳しく説明されていました。Internet Explorerが独自に追加したタグのようですが、このページの表示例は Macintosh の Safari でも正しく表示されましたので本来なら動くはずなのですが、みかんとバナナさんのトップページでは、この部分も Safari ではうまく表示されませんでした。前述したようにHTMLタグリファレンスで動作を確認していたので、あれこれ変更して原因を探ってみました。

なぜかは、分かりませんが、hspace=100% を取り除いたら動くようです。以下の HTMLコードは、改行とタブで見やすくしていますが、みかんとバナナさんの書いているコードから hspace=100% を取り除いただけです。

みかんとバナナさんのトップページの HTML

<marquee scrollamount=3 loop=1>
	<font size=1 color="red">♪ </font>
	<font size=3 color="#AE007D">♪ ようこそ お越しくださいました ♪</font>
	<font size=1 color="red">♪ </font>
	<font size=3 color="#AE007D">　　　ご意見もおきかせくださいね</font>
	<font size=1 color="red">♪　　　 </font>

	<IMG SRC="http://plaza.rakuten.co.jp/img/user/53/48/7245348/1.gif" 
width="30" height="19.5" alt="わんちゃん">
	<font>　　</font>
	<IMG SRC="http://plaza.rakuten.co.jp/img/user/53/48/7245348/1.gif" 
width="22" height="14.3" alt="わんちゃん"> 
</marquee>

正しく設置されれば、以下のように表示されるはずです。

上記の HTML が正しく設置された時の表示例
♪ ♪ ようこそお越しくださいました ♪ ♪ 　　　ご意見もおきかせくださいね ♪　　　わんちゃん

この例は、文字サイズを変更させており、文字の後に犬の画像がついていくという凝ったものですが、もっとシンプルにすれば、以下のようになります。

<!-- ===== 文字のスクロール ===== -->
<marquee scrollamount=3 loop=1>
	<!-- ↓ここにスクロールさせる文章を挿入 -->
	▽スクロールさせる文章をここに挿入△
</marquee>
<!-- ===== /文字のスクロール ===== -->

<marquee> を正しく設置した時の表示例

上記の HTML が正しく設置されていれば、「▽スクロールさせる文章をここに挿入△」という文章が右から左へとスクロールされるはずです。

▽スクロールさせる文章をここに挿入△