スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



  

文字を自動に横移動させる方法

第2回 サトリヒロシのCSS講座
今回は文字を自動に横移動させる方法です。
PC上で文字を自動で横移動させる場合
文字を<marquee>というタグを使うだけで簡単に移動させることが出来ます。

例1
<marquee>文字が横に移動する</marquee>

こんなに簡単なのにこの機能はPC上ではあまりみかけませんよね?
その理由は

文字を止める方法がない

そのためユーザビリティの面で問題があります(詳細は省略)。それを嫌って使われないのです。
しかし、このタグを使うメリットが大きいものがあります。それは携帯電話です。

携帯は画面が小さく、長い文章は勝手に改行されてします。
そのため、marqueeタグをうまく利用すれば、ある程度長い文章を1行に入れることができるのです。
嫌われ者のmarqueeタグが活躍できる場所があってよかった!

と、思いきや
なんと、docomo、au、SoftBankでそれぞれ動きが違ったり、ましてや動かないなんてことがあります。

しかし、それを解消する方法があります!それは、

display:-wap-marquee;です。

ここでようやくCSS講座になりました(笑)
これを移動したい文字に追加するとmarqueeタグと同じ動きします。

例2
<span style="display:-wap-marquee;">文字が横に移動する</span>

あれ?動いてないぞ!どうなってるんだ!?

その理由は、このCSSは携帯専用のCSSなんです。そのため、PC上では動きません。
確認したい方はお手数ですが携帯からご覧ください。
ただし、これだけだと1回しか動かなかったりするので
-wap-marquee-loop:infinite;なんて書いたりもするんですが、長くなるので詳細は後日書きます。

以上で第2回 サトリヒロシのCSS講座を終了します。
ご質問は気軽にコメント欄へどうぞ!

次回は、憎きInternetExplorer6をやっつける!です。
関連記事
スポンサーサイト



  

テーマ : WEBデザイン
ジャンル : コンピュータ

コメント

非公開コメント

検索フォーム
プロフィール

サトリヒロシ

Author:サトリヒロシ
ビジネスを重視した企画を支援したいエンジニアが、何かを書こうとするブログです。

サトリ潜伏先
サトリ倉庫

WEB関連の技術で調査リクエストがあればご連絡ください。

カレンダー
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
カテゴリ
最新記事
最新コメント
最新トラックバック
月別アーカイブ
RSSリンクの表示
リンク
QRコード
QRコード
FC2カウンター
スポンサードリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。