教室で作成している ホームページのトップ画面に 「変化を付けたいな」 と思って
文章の一部にスクロール (右から左に文字が動いて止まる) を入れてみようと・・・
編集のHTML画面を開き、動かす文字の前後にスクロールソースを書き加えました。
● 右から左に動かして、左で止める方法
<marquee behavior="slide">文字</marquee> を書き加える
<marquee behavior="slide">☆</marquee>
そうしたら・・・あれ?
背景枠の外側から文字が現れてしまったのです。
だから・・・さらに余白 hspace="30" を書き加えて、
背景枠のところから文字が現れるようにしました。
<marquee behavior="slide"hspace="30">文字</marquee> を書き加える。
<marquee behavior="slide"hspace="30">☆・・・余白を入れたので、背景枠から表れて端の手前で止まりました。</marquee>
それから・・・今後の参考にと、他のスクロールも調べてみました。
● 右から左に動かす方法
<marquee>文字・画像</marquee> を書き加える。
<marquee>☆</marquee>
● 左から右に動かす方法
<marquee direction="right">文字・画像</marquee> を書き加える。
<marquee direction="right">☆</marquee>
● 左右往復させる方法
<marquee behavior="alternate" loop="-1">文字・画像</marquee> を書き加える。
<marquee behavior="alternate" loop="-1">☆</marquee>
● 上から下へ動かす方法
<marquee direction="down">文字・画像のパス</marquee> を書き加える。
下から上に動かすときは direction="up" にする。
動いてから止めたいときは、この後に behavior="slide" を付け加える。
縦の長さを指定したいときは、さらに height="長さの数字" を付け加える。
<marquee direction="up" behavior="slide" height="120">
☆
☆
</marquee>
上下左右に動かす方法
<marquee direction="down" behavior="alternate">
<marquee behavior="alternate">
<文字・画像>
</marquee>
</marquee> を書き加える。
<marquee direction="down" behavior="alternate">
<marquee behavior="alternate">
☆
</marquee>
</marquee>
頑張ってスクロール画面を作り、編集のプレビュー画面で作動を確認。
「ちゃんと動いてるので、これで良し!!」 と、このブログに投稿。
なのに、投稿後の画面を見ると・・・
「あれ?」 動いていません。
「なぜかなぁ~?」 と考えてみたら・・・そうでした。
忘れていました。
ベータバージョンで作ると・・・投稿した時に、自分で作ったソースが反映されずに
文字のまま残ってしまうという事を。
でも、せっかくスクロールの勉強をしたので
このまま記録として、残しておくことにします。
文章の一部にスクロール (右から左に文字が動いて止まる) を入れてみようと・・・
編集のHTML画面を開き、動かす文字の前後にスクロールソースを書き加えました。
● 右から左に動かして、左で止める方法
<marquee behavior="slide">文字</marquee> を書き加える
<marquee behavior="slide">☆</marquee>
そうしたら・・・あれ?
背景枠の外側から文字が現れてしまったのです。
だから・・・さらに余白 hspace="30" を書き加えて、
背景枠のところから文字が現れるようにしました。
<marquee behavior="slide"hspace="30">文字</marquee> を書き加える。
<marquee behavior="slide"hspace="30">☆・・・余白を入れたので、背景枠から表れて端の手前で止まりました。</marquee>
それから・・・今後の参考にと、他のスクロールも調べてみました。
● 右から左に動かす方法
<marquee>文字・画像</marquee> を書き加える。
<marquee>☆</marquee>
● 左から右に動かす方法
<marquee direction="right">文字・画像</marquee> を書き加える。
<marquee direction="right">☆</marquee>
● 左右往復させる方法
<marquee behavior="alternate" loop="-1">文字・画像</marquee> を書き加える。
<marquee behavior="alternate" loop="-1">☆</marquee>
● 上から下へ動かす方法
<marquee direction="down">文字・画像のパス</marquee> を書き加える。
下から上に動かすときは direction="up" にする。
動いてから止めたいときは、この後に behavior="slide" を付け加える。
縦の長さを指定したいときは、さらに height="長さの数字" を付け加える。
<marquee direction="up" behavior="slide" height="120">
☆
☆
</marquee>
上下左右に動かす方法
<marquee direction="down" behavior="alternate">
<marquee behavior="alternate">
<文字・画像>
</marquee>
</marquee> を書き加える。
<marquee direction="down" behavior="alternate">
<marquee behavior="alternate">
☆
</marquee>
</marquee>
頑張ってスクロール画面を作り、編集のプレビュー画面で作動を確認。
「ちゃんと動いてるので、これで良し!!」 と、このブログに投稿。
なのに、投稿後の画面を見ると・・・
「あれ?」 動いていません。
「なぜかなぁ~?」 と考えてみたら・・・そうでした。
忘れていました。
ベータバージョンで作ると・・・投稿した時に、自分で作ったソースが反映されずに
文字のまま残ってしまうという事を。
でも、せっかくスクロールの勉強をしたので
このまま記録として、残しておくことにします。