CSSを使わなくても、HTMLだけでテキストや画像を動かす方法の紹介です。
<marquee>動くテキスト</marquee>
とHTMLで記述すると以下のようになります。
アフィリエイトの商品説明の際に使ったり、アイキャッチ的な意味合いで用いる事ができます。
もし、自動で改行されてしまう場合は、
<nobr>改行させたくないテキスト</nobr>
とする事で改行されるのを防ぐ事ができます。
上記と合わせると、
<nobr><marquee>動くテキスト</marquee></nobr>
というような記述になります。
もし、改行させたい場合は、改行させたい箇所に<br>を記述すればOKです。
<marquee>1行目<br />2行目<br />3行目</marquee>
これはテキストで表示していますが、画像<img>でも同じように動かす事が可能です。
【<marquee>】の使用バリエーション
1.左から右
<Marquee direction="right">左から右に動くテキスト</marquee>
2.左右移動
<Marquee behavior="alternate">左右に動くテキスト</marquee>
3.下から上に移動
<marquee direction="up" width="300" height="100" >指定した範囲を<br />下から上に<br />動きます。</marquee>
<marquee direction="doown">にすると上から下に動きます。
4.動く速度を調整
<marquee scrollamount="50" truespeed="">動く速度を調整</marquee>
数値を大きくすると早くなります。小さくすると遅くなります。(早く:50、遅く:2を指定しています。)
5.背景をつける
<marquee bgcolor="yellow">文字が動く部分の背景を黄色にする。</marquee>
いくつかのバリエーションをコンビネーション
<marquee bgcolor="red" direction="up" height="50" scrollamount="2" truespeed=""><marquee behavior="alternate">コンビネーション</marquee></marquee>
【<marquee>】の使い方アドバイス
テキストを動かす方法は、CSSで調整する事もできますが、HTMLで動かす方法は、特定の記事の特定の箇所(テキストor画像)のみを動かしたい場合に重宝します。
アフィリエイトリンクのボタンなどはCSSによってアニメーション化させた方が、のちのち管理が楽なので上手に使い分けて下さい。