ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > タグのお勉強 > title - 流れる文字をつくる

流れる文字をつくる

流れる文字の見本

文字が左から右へ・下から上へと動いている物ってありますよね。 ☆このように文字が流れてる☆
文字が流れているとどうしても目が行ってしまうので、ピンポイントで目立たせるためには効果的ですよね。乱用は逆効果になるので止めた方が無難です。今回はこれの作り方を紹介します。

これはmarqueeタグという物を使います。ただしブラウザの種類によっては動かない物もあるので、少しだけ注意です。

流れる文字のつくり方

流したい文字をここに書く
流したい文字をここに書く


<marquee width="430" height="40" direction="left" 
scrollamount=5 bgcolor="#EEE8AA">
<font color="#000000" size="3">
流したい文字をここに書く<br>
流したい文字をここに書く<br>
</font>
</marquee>

1つずつ説明していきたいと思います。
・まず上からmarqueeは流れる文字の基本タグです。 
・width="430"は横幅の長さ。 
・height="40"は縦幅の長さ。
・direction="left"は左から右に文字を流すタグ。
右から左、上から下、下から上はleftの部分が変わります。
・scrollamount=5は文字を流す速さ。数字が大きい程速くなります。
・bgcolor="#EEE8AA"は背景の色。
・font color="#000000"は文字の色 。
・size="3"は文字の大きさです。

必ずしもこれだけ全部書かなくても、<marquee>流したい文字をここに書く</marquee>だけでも動きます。ただ色や文字などを全ておさえた形の物を紹介した方がわかりやすいし、自分が使わないものは省けばいいのであえてこの様に紹介しました。
この部分がスクロールします
これが何も付け加えない物の見本です。

●右から左へは[direction="right"]

ε=ε=ε=ε=ε=(o- -)o

<marquee width="100%" direction="right" scrollamount="6" bgcolor="#B0E0E6">
<font color="#000000">
ε=ε=ε=ε=ε=(o- -)o
</font>
</marquee>


●下から上へは[direction="up"]

↑↑↑ ↑↑↑
<marquee width="50" height="150" direction="up" scrollamount="6" bgcolor="#B0E0E6">
<font color="#000000">
↑↑↑
↑↑↑
</font>
</marquee>


●上から下へは[direction="down"]

↓↓↓ ↓↓↓
<marquee width="50" height="150" direction="down" scrollamount="6" bgcolor="#B0E0E6">
<font color="#000000">
↓↓↓
↓↓↓
</font>
</marquee>


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
これはお奨めしてほしくない手法です
 流れる文字は読みづらいものです。「何かかっこいいですよね」とお奨めのように紹介されるのは、出来たら避けてくださいませ。

参考:
http://www.mars.dti.ne.jp/~fuming/contents/action.htm
http://www2.plala.or.jp/Cool/okite/gray02.html
http://www2.plala.or.jp/Cool/okite/gray01.html
http://www.zspc.com/documents/wcag10/#gl-use-w3c
http://www.w3.org/TR/WAI-WEBCONTENT/#gl-use-w3c
re;これはお奨めしてほしくない手法です
表現を改めさせていただきました。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/92-ec0283a8   

Template Designed by DW99