1570991 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

ものぐさ父さんの子育て

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

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

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 が正しく設置されていれば、「▽スクロールさせる文章をここに挿入△」という文章が右から左へとスクロールされるはずです。

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


© Rakuten Group, Inc.