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

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

【スマホ対応サイト制作のより詳しい記事はこちら】

スマホサイトの作り方関連のブログとかを見てて、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と画像を振り分ける」というサイトを作られる方も多いと思います。

そういう場合、なかなかリキッドレイアウトに作り変えれなかったりするためです。

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