muneto.murakami.biz Weblog

よく見かけるモバイルサイトのヘッダ部分。
色帯に見出しがセンタリングされていたりします。
少し前であればtableタグを利用したり、現在であればdivを利用したり、しっかりとhで・・・という感じですね。
とりあえず現在の方法として軽くhで書くとこんな感じでしょうか。

<h1 style=”text-align:center;font-size:x-small;color:#000000;background-color:#ff0000;”>

いちばんの見出しであるということからh1タグで、文字は真ん中に小さめで。色は黒で、背景は赤です。

すると以下のようになります。

モバイルサイトの見出し調整前

「なんだか微妙・・・」と思う方も多いかと。

そうなんですよねぇ。余白が無さすぎでちょっとイマイチ。
ケータイサイトは縦サイズの使い方をシビアに考える必要があったりします。
でも、1?2ピクセルぐらいでなんとかしたいところ・・・。

解決策として、少し前であれば1ピクセルの空イメージを使用して微調整をしたり、brタグを使ったり・・・。
現在も名残だったり多くの機種に対応するために1ピクセルの空イメージを使用することが多いかもしれません。

レイアウトデザインのために必要の無い画像を使用するということは本来あるべき姿では無いと思いますので、機種は限定されますがcssを使って調整しましょう。

<h1 style=”text-align:center;font-size:x-small;color:#ffff00;background-color:#ff0000;padding:3px 0px;”>

最後にpadding:3px 0px;を追加しています。

結果、以下のようになります。

モバイルサイトの見出し調整後

個人的には良い感じで余白があるかな?と思いますが如何でしょうか。

当たり前のことかもしれませんが、ご参考になれば幸いです。

▼関連記事も是非ご覧くださいませー

• 【携帯サイト制作】第九回 ビジュアル重視のケータイサイト制作
• 【携帯サイト制作】第十回 ケータイサイトの検索フォームユーザビリティ
• 【携帯サイト制作】第十三回続ケータイサイトの検索フォームの件
• 19WEEK docomoケータイでtableタグが認識されないよ
• 【携帯サイト制作】第一回 そろそろ携帯サイトも真面目(XHTML＆CSS)に作ってみましょうか。
• モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。
• モバイルSEO
• さくらインターネットでWordPressを複数設置する。