よく使う／使わないHTMLタグとCSS

よく使う／使わないHTMLタグとCSS

　携帯サイトでは、PCサイトと同じようなタグやCSSを使うことはできますが、よく使う／使わないHTMLタグとCSSは、はっきりとしています。

　XHTML-MPで使用できるHTMLタグについては「モバイル機器向けXHTML仕様：My First HDML（http://www001.upp.so-net.ne.jp/hdml/wap2/xhtml/spec.html）」にわかりやすくまとめられていますので、参照ください。

　まず、携帯サイトでは、1画面に表示できる領域が非常に限られているので、わざわざ初期状態でインデントが出るリスト系（ul／li／ol）タグや、ブロック要素（blockquoteなど）を使用することはあまりありません。HTMLは構造を示すだけなので、CSSで対応すれば良いのでは？と思われるかもしれませんが、ボックス系（margin／padding）CSSがドコモでは多くのHTMLタグで未対応なので使用しません。

　また、strongタグやCSSのfont-weightセレクタは適用させても太字にならない機種がほとんどです。HTMLの容量が増えるだけなので、あまり使用しませんが、strongタグなどSEOに意味のあるマークアップは変わらなくてもとりあえず使用しておくという考え方もあります。

　複雑な構造を持つtableタグなども使用しにくいと言えます。tableタグは現在の端末では問題なく表示されますが、古い機種ではtableタグそのものに対応していない端末もまだまだ多く、あまり使用すべきではありません。使用したとしても、tableタグ入れ子はできません。

　さらに、各キャリアで使えるCSSがHTMLタグによって異なっているという事態が起こっています。例えば、auではtextareaタグにheightプロパティを適用した場合、問題なくCSSが適用されるのに、hrタグにはheightプロパティが効かないといったこともあります。また、ドコモではdivタグやspanタグでCSSが有効なことが多いこともあります。こういったノウハウは制作をしていくうちに身につけていくしかありません。

　以上をまとめると、実は携帯サイトで使用するタグやCSSはそれほど数はないことに気がつくはずです。例えば、HTMLタグでは、<body>、<head>、<html>、<br />、<div>、<p>、<span>、<a>、<form>、<input>、<select>、<option>、<textarea>、<img>、<hr>、<meta>、<style>程度です。携帯サイトでは見た目がかなり重視されるので、マークアップに凝るよりも、基本的なタグとそれらで使えるCSSをよく理解しておく方が賢いといえます。

サンプルサイトの構成

　図2のサンプルサイトの構成を見ていきましょう。サンプルコードはこちらからダウンロード（http://www.thinkit.co.jp/images/article/143/2/14321.zip）できますので、参照ください（14321.zip/4.22 KB）。なお、今回の絵文字はドコモの絵文字（バイナリ入力）を使用しています。

　それでは、各ソースについて説明します。head>内にリンク関連のスタイルを記述します。font-sizeプロパティによる文字下げはbodyタグではなく、divタグに書きます。ただし、xx-smallはソフトバンクでは2段階下がる機種もあります。電光掲示板のような流れ文字は「display:-wap-marquee;」のWCSSで行います。同時に背景色や文字色も指定できます。絵文字を入れると見た目が良くなります。

　ロゴ画像を中央に表示するには、divタグで囲み、「text-align」と「align属性」を並記します。これは古い機種にも対応させるためです。imgタグにはドコモでもmarginプロパティが使用できるので上下に余白をとっています。検索窓の横幅は「width」指定が良いのですが、ドコモでは非対応なので「size属性」も並記します。ちなみに送信ボタンに直感的表現と絵文字を入力すると検索率が上がるそうです。

　区切り線は<hr>タグを用います。auとドコモ、ソフトバンクで色の表現方法などが異なりますので注意してください。これについては第3回で詳しく説明します。メニューの部分では階層を視覚的に表すために「├」のようなけい線を、また文字数を同じにするために半角カナをうまく多用し、調整しています。これについては第4回で詳しく説明します。

　フッターには口コミをねらった「友達に教える」やお問い合わせに対応する直メールや携帯サイト利用者へ配慮した対応機種やプライバシーポリシーのリンクを載せることも重要です。さらに、あまり目立たせる必要のないリンクとの区別に絵文字をあえて使用しないなどの配慮もあると良いでしょう。こちらも第4回で詳しく説明します。