☆　流れる文字（マーキー） ☆

マーキーを使うとＨＰが華やかになるよ♪ どんどん文字を流してみよう！

流れる画像はこちら

～ の間は普通にタグが使えるので、
太字にしたり、改行したり、お好みに合わせて変更してみよう！

■ 流れる文字 （width=文字が流れる幅 scrollamount=流れる速さ color=文字色）　　文字の装飾について

◇ ノーマルタイプ ◇

流れる文字

<MARQUEE width="500" scrollamount="6">流れる文字</MARQUEE>

◇ 斜体 ◇

斜体にする

<MARQUEE width="500" scrollamount="6">斜体にする</MARQUEE>

◇ 太字 ◇

太字にする

<MARQUEE width="500" scrollamount="6">太字にする</MARQUEE>

◇ フォントサイズ ◇

文字の大きさを変える

<MARQUEE width="500" scrollamount="6">文字の大きさを変える</MARQUEE>

◇ フォントサイズ・斜体 ◇

文字の大きさを変えて、斜体にする

<MARQUEE width="500" scrollamount="6">文字の大きさを変えて、斜体にする</MARQUEE>

◇ フォントサイズ・太字 ◇

文字の大きさを変えて、太字にする

<MARQUEE width="500" scrollamount="6">文字の大きさを変えて、太字にする</MARQUEE>

◇ フォントサイズ・太字・斜体 ◇

文字の大きさを変えて、太字の斜体にする

<MARQUEE width="500" scrollamount="6">文字の大きさを変えて、太字の斜体にする</MARQUEE>

■ 書体を変える (<MARQUEE>タグに style="font-family : 好きな書体;" を追加)　　　　書体を選ぶ

width=文字が流れる幅　scrollamount=流れる速さ　color=文字色　size=文字の大きさ

書体を変える

<MARQUEE width="500" scrollamount="6" style="font-family : HGP創英角ﾎﾟｯﾌﾟ体;">書体を変える</MARQUEE>

■ 背景を変える (bgcolor=背景色 background=背景画像)

◇ 背景色を付ける ◇

width=文字が流れる幅　scrollamount=流れる速さ　color=文字色　size=文字の大きさ

背景色を付ける

<MARQUEE width="500" scrollamount="6" bgcolor="#f0f0f7">背景色を付ける</MARQUEE>

◇ 背景画像を付ける ◇

○○.gif の部分で背景画像を指定してください。

背景画像を付ける

<MARQUEE width="500" scrollamount="6">背景画像を付ける</MARQUEE>

○○.gif の部分で背景画像を指定してください。

背景画像を付ける

<TABLE background="○○.gif">
<TBODY>
<TR>
<TD><MARQUEE width="500" scrollamount="6">背景画像を付ける</MARQUEE></TD>
</TR>
</TBODY>
</TABLE>

◇ 額縁風 ◇

○○.gif の部分で背景画像を指定してください。

額縁風にしてみました♪

<TABLE background="○○.gif" bordercolor="#cbe0b1" cellspacing="5" cellpadding="3" border="1">
<TBODY>
<TR>
<TD bgcolor="#f3f9f2"><MARQUEE width="300" scrollamount="6">額縁風にしてみました♪</MARQUEE></TD>
</TR>
</TBODY>
</TABLE>

○○.gif の部分で背景画像を指定してください。

こちらの額縁もプリティ～♪

<TABLE bgcolor="#c9d9b5" bordercolor="#b5cb9a" border="2" cellpadding="3" cellspacing="3">
<TBODY>
<TR>
<TD bgcolor="#f2ede6" background="○○.gif"><MARQUEE width="300" scrollamount="6">こちらの額縁もプリティ～♪</MARQUEE></TD>
</TR>
</TBODY>
</TABLE>

■ 流れ方を変える

◇ スライド　（右から左へ流れて止まる） ◇

※プラウザの更新ボタンで確認してみてください

<MARQUEE>タグに behavior="slide" を追加

スライド（右から左へ流れて左端で止まる）

<MARQUEE width="500" scrollamount="6" behavior="slide">スライド（右から左へ流れて左端で止まる）</MARQUEE>

◇ 往復運動 ◇

<MARQUEE>タグに behavior="alternate" を追加

往復運動（ゆ～らゆ～らゆ～ら）

◇ 往復運動　額縁風 ◇

<MARQUEE>タグに behavior="alternate" を追加するだけで、額縁風も簡単に出来るよ！

○○.gif の部分で背景画像を指定してください。

額縁風ゆらゆら♪

<TABLE background="○○.gif" bordercolor="#cbe0b1" cellspacing="5" cellpadding="3" border="1">
<TBODY>
<TR>
<TD bgcolor="#f3f9f2"><MARQUEE width="300" scrollamount="6" behavior="alternate">額縁風ゆらゆら♪</MARQUEE></TD>
</TR>
</TBODY>
</TABLE>

■ 流れる方向を変える

◇ 左から右へ流れる ◇

<MARQUEE>タグに direction="right" を追加

左から右へ流れる

<MARQUEE width="500" scrollamount="6" direction="right">左から右へ流れる</MARQUEE>

◇ 下から上へ流れる ◇

<MARQUEE>タグに direction="up" を追加　width=幅　height=高さ

下から上へ流れる

<MARQUEE width="200" height="100" scrollamount="2" direction="up">下から上へ流れる</MARQUEE>

◇ 下から上へ流れる　額縁風 ◇

額縁風にしてみました♪

文字装飾タグを使って、太字にしたり 斜体にしたり思いのままです。
気の向くままに画像だって流してしまおう！

<TABLE bordercolor="#cbe0b1" cellspacing="8" cellpadding="3" border="1" bgcolor="#e0edd1" background="○○.gif">
<TBODY>
<TR>
<TD bgcolor="#fafcfa"><MARQUEE width="200" scrollamount="2" height="100" direction="up">額縁風にしてみました♪ 文字装飾タグを使って、太字にしたり 斜体にしたり思いのままです。 気の向くままに画像だって流してしまおう！ <center><IMG src="○○.gif"></center></MARQUEE></TD>
</TR>
</TBODY>
</TABLE>

◇ 上から下へ流れる ◇

<MARQUEE>タグに direction="down" を追加　width=幅　height=高さ

上から下へ流れる

<MARQUEE width="200" height="100" scrollamount="2" direction="down">上から下へ流れる</MARQUEE>

■ 流れる回数を指定する 　※プラウザの更新ボタンで確認してみてください

◇ 流したい回数を指定 ◇

<MARQUEE>タグに loop="流したい回数" を追加
※ スクロールの場合は指定回数流れた後、消えます。

流したい回数を指定する（３回流れて止まる）

<MARQUEE width="500" scrollamount="12" loop="3">流したい回数を指定する（３回流れて止まる）</MARQUEE>

◇ ゆらゆらしたい回数を指定 ◇

<MARQUEE>タグに loop="ゆらゆらしたい回数" を追加
※ 指定回数ゆらゆらした後、止まります。

ゆらゆらしたい回数を指定する

<MARQUEE width="300" scrollamount="10" behavior="alternate" loop="10">ゆらゆらしたい回数を指定する</MARQUEE>

☆ 流れる文字（マーキー） ☆

☆　流れる文字（マーキー） ☆