携帯サイト制作のヒント：行間が詰まって読みにくいので改善したい

新着情報など一覧でテキストを見せるようなページで、行間が詰まっていると読みにくい印象を与えます。背景色の付いたボックスと接する箇所は特に余白が欲しくなります。

PCサイトではCSSのline-heightやmarginプロパティを使えばできますが、携帯サイトの場合、最も普及するiモードブラウザ1.0のFOMAではこれらのプロパティが効かず行間を調整できない事情があるので、画像を使った何らかの方法でしか余白を調整することしかできません。

そこでスペーサー画像を各テキストの次の行に配置して隙間を作るテクニックが使われますが、XHTMLソースを見てください。

（行間と、絵文字の両端に余白を作るためにスペーサーを配置した例）


 

 新着情報

[9/30]在庫一層ｾｰﾙ開催

[9/30]72時間ﾎﾟｲﾝﾄ5倍!

[9/29]ﾚﾋﾞｭｰで2倍ﾎﾟｲﾝﾄ

[9/28]3点で送料無料


 ｵｽｽﾒ情報

画像を使うしかないのなら、こうした小技よりもっと普通のコードで、さらに画像の特長を活かしてやりたいことを実現しようというのが、ラウンドアバウトのアプローチです。

どのような方法なのか？前回紹介したアイコン画像を絵文字の代わりに使う方法、これを利用します。

●アイコン画像

40ピクセル四方で作るなど制作の目安は以前紹介したとおりです。このような画像を使い、XHTMLと外部CSSでページを作ってみました。

●XHTML


 新着情報

[9/30]在庫一層ｾｰﾙ開催

[9/30]72時間ﾎﾟｲﾝﾄ5倍!

[9/29]ﾚﾋﾞｭｰで2倍ﾎﾟｲﾝﾄ

[9/28]3点で送料無料


 ｵｽｽﾒ情報

●CSS

.head {background-color:#006600;}
.head-text {color: #FFFFFF;}
.headIcon { margin-top:5px; margin-right:5px; margin-left:3px; vertical-align:baseline; }
.textIcon { margin-top:5px; vertical-align:baseline; }

各imgタグにmargin-topプロパティを設定すると、margin分テキストも下にずれ（画像の下辺とテキストの画像が揃うことにより）、テキストの上部に隙間ができます。また、絵柄の大きめなアイコンはさらにmargin-leftとmargin-rightも設定すれば接するテキストとの間をあけることができるので、見易く見出しらしいレイアウトになります。

またXHTMLも本来やりたいことのためのタグだけで成り立っています。先ほどのスペーサーと比べてみてください。

実際の携帯での見た目は以下のようになります。一覧用の三角アイコン（ブレット）は絵柄を小さくし余白を残したので、詰まった印象から一転、余白感を演出できました。やはり画像を使うとできることの幅がより広がりますね。

●画面
（docomo N905i）