携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
XHTML+CSSで一歩進んだモバイルサイトを作るテクニックを幅広く紹介☆
このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
マーキータグ。marquee tag。

この言葉を耳にすると、多くのHTML作成の経験者やWEBデザイナーは、ちょっと憂鬱な気分になります。

電子掲示板のように動的に文字を画面上でスクロールさせることのできるマーキータグは、パソコン向けのホームページでは、常に煙たがられるちょっとかわいそうな存在です。
少し話を脱線させると、マーキータグを使用したページを、パソコン向けのホームページではあまり見かけないのには、ちょっとしたワケがあります。

マーキータグを詳しく説明すると、マーキータグは文字を画面の一方から一方へ流れるように表示させることのできるマークアップです。

電子掲示板のようなものと言えば分かるでしょうか。
下記がその例です。

この文字は画面を横方向に移動する

HTMLタグの中では、コンテンツを動的に表示することのできる数少ないタグなのですが、文字が画面上で動くので、読みにくいと感じられるかもしれません。

そう、そこが問題なのです。


パソコンの画面は携帯画面に比べれば、はるかに大きな画面なので、そもそも文字を動かす必要がないのです。マーキータグを使うにはあまりにも画面が大きすぎて、文字が流れ終わるまでに時間がかかってしまいます。

このような不便さや見にくさから、PC向けのホームページでは「ユーザビリティを低下させるタグ」として毛嫌いされることが多く、WEBデザイナーなどの間では最も使用されないタグと言えるかもしれません。

ところが、この「MARQUEE TAG」。

携帯画面にはとっても重宝するタグなのです。
携帯電話の画面サイズには物理的な制約があり、1行に表示できる文字に制限があります。携帯電話にもよりますが、全角でせいぜい10字程度です。

携帯電話の画面では、この文字数を超えると、文字が自動的に改行されて表示されます。
しかし、文章によっては改行を伴って表示させたくない場合もあります。

このときにマーキータグが大活躍します。

マーキータグを使用することによって、本来なら画面からはみ出てしまう文字数でも、文字を一方向に遷移させることによって1行で表示させることができるようになります。

もうお気づきだとは思いますが、携帯電話のような小さな画面だからこそ、マーキータグは使用されるのであり、そのような場合に効力を発揮するんですね。

なお、マーキータグを使用するには、スクロールしたい文を以下のように記述すればOKです。

<marquee>この文字は画面を横方向に移動する</marquee>



マーキータグは、属性によって流れる方向や、動き方、背景などを別途指定できます。以下のサイトで、好みに合わせたタグと属性を生成できます。

マーキータグ作成ツール - TAG INDEX



ただし、すべての属性が携帯で対応しているとは限りません。詳しくは、各携帯会社のリファレンスを見てみましょう。

また、3キャリア対応サイトを作成する際の注意ですが、ドコモの端末ではマーキータグで指定する文字数に制限があります。

具体的には、64バイトまでの表示しかできませんから、マーキータグでスクロールできる文字数は、すべて全角であれば32文字までとなります。





管理者にだけ表示を許可する


すいません揚げ足取りですが
 > 電子掲示板のようなものと言えば分かるでしょうか。

これは「電掲示板」の間違いではないでしょうか。電掲示板では BBS の意味になっちゃいますから。

marquee が嫌われるもうひとつの理由は、もともと IE の独自タグで、しかも W3C 勧告の標準規格外である、というのも大きかったですね。事実上 IE でしか marquee が正常に表示されない時代というのが何年かありましたから。

今は Firefox に代表される Gecko系ブラウザも利便性に折れる形で marquee を実装しましたし、Opera 9.2 でも marquee が動作します。Safari 1.0.3 で試してみたら残念ながら何も表示されませんでした。しかし、お書きになっているように、特に携帯向け用途で便利なタグとして市民権が復権してきた印象がありますね。

このエントリは文字数に関して参考になりました。古い記事にコメントしてしまい、失礼いたしました。
Kats | URL | 2007/05/26/Sat 22:27 [EDIT]



TRACK BACK
TB*URL





Copyright © 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-. all rights reserved.

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