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

2011-01-26

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

スマホサイトの作り方関連のブログとかを見てて、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対応

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

HTML5&API入門

HTML5&API入門

fmactionfmaction 2011/02/13 21:36 スマホサイトを作る時の参考にしたいと思います。ありがとうございます。

izit_kosukeizit_kosuke 2011/02/14 00:10 >fmactionさま
コメントありがとうございます。
スマホサイトで役立つ情報をこれからも提供していきたいと思ってますので、これからもご覧頂けると幸いです。

まだまだ勉強中…まだまだ勉強中… 2011/06/08 16:45 良い記事をありがとうございます!!
Web初心者で本当に困っていたので
これから勉強させていただきます(^^)

モンクレールモンクレール 2011/09/05 18:22 http://www.monclerstore.jpようこそ。
弊社はモンクレール商品通販を主な業務にして、海外の取引関係を運営しております。お客様にもっとも専門的、もっとも完璧的なモンクレール製品を提供して差し上げるように力を入れております。

モンクレールモンクレール 2011/09/07 14:19 http://www.monkureru.comようこそ。
弊社はモンクレール商品通販を主な業務にして、海外の取引関係を運営しております。お客様にもっとも専門的、もっとも完璧的なモンクレール製品を提供して差し上げるように力を入れております。

モンクレールモンクレール 2011/09/08 17:31 http://www.monkureru.infoようこそ。
弊社はモンクレール商品通販を主な業務にして、海外の取引関係を運営しております。お客様にもっとも専門的、もっとも完璧的なモンクレール製品を提供して差し上げるように力を入れております。

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


画像認証