「スマホ対応サイト制作　初心者向け」みたいな感じで書いてみた　-1.メニュー編-（※iPhone寄り）

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

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

Check

【目次】

1.メニュー編

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

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

今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、

「どこから手を付けていいのやら、わからん！！」って方も多いのではないでしょうか？

ということで、記事でも書いてみっかぁ！と、なぜかやる気になったので、連載形式で書いてみることにしました。

ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です(￣▽￣;)

僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。

「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^;

【まずはじめに】

スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。

Androidの「ブラウザ」も、iPhoneと同じwebkit系なのですが、微妙に仕様が異なっており、

機種などの差異を考慮する必要があり、内容がややこしくなるので、ひとまずiPhone基準で進めます。

後半、Android対応なども盛込んでいくつもりです。

（追記：また、PCサイトの方ではできるだけCSSを完結に書くため、IEも対象外としてます。）

個人的な考えですが、「スマホサイトはこうしなきゃいけない」みたいな決まりは無いと思ってます。

数年後には、別のレイアウトが流行してるかもしれません。

なので、今現在一般的に見受けられるレイアウトデザインを基準としてます。

最終的には、JavaScriptなどを駆使して、ちょっと凝ったUIなんかも実装するとこまで紹介できたらな～と思ってます。

また、iPhoneなんかはいろんなスマホサイト・Webアプリなどのフレームワークがありますが、

基本的にそれらは、一からサイトやWebアプリを開発するものであって、

僕の方では、今所有しているサイトをスマホ対応していくヒントになるような話しができればな～と。

【表示確認用に】

iOS SDKをダウンロード・インストールしておいてください。iOSシミュレータのMobile Safariを使います。

（SafariでもUAを変えて疑似iPhoneみたいなことはできるんですが、デバイスの横幅などまでは考えてくれないみたいなので…）

※Apple IDを取得して、Appleのサイトからダウンロードできます。

Apple Developer Center

（Android SDKのエミュレータ上のブラウザを用いることで、Androidもある程度同様なこともできるとは思います）

もちろん、面倒じゃなければ、サーバに上げて実機で確認ということもできます。

1.メニュー編

今回は、PCサイトのグローバルナビを、スマホサイトでよく見る、あのメニュー（？）に変えてみましょう！

チュートリアルに入る前に、まずスマートフォン対応する手段を考えてみます。

［方法１］PCサイトとは全く別のサイト・ページを作る

［方法２］スマホ用のCSSを別途作成し、それを読込ませ適用させる。

う～む、［方法１］は時間と予算があれば可能でしょうけど、なんだかやる前から大変そうですよね。

それに、できれば同じURLを使いたいし、１つの更新で２つのサイトを運用していかなくてはならなくなります。

なので、今後の労力を考えて却下！

［方法２］は、CSSを変えるだけで、そう簡単にうまくいくのか？と思ってしまいますが、

CSSの修正だけで、後々の変更もできちゃうし、更新も今まで変わらずできそうだ。

ということで、２の方法で話しを進めます。

＜今回のポイント＞

★<meta>タグでViewportの設定。メディアクエリによるCSS振り分け。

★#containerブロックのリキッド化。overflow:hidden化。

★グローバルメニュー（<li>）の縦並び化＆リキッド化。

下記のようなPCサイトがあるとして、スマホに最適化させていきます。

それを、今回はこんな雰囲気↓にしたいと思います。

サンプルファイルをダウンロードしてください。

smart_sample01.zip

beforeフォルダがスマホ対応してないPCサイトのページ、afterフォルダが対応後です。

beforeからafterへの変更を説明しますね。

before/index.html　を開いていただくと、上記画像のようなページが表示されます。

iPhoneで見た場合は、こんな感じです。

（iOSシミュレータをお使いの場合は、Mobile Safariを起動して、そこにファイルをドラッグすると見れます）

ソースは下記です。

before/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/main.css" type="text/css" rel="stylesheet" />
<title>PC⇔スマホサイトを作ろう！</title>
</head>
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="globalNav" class="clearfix">
<ul>
<li><a href="menu1.html">Menu1</a></li>
<li><a href="menu2.html">Menu2</a></li>
<li><a href="menu3.html">Menu3</a></li>
<li><a href="menu4.html">Menu4</a></li>
<li><a href="menu5.html">Menu5</a></li>
</ul>
</div>
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
</div>
</body>
</html>

まずは、上記ソースを変更していきます。

★viewport指定・メディアクエリでCSS振り分け。

下記ソースを<head>タグ内に入れる。

before/index.html

…
<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" />
<link href="css/main.css" type="text/css" rel="stylesheet" />
…

このviewport・メディアクエリの説明は、いろんなサイトでされていると思うので、割愛させてください。。

たとえば、下記EC Studioさんなど、わかりやすいので、ご覧ください。（僕も参考にさせていただきました！）

iPhone向けサイト構築基礎文法最速マスター

CSSの振り分けだけ軽く説明しておくと、PCのときは「main.css」、スマホのときは「imain.css」を読込むようになっています。

HTMLの方は以上です。

以下、imain.cssを書き換えていきます。

★imain.cssの作成、書き換え

まずは、まるっとcssフォルダ内のmain.cssを複製して、imain.cssとリネームしちゃってください。

今回は、グローバルナビにフォーカスした内容なので、一旦#contentsと#footerを不可視にしちゃいます。

（その２要素のスマホ対応は、後日ということで。）

imain.css　の上記2要素をdisplay:noneにしておく。

before/css/imain.css

…
#contents{
/*一旦不可視にしておく*/
display:none;
/*他はコメントアウト
	padding:20px;
	background-color:#999;
	height:600px;
	margin-bottom:20px;
	*/
}
#footer{
/*一旦不可視にしておく*/
display:none;
/*他はコメントアウト
	padding:20px;
	background-color:#666;
    */
}

★#containerをoverflow:hidden、リキッドに。

前回の記事でも説明した、overflow:hiddenの登場！また、固定幅950pxだったのをwidth:100%とします。

before/css/imain.css

…
#container{
margin:0 auto;
/*スマホ向け*/
width:100%;
overflow:hidden;
/*/スマホ向け*/
}
…

★グローバルナビのliを縦並び、リキッドに。

float:none、width:100%など、その他変更。

before/css/imain.css

…
#globalNav li{
margin:0;
/*スマホ向け*/
　float:none;
clear:both;
width:100%;
text-align:left;
padding:10px 0 10px 20px;
/*/スマホ向け*/
border:1px #999 solid;
background-color:#CCC;
display:block;
}
…