スタイルシートで流れる文字を作るテクニック

携帯電話の液晶画面は、パソコンと違い、大変小さいため、一行に表示できる文字数も少なくなる。


なので、携帯サイト作りは、一行に表示できる文字数のことを考えながら進めていかなければならない。


携帯サイトでは、極力長い文章を避け、簡潔に短い文章で構成するのが望ましい。


絵文字などを交えて、文章を短文化していくのもひとつの方法だろう。

携帯サイトで何かの説明をするために長文になった時、


• 絵文字を使う。



• 改行を使って見やすくする。



• 文字色を変える。



• 文字の背景色を変える。

などをして、読みやすくしますが、

もうひとつ、例えば、サイトの長い説明文をTOPページに表示する場合などに有効なのが、流れる文字です。

PCサイトではほとんど見られなくなった横へ移動する文字のことですが、携帯サイトでは狭い液晶画面上に長い文章を横へ流していくため、まだまだ現役のテクニックです。


こんな感じ。ながーい文章を横に流して、携帯電話の狭い液晶画面で読みやすくします。

※アメブロでは、制限上上記の移動する文字は、<marquee>タグを使って表現しています。
携帯からこのブログを閲覧している方は、上記の「こんな感じ。～～読みやすくします。」という文字は流れません。
m(_ _ )m


流れる文字のタグの書き方ですが、

<div style="display:-wap-marquee;">流れる文字</div>











もしくは、











<span style="display:-wap-marquee;">流れる文字</span>











と記述します。











これは、CSSを使っての書き方です。

サイト制作環境は、DOCTYPE宣言に、「XHTML MOBILE PROFILE 1.0」。


同じように流れる文字を表現するタグには、<marquee>タグがありますが、上記の環境ではドコモでは使用できないようなので、CSSで表現することをおすすめします。