超初心者向けアフィリエイト入門
〜 楽天で始めるアフィリエイト 〜
beginners006_文字をスクロールさせるには?
日付: 2004年12月1日水曜日時間: 14:29:55
題名: beginners006_文字をスクロールさせるには?
文字を左右・上下にスクロールさせるには
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 が正しく設置されていれば、「▽スクロールさせる文章をここに挿入△」という文章が右から左へとスクロールされるはずです。