SVG女子

IE9をはじめ、ChromeやSafari、Firefox（4）あたりで見れると思います。非Flashなのです。
これ見てると、いよいよ本格的なHTML5時代が到来してきたなーと思わずにいられません。

原理はコマ撮りやパラパラアニメーションみたいなので、
Flashのモーショントゥイーンより考え方はシンプルかも。

こういうの作りたいなー。他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

今回もあまりがっつり書ける時間が無いので、超小技のエントリー(￣▽￣;)

たとえば、Yahooさんとかがやっているんですが、

「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。

Yahoo! JAPAN （スマートフォンサイト）

（Yahooさんの手法とは違うかもしれませんが）

その方法を紹介します。

僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさせています。

そもそも、iOSのSafariやAndroidの「ブラウザ」は、

ページ読み込み完了時に、スクロール位置が1ピクセル以上あった場合、

URLバーが引っ込む仕様のようです。

（あくまで推測。ページ内リンクなどで、そうなるのが根拠です。）

まぁ、これのなにがいいのかというと、

ページの表示範囲を少し広く見せられる。

ってところでしょうか。

やり方は簡単です。

JavaScriptでWindowオブジェクトの読み込み完了時に、

1ピクセルのスクロールをしてあげます。

jQueryで記述すると

[javascript]
$(window).bind('load',function(){//←windowオブジェクトにloadイベントをバインド
setTimeout(function(){window.scrollTo(0,1);　//←windowオブジェクトを1ピクセルスクロール
　},1);
});
[/javascript]

setTimeoutについては、リロード時など読み込みが早すぎて動作が追いつかない場合があるため

やや遅らせるという処理をおこなっています。

記述は違えど、こういう手法が一般的のようです。

逆に他に良い方法があれば、教えていただければです！

動作デモ

（iPhone・Androidで見てください。iPhone 3GS/IS03で確認済み）

※ページ内容によっては、setTimeoutの遅延をもう少し大きくしてあげるといいかもです。

※前回のエントリーで「URLバーを隠す行為」とコメントがありましたが、今回についても隠すことを推奨しているわけではありません。

【2011.5.6　追記】ツイッター上などで、やはり「隠す行為」とおっしゃっている方がいますが、そもそもスクロールしたら引っ込みますよ。Mobile SafariやAndroid標準ブラウザはそういう仕様ですので。よくブラウザ見てみましょう。それが嫌ならURLバーが固定で表示されるブラウザに変えましょう。

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

前編の続きです。（前編はこちら）

3．CSS3グラデーションの活用

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

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

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

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

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

★まず、メニュー画像は全てdisplay:none;

この手法はもうおなじみ。

imain.cssに追記

#globalNav li>a>img{
display:none;
}

すると…

当然なのですが、メニューが無くなった。。。

メニュー画像を消してしまったので、どうにか要素を作らなくてはいけません。

そこで、疑似要素を使います。

★aタグをブロック要素に。疑似要素の追加。

imain.cssに追記

/*aタグをブロック要素に*/
#globalNav li>a{
display:block;
width:100%; /*リキッドに*/
height:auto; /*リキッドに*/
padding:10px 0; /*paddingを上下に指定することで、少し高さを持たせる*/
color:#333;
text-align:left;
text-decoration:none;
}
/*aタグ内の先頭に、疑似要素を追加。aタグのtitle属性の内容を表示させる */
#globalNav li>a:before{
content:attr(title); /*aタグのtitle属性を表示*/
width:100%; /*リキッドに。*/
font-size:18px;
font-weight:bold;
padding-left:10px;
color:#FFF;
display:table-cell; /*table-cellにすることで、縦方向の中央寄せを可能に。*/
vertical-align:middle; /*縦方向の中央寄せ。*/
}

ここは、一応簡単に説明をしておきます。

aタグをブロック要素にすることで、１つのメニュー全体にリンクを有効にすることができます。

a:beforeとして指定することで、aタグ内の先頭に要素を作ることができます。

content:attr(title); で　aタグのtitle属性を表示し、

display:table-cell;とvertical-align:middle;で、縦方向の中央寄せをおこなっています。

そして、各aタグにtitle属性を追加しておきます。

<li><a href="menu1.html" title="メニュー1"><img src="images/menu1.jpg" alt="メニュー1" /></a></li>
<li><a href="menu2.html" title="メニュー2"><img src="images/menu2.jpg" alt="メニュー2" /></a></li>
<li><a href="menu3.html" title="メニュー3"><img src="images/menu3.jpg" alt="メニュー3" /></a></li>
<li><a href="menu4.html" title="メニュー4"><img src="images/menu4.jpg" alt="メニュー4" /></a></li>
<li><a href="menu5.html" title="メニュー5"><img src="images/menu5.jpg" alt="メニュー5" /></a></li>

この時点での表示はこうなります。

★CSS3グラデーション。その他の装飾を施す。

上の画像の状態だと、ちょっとPCとデザインがかけはなれてますよね。

グラデーションと矢印（？）の装飾をCSSで対応してみます。

まず、グラデーションをliタグに施します。

imain.cssに追記

#globalNav li{
/*↓スマホ向け （第1回 -メニュー編-）↓*/
margin:0;
float:none;
clear:both;
width:100%;
text-align:left;
/*/↑スマホ向け（第1回 -メニュー編-）↑*/
/*↓スマホ向け （第2回 -画像編-）↓*/
padding:0;
border:1px #4294E6 solid;
border-bottom:0px;
/*画像どおりのグラデーション
    background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#79b3e6),
		color-stop(0.50, #0066cc),
		color-stop(0.50, #003399),
		color-stop(0.69, #2e63b8),
		to(#4793d1));
	*/
/*グラデーション*/
background: -webkit-gradient(
linear, left top, left bottom,
from(#6d95fc),
to(#374ec4));
display:block;
/*テキストにドロップシャドウ*/
text-shadow:
0px 1px 1px rgba(0,0,0,1),
0px -1px 0px rgba(255,255,255,0.3);
/*/↑スマホ向け（第2回 -画像編-）↑*/
}

background: -webkit-gradient(～);

の部分でグラデーションを設定します。

これについては、いろんなサイトで説明がなされているので、簡単な説明にとどめておきます。

簡単に言うと、fromからtoの値へ変化するグラデーションを設定できます。

画像どおりのグラデーションをほどこすと、やや見づらかったので変更しました。

念のため画像どおりのグラデーション値も残しておきます。

次に「＞」矢印の追加です。

これは、見づらいですが、

のような画像を用意して、疑似要素:afterで配置します。

imain.cssに追記

/*矢印画像の追加*/
#globalNav li>a:after{
content:url(../images/arrowR.png); /*矢印画像URI*/
font-size:18px;
font-weight:bold;
padding-right:10px;
color:#FFF;
display:table-cell; /*table-cellにすることで、縦方向の中央寄せを可能に。*/
vertical-align:middle; /*縦方向の中央寄せ。*/
}

これでできあがりです！

横向きもオッケー。

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

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

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

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

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

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

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

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

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

smart_sample02.zip

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

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

前回スマホ対応した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件) を見る

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

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

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

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

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

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

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

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

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

＜今回のポイント＞

下記のような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;
}
…

では、ここまでの変更で、もう一度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
• メディア: 単行本（ソフトカバー）
• 購入: 4人 クリック: 478回
• この商品を含むブログ (9件) を見る

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

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

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

スマホサイトの作り方関連のブログとかを見てて、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
• メディア: 単行本（ソフトカバー）
• 購入: 4人 クリック: 478回
• この商品を含むブログ (9件) を見る

HTML5&API入門

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

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン