「スマホ対応サイト制作初心者向け」 -2.画像をCSSで操る編（前編）-

On 2011年2月7日, in Android, HTML5, iPhone, Web制作, スマートフォンサイト制作, by kosuke

この記事のURLをスマートフォンに送る

Check

【目次】

1.メニュー編

2.HTMLとCSSで画像を操る編（前編）

2.HTMLとCSSで画像を操る編（後編）

さて、前回はCSSでスマホ向けにする超基本の紹介でした。

が…実際のところ、あんな超シンプルなサイトは無い訳で…

実践となると、もう少し工夫が必要になってくると思います。

そこで、今回はサンプルをもう少し現実的な形にして、

スマホ化してみたいと思います。

今回のサンプルファイルです。

smart_sample02.zip

＜今回のポイント＞

1．要素の取捨選択

　→　要らない要素はdisplay:none;

2．HTMLとCSSだけで画像を振り分ける

　→　HTMLソースにPC用とスマホ用の両画像を配置。idやclass指定で、CSSでdisplay:none;

3．CSS3グラデーションの活用＆疑似要素を使ったカスタマイズ

今回のサンプルとなるサイトはこんな感じです。

前回よりも、ヘッダー部とメニュー部に画像を使って、もう少し現実的なサイトに近づけてみました。

前回スマホ対応したCSSの設定は引き継いでいます。

そして、HTMLソースはこうです。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<link media="only screen and (min-device-width:481px)" href="css/main.css" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width:480px)" href="css/imain.css" type="text/css" rel="stylesheet" />
<title>PC⇔スマホサイトを作ろう！</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"><h1><a href="index.html"><img src="images/logo.jpg" alt="スマホ対応サイト制作" /></a></h1></div>
<div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>
</div>
<div id="globalNav" class="clearfix">
<ul>
<li><a href="menu1.html"><img src="images/menu1.jpg" alt="メニュー1" /></a></li>
<li><a href="menu2.html"><img src="images/menu2.jpg" alt="メニュー2" /></a></li>
<li><a href="menu3.html"><img src="images/menu3.jpg" alt="メニュー3" /></a></li>
<li><a href="menu4.html"><img src="images/menu4.jpg" alt="メニュー4" /></a></li>
<li><a href="menu5.html"><img src="images/menu5.jpg" alt="メニュー5" /></a></li>
</ul>
</div>
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
</div>
</body>
</html>

これをそのまま、iPhoneで表示させてみるとこうなります。

あたりまえですけど、ヘンです。。。

では、これをスマホに最適化していきましょう。

1．要素の取捨選択

まず、ヘッダに画像が２つ使われています。

そのため、２つの画像が無理矢理入ってるふうなので、ここをどう対処するか方針を立てましょう。

下の画像がとくに何も情報が無く、意味が無さそうです。

HTMLソースで言うと、#headerMainの要素です。

<div id="header">
<div id="logo"><h1><a href="index.html"><img src="images/logo.jpg" alt="スマホ対応サイト制作" /></a></h1></div>
<div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>　
</div>

では、imain.cssに追記して、どうにかしましょう。

これは簡単です。imain.cssの方に、#headerMainをdisplay:noneしてしまえばいいのです。

imain.css

#headerMain{
display:none;
}

いなくなりました。

2．HTMLとCSSだけで画像を振り分ける

とりあえず、余計な画像はいなくなったものの、ヘッダ画像がサイズが合ってなくてヘンです。。。

では、これをどうにかしていきましょう。

★スマホ向けの画像を作る。

ここでは、iPhoneを基準とし、横幅480pxの画像を作成します。480pxというのは、横向きになった際の幅です。

基本的に横向きになった場合より、縦向きの画像サイズが大きく表示させることは無いと思うので、横向き時のサイズを基準とします。

作った画像は、こんな感じです。

logo_i.jpg

★HTMLソースの変更

少々荒技ですが、ソースにPC用・スマホ用の両方の画像を記述します。

そして、各々に別名のCSSクラス指定をします。

<div id="header">
<div id="logo">
<h1>
<a href="index.html">
            <img src="images/logo.jpg" alt="スマホ対応サイト制作" class="logo_pc" />
            <img src="images/logo_i.jpg" alt="スマホ対応サイト制作" class="logo_i" />
            </a>
</h1>
</div>
<div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>
</div>

★CSSの追加・変更

さきほどの取捨選択の方法を、PC側のCSSでも用います。

要するに、

main.css（PC用CSS）→　.logo_i　を display:none;

imain.css（スマホ用CSS）　→　.logo_pc　をdisplay:none;

main.cssに追記

/*↓PCでは不可視にする↓*/
.logo_i{
display:none;
}
/*↑PCでは不可視にする↑*/

imain.cssに追記

/*↓スマホでは不可視にする↓*/
.logo_pc{
display:none;
}
/*↑スマホでは不可視にする↑*/

さらに、スマホ用はこの画像をリキッド表示するために下記を追記します。

imain.cssに追記

/*ロゴ画像のリキッド表示*/
.logo_i{
display:block;
width:100%;
height:auto;
}

すると、こうなります。

ヘッダできあがり。

3．CSS3グラデーションの活用＆疑似要素を使ったカスタマイズ

ヘッダはできあがりましたが、まだメニューの画像がヘンです。

こちらも、ヘッダでおこなったような方法が取れなくもないのですが、

さすがにメニューは５個もあるし、その分HTMLソースに記述するのは、なんだか気が引けます。。。

幸い画像がただのグラデーションなので、どうにかCSSを使って対応できるかもしれません。

CSS3には、グラデーションを描く機能があるため、それを活用してみたいと思います。

と、続きを書いてたんですが、ずいぶん長いエントリになったので、

ちょっと分けます。。。

続きは近日中に！

———————————-

★おまけ★

書いておいてなんですが、個人的にはこのヘッダ画像振り分けの方法はあまり好きでは無いです（笑）

やはり、サーバサイドのプログラムが使える環境なら、そちらで表示切替えをおこなうべきでしょう。

それがダメなら、JavaScriptとか。（JSについては、別の機会に書きたいと思ってます）

HTML文書の意味がおかしくなってしまう記述はあまりよくないです。。。

とりあえず手っ取りばやくフロントエンドで対応したい、いろんな事情があってやむを得ず…とかそんな人向けです。

まぁ、ひとつの手段としては、ありだと思ってます。

iPhoneアプリ×Webサイト開発入門 Objective-C/iPhoneSDK、 HTML/CSS/JavaScriptによる最適プログラミング

作者: クリストファー・アレン,株式会社FEYNMAN 正健太朗
出版社/メーカー: 日経BP社
発売日: 2010/04/15
メディア: 単行本（ソフトカバー）
クリック: 76回
この商品を含むブログ (4件) を見る

WEB・アプリ開発・音楽制作