WordPressサイトでテロップを流したい

　テキストや図形が横に流れるように動ていく、いわゆるテロップみたいなものを設置してみたい。

　昔はHTMLタグの「marquee」（マーキー）でできたんだけど、今はCSS（スタイルシート）を使うんだって。

<marquee>タグは非推奨
スタイルシートでテロップを流してみよう
新規取得・移管+レンタルサーバー利用でドメイン更新料が無料になる月額1,000円以下のレンタルサーバー

<marquee>タグは非推奨

ｼｲちゃん

　テロップを流すのって、昔は<marquee>タグを使ってたよね。

　<marquee>タグは元々、IE専用のタグだったんだって。

　<marquee>タグに対応していないブラウザは、JavaScriptを使って、テロップを流していたらしいよ。

ｼｲちゃん

　今、IEは使わないもんね。

　そうすると、JavaScriptを使わないと、webページ上でテロップは流せないのかな？

　今はCSSを使えば、ほとんどブラウザ関係なくテロップのようにテキストを流すことができるみたいだよ。

スタイルシートでテロップを流してみよう

ｼｲちゃん

　早速やってみようよ。

　まずはテロップを流すためのHTMLの記述からだね。

　HTMLは下の記述だよ。

<!-- HTML・テロップを流す -->
<div class="marquee-block"><!-- "marquee-block"は表示する範囲（背景） -->
<div class="marquee-item">テロップを流すよ</div><!-- "marquee-item"は動かす対象 -->
</div>

ｼｲちゃん

　次はスタイルシートの記述。

/* CSS・テロップを流す */
.marquee-block {
max-width: 100%;
background-color: #ddd;
overflow: hidden;
}
.marquee-item {
width: 100%;
animation-name: marquee;
animation-duration: 10s;
animation-direction: alternate;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes marquee {
0% { translate: 100%; }
100% { translate: -100%; }
}

これは見本：テロップを流すよ

　スタイルシートの説明をするね。

.marquee-block⇒親要素

max-width⇒ 背景の幅・PX又は% で指定

overflow: hidden;⇒子要素の最大幅の分だけ右側を隠す

.marquee-item⇒子要素

animation-name: marquee⇒ 任意の名前

animation-duration⇒ スクロールする速さ

animation-direction⇒方向
reverse⇒逆方向に再生。一回の周期が終わると終了時点に戻る。
alternate⇒再生するごとに反転します。一回の周期が終わるとその時点から折り返して逆方向に進む。
alternate-reverse⇒逆方向から始まり再生するごとに反転。

animation-timing-function
ease⇒中央に向けて加速し、最後に向けて減速。
linear⇒最初から最後まで一定の速度で動く。
ease-in⇒ゆっくりと始まり終了に向けて加速。
ease-out⇒加速した状態で始まり終了に向けて減速。
ease-in-out⇒ゆっくりと始まり中央に向けて加速し、終了に向けて減速。
cubic-bezier(x1, y1, x2, y2)⇒曲線に動かす。それぞれ0から1の間の数値で指定。
steps(n, <jumpterm>)⇒コマ送り。

animation-iteration-count⇒スクロールする回数
infinite＝アニメーションを無限に繰り返す
number＝アニメーションを繰り返す回数を数値で指定、小数点を含む場合は、アニメーションの途中で再生を中断して開始地点に戻る、初期値1

0% { translate: 100%; }⇒ 開始の位置0%、終了位置100%

100% { translate: -100%; }⇒ テロップの幅