テンプレートとアクセスアップのでめらら楽天日記

marquee（マーキー）講座(01)

ＨＯＭＥ >> マーキー >>marquee（マーキー）講座(01)

マーキー解説
文字や画像に簡単に動きを付けることができるのが<marquee>（マーキー）です。 flashやjavascriptを使った動画のようなスムーズな動きはできませんが、工夫次第ではホームページに独特の雰囲気を与えてくれます。ただし、これを多用しますと、タグソースがムダに大きくなって、検索エンジンに拾ってもらいにくくなったり、自分自身もリニューアルしにくくなったりしますし、何よりも見ていただいている「訪問者」の方にとって「ピカピカ、チラチラ」と見づらいページになってしまい、再訪問してもらえなくなるページになる恐れがあります。おおむね画面右から左、左から右、上から下、下から上へと流れていく<scroll>（スクロール）することが基本的な動きですが、組み合わせることによって斜めに動かしたり、ランダムな動きを作ることも可能です。たとえば、上から下という動きの中に左右の往復の動きを加えますと、左右に揺れながら落ちる「落ち葉」のような動きを作ることができます。 ↓【←左右に往復しながら→】↓下に落ちていくしかし、所詮パソコンの動き、本物の「落ち葉」と違ってカクカクしながらの動きになりますので、移動幅やスピードなどを変えてやりこれをなるべくスムーズに見せるようにしたりします。そのための要素は整理しますとその種類はそうは多いものではありません。 ■<marquee>　文字や画像をスクロールさせる場合に指定できる要素（でめららtips 3-5スクロールと点滅で代表的なものがでています） <marquee width="幅px" height="高さpx" hspase="左右の余白px" vspace="上下の余白px" bgcolor="背景色#123456" >おのおのを指定する位置です</marquee> 1.）スクロール範囲の設定（画面のなかのどこの範囲で（位置も含めて）マーキーを使うかを決めます。） □ width ="幅"（ピクセル数または%で指定）---スクロール範囲の幅の大きさを指定 □ height ="高さ"（ピクセル数または%）---スクロール範囲の高さを指定 □ hspase ="左右の余白"（ピクセル数）---スクロール範囲の余白を指定（左右） □ vspace ="上下の余白"（ピクセル数）---スクロール範囲の余白を指定（上下） □ bgcolor ="背景色"（カラーコードまたはカラーネーム）---スクロール範囲の背景色を指定 <marquee behavior="scroll" direction="up" loop="10" scrolldelay="50" truespeed scrollamount="3" >横切り動作を下から上に10回繰り返します。速さは50/1000秒で3ピクセルづつ動きます</marquee> 2.）スクロールの動きを設定（どのような動きになるかはこれらで決めます） □ behavior ="動き方" （指定がない場合「デフォルト」はscroll） (1)scroll 片側から出てきて横切る繰り返し (2)slide 片側から出てきて端まで来ると停止 (3)alternate 左右（上下）に往復させる □ direction ="移動の方向"（指定がない場合「デフォルト」はleft） (1)left 右から左へ移動 (2)right 左から右へ移動 (3)up 下から上へ移動 (4)down 上から下へ移動 □ loop ="回数" （指定がない場合は無限）回数スクロールの繰り返し回数を指定 □ scrolldelay ="間隔" （指定がない場合は85）秒数（1/1000秒単位）スクロールのスピードに影響します。数値が小さいと速く、大きいと遅く移動します。 □ truespeed 、scrolldelayを59以下に設定する場合は、truespeedを行います（例：<marquee scrolldelay="40" truespeed>スクロール文字</marquee>） □ scrollamount ="移動距離" （指定がない場合は6）ピクセル数スクロールのスピードに影響します。数値が大きいと速く、小さいと遅く移動します（小さいほど動きはなめらかになります）

マーキー解説

文字や画像に簡単に動きを付けることができるのが<marquee>（マーキー）です。
flashやjavascriptを使った動画のようなスムーズな動きはできませんが、工夫次第ではホームページに独特の雰囲気を与えてくれます。
ただし、これを多用しますと、タグソースがムダに大きくなって、検索エンジンに拾ってもらいにくくなったり、自分自身もリニューアルしにくくなったりしますし、何よりも見ていただいている「訪問者」の方にとって「ピカピカ、チラチラ」と見づらいページになってしまい、再訪問してもらえなくなるページになる恐れがあります。

おおむね画面右から左、左から右、上から下、下から上へと流れていく<scroll>（スクロール）することが基本的な動きですが、組み合わせることによって斜めに動かしたり、ランダムな動きを作ることも可能です。
たとえば、上から下という動きの中に左右の往復の動きを加えますと、左右に揺れながら落ちる「落ち葉」のような動きを作ることができます。

↓【←左右に往復しながら→】↓下に落ちていく

しかし、所詮パソコンの動き、本物の「落ち葉」と違ってカクカクしながらの動きになりますので、移動幅やスピードなどを変えてやりこれをなるべくスムーズに見せるようにしたりします。
そのための要素は整理しますとその種類はそうは多いものではありません。

■<marquee>　文字や画像をスクロールさせる場合に指定できる要素
（でめららtips 3-5スクロールと点滅で代表的なものがでています）

<marquee width="幅px" height="高さpx" hspase="左右の余白px" vspace="上下の余白px" bgcolor="背景色#123456" >おのおのを指定する位置です</marquee>

1.）スクロール範囲の設定（画面のなかのどこの範囲で（位置も含めて）マーキーを使うかを決めます。）

□ width ="幅"（ピクセル数または%で指定）---スクロール範囲の幅の大きさを指定
□ height ="高さ"（ピクセル数または%）---スクロール範囲の高さを指定
□ hspase ="左右の余白"（ピクセル数）---スクロール範囲の余白を指定（左右）
□ vspace ="上下の余白"（ピクセル数）---スクロール範囲の余白を指定（上下）
□ bgcolor ="背景色"（カラーコードまたはカラーネーム）---スクロール範囲の背景色を指定

<marquee behavior="scroll" direction="up" loop="10" scrolldelay="50" truespeed scrollamount="3" >横切り動作を下から上に10回繰り返します。速さは50/1000秒で3ピクセルづつ動きます</marquee>

2.）スクロールの動きを設定（どのような動きになるかはこれらで決めます）

□ behavior ="動き方" （指定がない場合「デフォルト」はscroll）
(1)scroll 片側から出てきて横切る繰り返し
(2)slide 片側から出てきて端まで来ると停止
(3)alternate 左右（上下）に往復させる

□ direction ="移動の方向"（指定がない場合「デフォルト」はleft）
(1)left 右から左へ移動
(2)right 左から右へ移動
(3)up 下から上へ移動
(4)down 上から下へ移動

□ loop ="回数" （指定がない場合は無限）回数スクロールの繰り返し回数を指定
□ scrolldelay ="間隔" （指定がない場合は85）秒数（1/1000秒単位）スクロールのスピードに影響します。数値が小さいと速く、大きいと遅く移動します。
□ truespeed 、scrolldelayを59以下に設定する場合は、truespeedを行います（例：<marquee scrolldelay="40" truespeed>スクロール文字</marquee>）
□ scrollamount ="移動距離" （指定がない場合は6）ピクセル数スクロールのスピードに影響します。数値が大きいと速く、小さいと遅く移動します（小さいほど動きはなめらかになります）

--ＭＥＮＵ--