テーブル と marquee を使用した横スクロール

★　テーブル と marquee を使用した横スクロール




●　フリースペースに入れる（記事やメッセージボード、ルームにも配置可能）

<div id="MSG_scroll1">

<table width="200px" cellspacing="1" bgcolor="#ff00ff"><tbody><tr><td align="center"><font color="#ffffff">お知らせ</font></td><td width="140px" bgcolor="#000000"><marquee loop="infinite"><font color="#ff00ff">スクロールしたい文字</font></marquee></td></tr></tbody></table>

</div>

●　ＣＳＳへ追記（絶対配置したい場合）

/* ----------------------------------------------------- */

/* ■ スクロールメッセージの設定　　　　　　　　　　　　 */

/* ----------------------------------------------------- */

#MSG_scroll1{

position:absolute;

left:230px;/* 左からの位置 */

top:245px;/* 上からの位置 */

z-index:300;

}

●　フォントサイズを変えたい場合

/* ----------------------------------------------------- */

/* ■ スクロールメッセージの設定(フォントサイズ)　　　　 */

/* ----------------------------------------------------- */

#MSG_scroll1{

font-size:12px;

}

●　説明


◆　table

cellpadding=n　枠線とセルの内容の間の隙間をピクセル単位で指定します。
cellspacing=n　内枠の太さを指定。

①　<table width="200px"　全体の長さ
②　<td width="140px"　　 メッセージ部分の長さ
③　②は①より短くして、左側のお知らせは、①マイナス②　となります。
　　オーバーした場合は縦に長く表示されるので注意してください。

◆　marquee

loop="infinite" を指定した場合、無限に繰り返されます
　　　　　　　　指定しない場合も無限
loop="回数"　回数分のみ繰り返しされます。

direction="方向"　left right down upを指定

behavior="動作の仕方"
　behavior="scroll"　　　　 画面を横切る動作（繰り返し）
　behavior="alternate"　　　画面を往復する動作（繰り返し）
　behavior="slide"　　　　　端まで来ると停止

bgcolor="背景色"

scrolldelay="時間の間隔" 　　　　移動時間間隔（秒数単位は1/1000秒、初期値：85）
scrollamount="進む距離"　　　　　移動距離（初期値：6）

truespeed　　　　　　　　　　　　scrolldelayが59以下の場合に指定
truespeed　　　　　　　　　　　　scrolldelayが59以下の場合に指定







◆　例①

<div id="MSG_scroll1">

<table width="200px" cellspacing="1" bgcolor="#ff00ff"><tbody><tr><td align="center"><font color="#ffffff">お知らせ</font></td><td width="140px" bgcolor="#000000"><marquee loop="infinite"><font color="#ff00ff">スクロールしたい文字</font></marquee></td></tr></tbody></table>

</div>

お知らせ	スクロールしたい文字

◆　例② direction="left"

<div id="MSG_scroll1">

<table width="200px" cellspacing="1" bgcolor="#ff00ff"><tbody><tr><td align="center"><font color="#ffffff">お知らせ</font></td><td width="140px" bgcolor="#000000"><marquee direction="left" loop="infinite"><font color="#ff00ff">スクロールしたい文字</font></marquee></td></tr></tbody></table>

</div>

お知らせ	スクロールしたい文字

◆　例③ direction="right"

<div id="MSG_scroll1">

<table width="200px" cellspacing="1" bgcolor="#ff00ff"><tbody><tr><td align="center"><font color="#ffffff">お知らせ</font></td><td width="140px" bgcolor="#000000"><marquee direction="right"  loop="infinite"><font color="#ff00ff">スクロールしたい文字</font></marquee></td></tr></tbody></table>

</div>

お知らせ	スクロールしたい文字

◆　例④ behavior="scroll"

<div id="MSG_scroll1">

<table width="200px" cellspacing="1" bgcolor="#ff00ff"><tbody><tr><td align="center"><font color="#ffffff">お知らせ</font></td><td width="140px" bgcolor="#000000"><marquee behavior="scroll" loop="infinite"><font color="#ff00ff">スクロールしたい文字</font></marquee></td></tr></tbody></table>

</div>

お知らせ	スクロールしたい文字

◆　例⑤ behavior="alternate"

<div id="MSG_scroll1">

<table width="200px" cellspacing="1" bgcolor="#ff00ff"><tbody><tr><td align="center"><font color="#ffffff">お知らせ</font></td><td width="140px" bgcolor="#000000"><marquee behavior="alternate" loop="infinite"><font color="#ff00ff">スクロールしたい文字</font></marquee></td></tr></tbody></table>

</div>

お知らせ	スクロールしたい文字

◆　例⑥ behavior="slide"

<div id="MSG_scroll1">

<table width="200px" cellspacing="1" bgcolor="#ff00ff"><tbody><tr><td align="center"><font color="#ffffff">お知らせ</font></td><td width="140px" bgcolor="#000000"><marquee behavior="slide" loop="infinite"><font color="#ff00ff">スクロールしたい文字</font></marquee></td></tr></tbody></table>

</div>

お知らせ	スクロールしたい文字

◆　例⑦ scrolldelay="40" scrollamount="13"

<div id="MSG_scroll1">

<table width="200px" cellspacing="1" bgcolor="#ff00ff"><tbody><tr><td align="center"><font color="#ffffff">お知らせ</font></td><td width="140px" bgcolor="#000000"><marquee scrolldelay="40" scrollamount="13" loop="infinite"><font color="#ff00ff">スクロールしたい文字</font></marquee></td></tr></tbody></table>

</div>

お知らせ	スクロールしたい文字

◆　例⑧ scrolldelay="210" scrollamount="2"

<div id="MSG_scroll1">

<table width="200px" cellspacing="1" bgcolor="#ff00ff"><tbody><tr><td align="center"><font color="#ffffff">お知らせ</font></td><td width="140px" bgcolor="#000000"><marquee scrolldelay="210" scrollamount="2" loop="infinite"><font color="#ff00ff">スクロールしたい文字</font></marquee></td></tr></tbody></table>

</div>

お知らせ	スクロールしたい文字

●　絶対配置で、複数設定したい場合は、MSG_scroll1 を順番に　MSG_scroll2 　MSG_scroll3 と
　数字を上げて行ってください