iPhoneサイト（スマートフォンサイト）制作時の画像の表示方法と使用方法についてまとめました

PCサイトでの画像の表示方法は、スライスした画像をimgタグにサイズ指定をしたり、背景画像に繰り返しや位置の指定をして表示するのが一般的ですが、スマートフォンサイトではデザインやコンテンツの内容によって画像の表示方法を工夫する必要があります。

特にiPhoneのように横画面にすると可変して表示されるデバイスの場合は、画像も可変して見せたほうが効果的な場合もあります。

また、iPhone4、4Sや高解像度ディスプレイを搭載したAndroid向けに高解像度の画像を用意した場合にも、通常のスマートフォンでも同様に表示されるような画像の見せ方が必要になります。

今回はスマートフォンサイトを制作する際に、知っておくとよい画像の表示方法と、その使用方法をまとめました。

※iPhoneサイト（スマートフォンサイト）制作のため、サンプルはSafariやChromeなどのwebkit系のブラウザでご覧になるのをおすすめします。

iPhoneサイト（スマートフォンサイト）での画像の表示方法と使用方法

通常のサイズ指定での画像表示

<img src="表示する画像ファイル" width="画像の横幅" height="画像の高さ" alt="" >

通常の画像サイズを指定した表示方法です。
iPhoneを横画面で見たようなサイトが可変して表示された場合も、画像のサイズは変わらずに表示されます。

■通常のサイズ指定での画像表示サンプルを見る
※スマートフォンからかwebkit系のブラウザでご覧ください

通常のサイズ指定の使用方法

• サイトの表示が可変しても画像のサイズは変わらずに表示させたい場合
• アイコンなどコンテンツのメインではない画像の場合

100%で可変する画像表示

<img src="表示する画像ファイル" width="100%" alt="" >

画像の横幅を100%で指定した表示方法です。
iPhoneを横画面で見たようなサイトが可変して表示された場合、画像も横幅が100%のまま可変されて表示されます。

■100%で可変する画像表示サンプルを見る
※スマートフォンからかwebkit系のブラウザでご覧ください

100%で可変する画像の使用方法

• サイトの表示に合わせて画像も可変させたい場合
• 常に横幅いっぱいに表示させたい画像の場合
• 写真やメインビジュアルなどコンテンツのメインとなる画像の場合

CSS3の背景と合わせた画像表示

<div id="img"><img src="表示する画像ファイル（透過PNG）" width="画像の横幅" height="画像の高さ" alt="" ></div>

#img{
	text-align:center;
	padding:5px;
	/*CSS3のグラデーションなどの背景の指定*/
	background:-webkit-gradient(linear, left top, left bottom,from(#effaff),to(#a2f1fe));
}

通常サイズ指定をしたの画像を囲むdivタグにCSS3のグラデーションなどの背景を指定したものです。
iPhoneを横画面で見たようなサイトが可変して表示された場合、画像のサイズは変わらず、背景のグラデーション部分などは100%で可変して表示されます。
（※画像には透過PNGを使用するのがおすすめです。）

■CSS3の背景と合わせた画像表示サンプルを見る
※スマートフォンからかwebkit系のブラウザでご覧ください

CSS3の背景と合わせた画像の使用方法

• タイトルやボタンなどの背景だけを可変させたい場合

背景画像にサイズ指定をする

<div id="img"></div>

#img{
	display:block;
	text-align:center;
	margin:0 auto;
	/*背景画像を表示するdivの横幅と高さ*/
	width:320px;
	height:50px;
	/*背景画像の指定*/
	background:url(表示する画像ファイル) no-repeat 0 0;
	/*背景画像の表示したい横幅と高さ*/
	-webkit-background-size: 320px 50px;
}

背景画像にCSS3の-webkit-background-sizeを使ってサイズ指定をしています。
1/2のサイズ指定をすれば、高解像度ディスプレイのスマートフォンでも背景画像をキレイに表示できます。

■背景画像にサイズ指定サンプルを見る
※スマートフォンからかwebkit系のブラウザでご覧ください。

背景画像にサイズ指定をする使用方法

• 高解像度ディスプレイ向けに倍のサイズで用意した画像を背景画像として使用したい場合

応用編：画像をCSS3で効果的に見せる

CSS3でimgタグに角丸やドロップシャドウなどの指定をすれば、ブログ等の写真やサムネイルを効果的に見せることもできます。

■応用編サンプルを見る
※スマートフォンからかwebkit系のブラウザでご覧ください。

基本的に以上の画像の表示方法がスマートフォンサイトを制作する上で知っておくと便利なものだと思われます。

他にも、便利な画像表示方法やその使い分けについては、今後勉強しながらご紹介できればと思います。