Kaleidoscope このページをアンテナに追加 RSSフィード

2011-01-29

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



今持ってる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サイトのグローバルナビを、スマホサイトでよく見る、あのメニュー(?)に変えてみましょう!


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


[方法1]PCサイトとは全く別のサイト・ページを作る

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


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

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

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

[方法2]は、CSSを変えるだけで、そう簡単にうまくいくのか?と思ってしまいますが、

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

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


<今回のポイント>

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

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

★グローバルメニュー(<li>)の縦並び化&リキッド化。



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

f:id:izit_kosuke:20110130005123p:image


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

f:id:izit_kosuke:20110130014951p:image


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

smart_sample01.zip 直

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

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

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

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

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

f:id:izit_kosuke:20110130014200p:image



ソースは下記です。

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>
  <!--container-->
  <div id="container">
    <!--header-->
      <div id="header">ヘッダー</div><!--/header-->
      <!--globalNav-->
      <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><!--/globalNav-->
    
    <!--contents-->
    <div id="contents">コンテンツ</div><!--/contents-->
    <!--footer-->
    <div id="footer">フッター</div><!--/footer-->  
  </div><!--/container-->


</body>
</html>

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


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

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

before/index.html

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!--viewportの指定-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--/viewportの指定-->
<!--メディアクエリでPC用・スマホ用CSSを振り分け-->
<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" />
<!--/メディアクエリでPC用・スマホ用CSSを振り分け-->

<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を不可視にしちゃいます。

(その2要素のスマホ対応は、後日ということで。)

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;
}

では、ここまでの変更で、もう一度index.htmliOSシミュレータSafariドラッグしてみてください。


すると…


f:id:izit_kosuke:20110130014951p:image


なんか、スマホサイトっぽくなった!!


横向きにしても、

f:id:izit_kosuke:20110130014952p:image


おぉぉ!っぽい!


要は、CSSの振り分けで新たな設定をしてあげれば、スマホ最適化できるんですね〜

もちろん、PCで見た場合は、そのままです。


スマホ最適化してみたい!という手がかりに少しでもなったでしょうか?


時間があるときに、また続きをやるつもりです。

画像編(前編)に続く。


-----------------------------------

1月も終わりですね。

新年に特設したHTML5サイトです(PCはSafariChromeのみ。スマホiPhoneのみ対応です。)

http://bit.ly/hIme4J

こちらも、そのうち解説するかもしないかもです。

----------------------------------

HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

Google API Expertが解説するHTML5ガイドブック

Google API Expertが解説するHTML5ガイドブック

pennywiselikepennywiselike 2013/05/01 16:38 はてなブックマークからきました

とても参考になりました

ありがとうございます

毒舌野郎毒舌野郎 2013/05/02 13:51 なるほど

参考になりました

他の記事も拝見させていただきます

ありがとうございます

CoolAppCoolApp 2015/04/09 12:16 はじめまして!
無料でアプリを簡単に作成できるツールを公開中です。
よかったらぜひお試しください(^^)
また遊びにきます!
アプリ&ブログがんばってくださーい
クールアプリ(http://www.coolapp.jp)

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証