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


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
携帯サイトのページを作成する場合と、パソコン向けのページでは
よく使用するHTMLタグがまったくといっていいほど異なります。

今回は携帯サイトを作成する際によく使うHTMLタグのご紹介です。

まずは、携帯ページとPC向けページについて、
使用頻度の高いタグを比較してみます。

□PC向け
<A>リンクタグ
<IMG>画像挿入タグ
<P>段落タグ
<DIV>汎用ブロックレベル
<STRONG>論理強調タグ
<Hx>見出しタグ
<UL><LI>リストタグ
<TABLE>テーブルタグ

■携帯サイト向け
<A>リンクタグ
<IMG>画像挿入タグ
<DIV>汎用ブロックレベル
<BR>改行タグ
<FONT>フォントタグ
<HR>区切り/水平線タグ
<CENTER>中央揃え
<MARQUEE>マーキータグ

どうでしょう。だいぶ違っていますね。
AタグやIMGタグといった基本的なタグはPC向けもモバイル向けも同じですが、携帯端末のブラウザではやはりHTMLタグそのものの対応やスタイルシートの対応がPCに比べ大幅な遅れをとっています。これが使用タグの違いの大きな要因のようです。

つまり、携帯サイトだからというのではなく、
単に機能上の制限による使用タグの違いを生み出していると言う点に着目すべきなのでしょう。

では、実際に上に挙げたタグについて説明していきます。

まず、PタグとBRタグ。
Pタグはブロックレベル要素のため、要素の上下に1行分の余白が生まれます。本来、ブロックレベル要素だからと言って要素の上下に余白が必要だと規定されているわけではないのですが、多くのブラウザ(携帯ブラウザ)を含め、そういった挙動になります。

この余白はCSSで調整が可能であるという点、さらに、SEO等でPタグが重視される傾向にあることから、PタグはPC向けサイトではよく使われます。一方、携帯サイトでは、外部CSSがauにしか対応しておらず、Pタグで余白の調整ができません。そのため、携帯サイトで余白を作るのに、BRタグが用いられるという背景があります。

次に、DIV要素。
PC向けではIDやクラス指定によって、CSSでボックスを定義する場合がほとんどです。しかし、既述の理由により、携帯サイトでは、CENTERタグでは制御できない左右揃えのために、DIV要素はもっぱら「align属性」を指定するにとどまります。

次に、STRONGタグ。
論理強調タグ、Bタグは多くのブラウザでは太字で表示されます。しかし、携帯サイトでは、これらのタグで囲っても太字で表示されないので、使う意味があまりありません。ちなみに、これらのタグが太字で表示されなければならないという規定があるわけではありませんので、携帯ブラウザのバグではありません。なお、携帯SEOが今後流行ることを予測すると、STRONGタグは使用しておくのも良いかもしれません。

次に、リストタグ。
こちらもPC向けでは、SEO対策の一環として、よく用いるのですが、携帯サイトでは使いません。リストタグを使用すると、左に余白ができますが、これも既述の理由で、調整が不可能なため使用しません。常に1行表示が求められる携帯サイトでは、左に余白ができると1行で表示できる文字数が減るため、これが使われない大きな要因です。

次に、TABLEタグ。
TABLEタグは、段組に使用する超メジャーなタグ。しかし、入れ子でソースが複雑化する・SEOに不向きといった理由からPCサイトでもあまり使用されなくなってきました。携帯サイトではTABLEタグが使用できる端末は割と新しいものではないと、内容が表示されない可能性が大きく、さらに入れ子などは御法度になります。

次に、フォントタグ。
PC向けでは、CSSを用いて、SPANやDIVタグで指定するのが普通。一方携帯サイトでは、既述の理由により、FONTタグで代用する古い手法が用いられます。

次に、HRタグ。
区切り線は、PCサイトでは全くと言っていいほど使用しません。CSSやTABLEタグで代用することが可能なため、あまり使われていないのが現状です。携帯サイトでは、既述の理由により、CSS及びTABLEタグが不可のため、線を表示するのに多用します。
ちなみに、携帯ブラウザでは「noshade:影なし」は対応していないようです。さらに、「size="1"」では、auが正しい表記をする一方、ドコモは「size="1"」でもあきらかに「size="2"」で表示されるような…また、「size="2"」以降でauでは影が表示されますが、ドコモは影自体が表示されないようです。

次に、CENTERタグ。
要素を中央揃えするのに、このタグを用いるのはいささか古い。PC向けではDIV要素で指定するのが普通です。携帯サイトではDIV要素でも指定ができるのですが、一部機種が未対応のため、中央揃えにこのタグがよく使用されます。

次に、マーキータグ。
こちらは過去の記事に詳しく書いたので、そちらを参考にしてください。





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


TABLEタグ
とても参考になりました。
ワードプレスでモバイルサイトと連動させているのですが、
TABLEタグを使用しており、表示されないというお声を聞いておりました。
TABLEタグが表示されない携帯は、まだまだあるんですね。。。
名古屋・岐阜のホームページ制作 | URL | 2009/12/15/Tue 11:30 [EDIT]
頑張って下さい。
参考に為ります。ありがとうございます
携帯マスター | URL | 2009/08/28/Fri 13:37 [EDIT]
モバイルでの太字
こんにちは! タグの件の記事、ありがたいです。
太字なんですが、どうしてこんなに頻繁使われる(ワープロなどでも通常にありますよね?)太字が携帯には対応していないんですか?なにか理由はあるのでしょうか?

またこのような記事もありますが(ちょっと古い記事ですが)
http://plusd.itmedia.co.jp/mobile/articles/0605/19/news098.html
対応している携帯もあるってことでしょうかね?

私の携帯では太字になりませんし、各社のシュミレーターでも太字表示されませんのであきらめていますけど、
太字が対応されていないのも納得いきませんー。
ToMo | URL | 2008/10/29/Wed 19:11 [EDIT]
タグの説明ありがとうございますわかりやすかったです!
| URL | 2008/09/10/Wed 01:28 [EDIT]
こちらこそ
蒼井さん、はじめまして。

よくブログ拝見させていただいています。
こちらこそ、勝手にリンクなんぞ。失礼いたしました。

今後もよろしくお願いします。
シバ犬@管理人 | URL | 2006/12/02/Sat 11:37 [EDIT]
はじめまして。
携帯サイトの情報を集めようとブラブラしてたらたどり着きました。
当ブログにリンクを貼ってくれているようで・・・ありがとうございますm(_ _)m

記事を拝見させて頂きましたが、かなり詳しく書かれていますね。
私も参考にさせて頂きます。
蒼井 | URL | 2006/10/27/Fri 22:39 [EDIT]
コメントありがとうございます
今後も有用な情報を掲載できるようにがんばります。
シバ犬@管理人 | URL | 2006/10/20/Fri 16:58 [EDIT]
こちらのサイトは本当に参考になります。
ありがとうございます。これからも頑張ってください。
タニティ | URL | 2006/10/20/Fri 14:11 [EDIT]
こんばんは。私も日記ですがブログ書いています。
よければ一度見に来てください。
携帯HPも作りたいと考えていたので、参考にさせてもらいます♪
Iたん | URL | 2006/10/10/Tue 21:31 [EDIT]



TRACK BACK
TB*URL





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

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