ものぐさ父さんの子育て

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

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

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

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

<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>

♪ ♪ ようこそ お越しくださいました ♪ ♪ 　　　ご意見もおきかせくださいね ♪　　　

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

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