携帯サイト制作の実践ノウハウ：CSSで背景画像を付ける

ラウンドアバウトの画像変換は、img要素の画像に限りません。変換対象となる画像は次のとおりで、今回はラウンドアバウトを使った背景画像デザインを取り上げます。

  • インライン画像（img要素のsrc属性）
  • 背景画像
    • background属性
    • background、background-imageプロパティ
  • フォームのイメージボタン（input要素のsrc属性）
  • リストのマーカー画像（list-style-imageプロパティ）
  • 画像へのリンク（a要素のhref属性）


背景画像のCSSプロパティですが、本当はdivやtable関連要素にも変換対応しています。ただ、ドコモがbody要素にしか背景画像のCSSプロパティに対応しないので、３キャリアで背景画像を使う場合は実質body要素だけということになります。

背景画像を使ったデザインは淡い色調のパターン模様がよく使われます。例えば、下の画面のように小さい画像を縦横にリピートさせて柄のようなデザインをします（このサンプルは絵柄をわざとハッキリさせていますが）。これを様々な機種で見たとき、気になるのが柄の大きさに違いが出てしまうことです。VGA端末向けに作るとQVGA端末では大柄、一方QVGA端末に合わせるとVGA端末では細かく見えます。サイズ違いを用意して出し分けを行うか、機種による見栄えの違いを受け入れるしかありません。

（VGA端末サイズに合わせて背景画像を作った場合）

（QVGA端末サイズに合わせて背景画像を作った場合）


ラウンドアバウトの画像変換は、横幅480ピクセルのVGA端末でも、240ピクセルのQVGA端末でも 、同じような絵柄の大きさで背景画像を表示してくれます。背景画像ファイルを作る際のコツは、VGA端末（横幅480ピクセル）で表示する場合を想定して画像の大きさを決めることです。

例えば冒頭のVGA向けサンプルの画像は、星が横に５つ並ぶ大きさ、480÷5=96ピクセルで制作しています。ラウンドアバウトなら、横幅480ピクセルの端末で見れば96ピクセル、横幅240ピクセル端末なら48ピクセルの画像が背景画像として並ぶという想定です。

これを使い、背景画像を指定する外部CSSを書きます。style属性によるインラインCSSの記述もできますが、ラウンドアバウトだと携帯サイトでも外部CSSを使えますし、以前にも書いたようにそのメリットは大きいので、外部CSSがオススメです。

（CSS）

body {
  background-image:url(image/bg_star.jpg);
  background-color: #B5B5FF;
}

background-colorを設定しているのは、背景画像のCSSプロパティに対応しないドコモFOMAの一部機種でも違和感なく表示できるように色調を合わせるためです。

あとはオートレイアウト機能によって変換されたページを見てみると、以下のようになります。

見るに耐えない表示崩れを引き起こすインライン画像に比べれば、背景画像の見栄えの違いは小さな問題かもしれません。しかしデザインにこだわれば気になってくるこうした点にも、ラウンドアバウトの機能が行き届いています。

Page Top