FAQ|HTML流れる文字を表示させる方法

FAQ|HTML流れる文字を表示させる方法

流れる文字を表示させるタグはどう記述する?

A 簡単なタグで記述できますのでコピーしてご利用下さい

流れる文字を使用する場合の注意点

 

目を引くような装飾は使いたくなるものですが、流れる文字をあまりたくさん使いすぎるとチープなサイトになってしまいます。もし使うなら、1ページにさりげなく1ヵ所くらいにしておいた方が良いです。

 

 

使い過ぎに注意しましょう!

 

流れる文字の記述HTML|黄色背景内をコピーしてご利用下さい

基本の流れる文字 [画面の右端から左端に流れ、繰り返す。デフォルト表示]

<marquee></marquee>・・・デフォルトの左流れスクロールタグ
scrollamount="3"・・・・・・・文字の流れるスピード [数字大でスピード速い]

スピード調節

 

<marquee scrollamount="5">数字で文字が流れるスピードを調整できます</marquee>

ブラウザの表示

数字で文字が流れるスピードを調整できます!この速さが5です。scrollamount="5"

 

画面の左端から右端に流れ、繰り返す

direction="方向"・・・方向にright記述で、文字が右へ流れる。
テキストは<b> [Bタグ] で太文字にしています。
流れるスピード・・5

流れる方向

 

<marquee scrollamount="5" direction="right"><b>文字を右方向に流します。</b></marquee>

ブラウザの表示

文字を右方向に流します。direction="right"

 

バックのカラーを青に変更した場合

バックグラウンドの行高さと色
  • バックグラウンド色・・・bgcolor="#0099cc" [青]
  • 1行の高さを変更・・・・line-height:300%;
    ※ ラインハイト300%でデフォルトの1行の3倍の高さになる
テキスト色は白/ボールド
  • フォントタグで記述する場合
    <font color="#ffffff"><b>テキスト</b></font>
  • インラインで記述する場合
    <span style="color:##ffffff"><b>テキスト</b></span>
文字の大きさ・・・20PX
流れるスピード・・7

バックカラー変更

 

<marquee scrollamount="7" bgcolor="#0099cc"><span style="color:#FFFFFF;font-size:20px;font-weight:bold;line-height:300%;">流れる文字列のバックグラウンドを変更</span></marquee>

ブラウザの表示

流れる文字列のバックグラウンドを変更

 

文字の動作を指定

文字の流れを [往復させる] と [端で止める] の記述
behavior="alternate"・・・behaviorは文字の動作を指定
  • alternate・・・文字の往復を指示
  • slide・・・・・・スクロールの端で停止させる
往復・太文字・右流れ・スピード6・フォント18PX / グレー

往復させる

 

<marquee scrollamount="6" behavior="alternate" direction="right"><span style="color:#686868;font-size:20px;font-weight:bold;">この表示は"alternate"で文字を往復させています。</span></marquee>

ブラウザの表示

この表示は"alternate"で文字を往復させています。

 

流れる文字のタグのまとめと、その他の動作指定

behavior="動作の仕方"・・スクロール動作の仕方
  • behavior="scroll"
    文字が流れる動作を繰り返す
  • behavior="alternate"
    文字が往復する動作を繰り返す
  • behavior="slide"
    文字が端まで来ると停止させる
  • direction="方向"
    スクロールの方向をleft/rightで指定(デフォルトは左で記述不要)
  • loop="回数"
    スクロールする回数(デフォルトは無限で記述不要)
  • scrolldelay="時間の間隔"
    再描画までの時間の間隔(単位は1/1000秒。値が大きいと遅く、値が小さいと速くなる。デフォルトは"85")
  • scrollamount="進む距離"
    再描画までに進む距離(単位はピクセル。値が大きいと速く、値が小さいと遅くなる。デフォルトは"6")

 

バックグラウンド / 文字表示
  • line-height="高さ"
    スクロール範囲の高さ(ピクセル、%で指定)
  • width="幅"
    スクロール範囲の幅(ピクセル、%で指定)
  • hspace="左右の余白"
    左右の余白(ピクセルで指定)
  • vspace="上下の余白"
    上下の余白(ピクセルで指定)
  • bgcolor="背景色"
    文字がスクロール部分の背景色