Kaleidoscope

【目次】
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>
  <!--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振り分け。
下記ソースをタグ内に入れる。
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を不可視にしちゃいます。
（その２要素のスマホ対応は、後日ということで。）

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.htmlをiOSシミュレータのSafariへドラッグしてみてください。

すると…

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

横向きにしても、

おぉぉ！っぽい！

要は、CSSの振り分けで新たな設定をしてあげれば、スマホに最適化できるんですね〜
もちろん、PCで見た場合は、そのままです。

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

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

→画像編（前編）に続く。

- - - - -

１月も終わりですね。
新年に特設したHTML5サイトです（PCはSafari、Chromeのみ。スマホはiPhoneのみ対応です。）
http://bit.ly/hIme4J
こちらも、そのうち解説するかもしないかもです。

- - - - -

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

作者: 谷拓樹
出版社/メーカー: ラトルズ
発売日: 2010/11/24
メディア: 単行本（ソフトカバー）
購入: 30人クリック: 1,023回
この商品を含むブログ (27件) を見る

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

作者: 羽田野太巳,白石俊平,古籏一浩,太田昌吾
出版社/メーカー: インプレス
発売日: 2010/09/16
メディア: 単行本（ソフトカバー）
購入: 15人クリック: 461回
この商品を含むブログ (14件) を見る

【スマホ対応サイト制作のより詳しい記事はこちら】
1.メニュー編
2.HTMLとCSSで画像を操る編（前編）
2.HTMLとCSSで画像を操る編（後編）

スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、
個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。

それは、

とにかく内側のHTML要素をハミ出さないように作る

どうしてか？

ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。

例えば、iPhoneで言うPortrait（縦）表示のとき、横幅320pxを超えたページ構成になると、
おかしな横スクロールが発生してしまいます。
viewportで拡大とかの禁止をおこなっていても、そうなります。
（まぁ、拡大とは意味が違うので当然なのですが。。。）

具体的にどういうことをしておいた方が良いかというと、

★とりあえずページのラッピング要素はoverflow:hiddenにする

HTMLレイアウトを組む大抵の場合、

<body>
    <div id="contents">
    　　　〜コンテンツ〜
    </div>
</body>

といった具合で、全体を囲む要素を作ると思うのですが、これを

div#contents{
     overflow:hidden;
    　…
}

としておくのが良さそうです。

こうすることで、この内側の要素の横幅がオーバーしても、全体よりハミ出ることが無くなるので、
おかしな横スクロールを防ぐことができます。

ただし

上記はiPhoneの場合は、ほぼこれで防げるのですが、Androidの場合は完全じゃありません。

hidden指定してるにも関わらず、内側の要素の横幅が広かったりするとラッピング要素の横幅まで押し広げてしまいます。

なので、とにかく

★可能な限りリキッドレイアウト
★おかしな横スクロールをする場合は、内側の要素の横幅を調べ、親要素を上回らないようにする。

というのを守ればよいと思います。

てか、リキッドレイアウトで組んでれば、ハミ出ることなんてないじゃん。と言われそうですが、
スマホサイトの場合、「PCサイトをUA判定などで、スマホ用にCSSと画像を振り分ける」というサイトを作られる方も多いと思います。
そういう場合、なかなかリキッドレイアウトに作り変えれなかったりするためです。

※はてなダイアリーで初めて書いてみました。読みづらかったらすみません。

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

作者: 谷拓樹
出版社/メーカー: ラトルズ
発売日: 2010/11/24
メディア: 単行本（ソフトカバー）
購入: 30人クリック: 1,023回
この商品を含むブログ (27件) を見る

HTML5&API入門

作者: 白石俊平,株式会社あゆた
出版社/メーカー: 日経BP社
発売日: 2010/02/25
メディア: 単行本
購入: 15人クリック: 635回
この商品を含むブログ (55件) を見る

Kaleidoscope

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

スマホサイトの作り方で、あんまり書かれてないことを書いてみた