こんにちは。10月の組織編成でブログビジネス部に異動になりました飯田です。

普段はディレクターしてますが、時にモバイルサイトのマークアップをするときがあります。以前、こちらのエントリーでモバイルサイトを作るうえでのノウハウを紹介していますが、本エントリーではもう少し実践的な「モバイルサイトで○○を表現するには」をすごく簡潔に紹介してみたいと思います。

ある程度の端末で正常に表示されることを確認していますが、一部を除いて正常に表示されない場合もありますがご了承ください。なお、本エントリーで紹介している記述はわかりやすいように style 属性を全てインラインで記述しています。

見出しに背景色

div タグ

XHTML 対応の端末であれば下記のタグで簡単に見出しに背景色をつけることができます。

<div style="background-color="#0000ff;">ほげほげ</div>

table タグ

table タグを使っても、同様に見出しに背景色を実現することができます。

<table width="100%" border="0" cellspacing="1" cellpadding="1" bgcolor="#0000ff">
<tr>
<td>ほげほげ</td>
</tr>
</table>

div 使用の見出しと、table 使用の見出しを見比べてみるとこのようになります。



div より table のほうが天地左右に若干余裕があるので、可読性はあがったと思います。

一部 table タグに対応していないキャリアがありますが、絵文字や記号を見出し前に置いたりすることで、レンダリングされない場合にも備えておくと良いかもしれません。

さらにアクセントを加えた見出し

見出しに背景色をのせるだけだとノッペリしてしまって、少々味気ないので下記のようにアクセントを加えてみます。

div タグ

<div style="background-color="#a0a0ff;"><span style="color:#0000ff;">:</span>ほげほげ</div>

table タグ

<table width="100%" cellpadding="1" cellspacing="0" border="0" bgcolor="#a0a0ff">
<tr bgcolor="#0000ff">
<td bgcolor="#0000ff"><span style="color:#0000ff;">:</span></td>
<td>ほげほげ</td>
</tr>
</table>

こんな感じにレンダリングされます。



少しは見出しっぽくなったでしょうか? 「: (コロン)」を背景色と同じ色にして、あたかも見出しの前にブロックが付いたように見せています。配色にセンスが無いのは執筆者の仕様です。

マージンを調整

PC では絶滅してる方法ですが、モバイルはマージン調整にスペーサーイメージ (透過 GIF) を使います (執筆時現在)。br や hr ではどうしてもキャリア間に差が出てしまうので、細かいマージン調整はスペーサーイメージに頼らざるを得ません。

<img src="spacer.gif" width="1" height="5" />

height 属性値で空けたい数値を指定します。当然、使用した分だけ画像ファイルがリクエストされることになりますが (このエントリーでも同様の指摘されています)、PV もそこそこでデザイン優先のページは多用しても仕方がない、と割り切ることもあります。

そのうちモバイルも CSS でマージンが調整できる日がくることを信じて……。

細い罫線

モバイルサイトの場合、安易に hr タグで罫線を引くと、キャリアによっては罫線の太さが違ったり上下のマージンの取り方・使用できる style 属性が異なったりと、意外とクセがあります。

分かりやすい例だと docomo は hr で size 属性値 に 1 を指定しても、見た目 2 px ぐらいの太さになると思います。そこで、スペーサーイメージを使ってこんな記述をします。

<div style="background-color:#0000ff;"><img src="spacer.gif" width="1" height="1" /></div>

しかし、このままでは罫線の上下がピッタリ詰まってしまいます。モバイルサイトの場合、なるべく余白を詰める傾向にありますが、必要余白というものもあると思いますので、最終的には

<img src="spacer.gif" width="1" height="2" />
<div style="background-color:#0000ff;"><img src="spacer.gif" width="1" height="1" /></div>
<img src="spacer.gif" width="1" height="2" />

といった具合に調整しています (間隔は適宜調整)。

ちなみにこの方法だと au 端末で罫線が太くなってしまうという現象がありますので、au だけ素直に hr を使う、といった感じに罫線は割とキャリアごとに気を遣ってコーディングする必要があります。

画像を使った罫線

よく破線 (シンプルな罫線以外) を引きたい、ということがあると思います。しかし、3キャリア対応サイトで破線を表現する場合、CSS では完全に対応できません。

なので、あらかじめ破線の横幅 240 px の画像を用意して、以下のように記述します。

<div><img src="line.gif" width="240" height="1" /></div>

いかがでしょうか? これらの簡単なマークアップだけで、モバイルサイトの見栄えも一段と違ってくると思います。また、これらを基礎にしてたくさんのバリエーションも作れると思うので、是非参考になればと思います。

ちなみにこれらを全て組み合わせると、このディレクターブログの見出しっぽいものもモバイルサイトでマークアップできます (分かりづらいですが…)。




おそらくモバイルサイトをコーディングする方は PC サイトをマークアップしている人がほとんどだと思います。現状、モバイルサイトはデザインを優先させるが故にアドホックなマークアップを余技なくされていますが、今後はきれいな HTML でマークアップできる日が来ることでしょう。

このエントリーを書くにあたり、以下の書籍の内容を参考にさせていただきました。キャリアごとの CSS 属性も一覧で見ることができるので「あーあの CSS 使えないんだっけ?」というときに活用させていただいています。

参考書籍: 携帯サイト コーディング&デザイン

ライブドアではマークアップも好きなディレクターを募集しています。