こんにちは、ウェブ開発の林です。
スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。
meta viewport というタグを使えば表示サイズを調整することができます。
ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。
スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。
こちらを参考に組んでみてはいかがでしょうか。
HTML テンプレートコード（ヒント付き）
こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。
追記： ライセンスフリーです。自由に使ってください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<!-- ページの拡大縮小を許すときは initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no を修正してね。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=medium-dpi">
<style>
/* 画像を美しく表示するヒント
■ 画像は PC 上で想定する２倍のサイズで作成する
Retina や HD 解像度でもきれいに表示したいからです。
自動で拡大縮小されるため、低解像度向けを作成する必要はありません。
■ background-image を設定したときは、
background-size:contain; または background-size:cover;
を設定する。
参考 : http://www.htmq.com/css3/background-size.shtml
※ 追記 2012-2/2
Android 2.1 では
-webkit-background-size:auto 160px;
のように高さだけでも指定してやらないと反応しませんでした。
幅は auto で OK です。
■ img に指定するサイズは、画像のサイズじゃなくても良い。
例 : 幅高さ 128 px でも 64px の大きさで表示させる。 Retina ではとてもきれいに表示される。
幅だけ指定しておけば、アスペクト比は維持される。
<img alt="" src="http://blog.fenrir-inc.com/wp/wp-content/uploads/2012/02/default_128.png" width="64">
-------------------------------------------------- */
/* 各種 reset などを行う。
CSS リセットを行わないと、余白が入ったり幅ぴったりにならない場合があるので気をつけて。
おすすめの CSS リセット ↓
■ Yahoo UI ( http://yuilibrary.com/yui/docs/cssreset/ )
■ normalize.css ( http://necolas.github.com/normalize.css/ )
■ Bootstrap, from Twitter ( http://twitter.github.com/bootstrap/ )
-------------------------------------------------- */
body, p{
margin: 0;
padding: 0;
}
/* 幅を制御する
-------------------------------------------------- */
.width-keeper{
/* 中央寄せ */
margin-left:auto;
margin-right:auto;
/* 最大幅をつけて PC でも見やすくする（無くても良い） */
max-width: 640px;
}
/* ヘッダーにメニューを置くときに使用
-------------------------------------------------- */
.header{
/* ここでヘッダーの背景の設定や高さ設定を行う */
/* background や height */
}
.header .container{
/* ヘッダーの中身の余白や背景などを設定 */
/* ex. margin padding background border */
}
/* 中央、メインコンテンツ
-------------------------------------------------- */
.contents{
}
.contents .container{
/* メインコンテンツの余白や背景などを設定 */
/* ex. margin padding background border */
}
/* フッター
-------------------------------------------------- */
.footer{
}
.footer .container{
/* ヘッダーの中身の余白や背景などを設定 */
/* ex. margin padding background border */
}
/* コピーライト */
.footer .container .copyright{
/* text-align:center; */
}
</style>
</head>
<body>
<!-- ヘッダー -->
<div class="header">
<div class="container width-keeper">
<!-- ここに記述してね -->
</div><!-- /container -->
</div><!-- /header -->
<!-- メインコンテンツ -->
<div class="contents width-keeper">
<div class="container">
<!-- ここに記述してね -->
</div><!-- /container -->
</div><!-- /contents -->
<!-- フッター -->
<div class="footer">
<div class="container width-keeper">
<!-- ここに記述してね -->
<div class="copyright">
<p>© Sample Inc. 2012</p>
</div>
</div><!-- /container -->
</div><!-- /footer -->
</body>
</html>
HTML テンプレートを使ったサンプル
テンプレートを元に作ったページサンプル
※ 新規ウィンドウで開きます。
PC(iframe) で表示
幅: 320px 高さ: 480px
幅: 480px 高さ: 320px
iPhone 4S で表示 [960x640]
ばっちり。(`・ω・´)bｸﾞｯ!
Galaxy S2(Android) で表示 [800x480]
こちらもばっちり。(`・ω・´)bｸﾞｯ!
画面サイズが違っていても、縦でも横でも画像も含めてくっきりぴったりと表示されているのが分かると思います。
もちろんコードの分岐もしていませんし、画像も分けていません。
今後、さまざまな画面サイズの端末が登場してきても大丈夫ですね。
画像くっきりについて
画像をくっきりさせるためには高解像度画像を用意する必要があります。
かといって、低解像度のサポートを怠るわけにはいきません。
CSS3 には、そういった点を解消できる background-size プロパティがあります。
これを使えば、大きい画像でも最適な大きさに伸縮してくれます。素晴らしい！
img タグはもともとそういった自動拡大、縮小をサポートしていたのでこれと組み合わせて高解像度画像だけで対応しましょう。
■ background-size－CSS3リファレンス
http://www.htmq.com/css3/background-size.shtml
高解像度画像と、通常画像を同じ iPhone 4S で表示させたときの違い
上の方がはっきりくっきりしていて綺麗です。
見栄えが非常に良いので高解像度で組んでいきましょう。
以上となります。
meta viewport に振り回されずに簡単に開発していくことができます。
今後のスマホ向けウェブページを作成する際の参考にしていただければと思います。
おまけ
おすすめの CSS リセットや CSS フレームワーク
—
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
Facebook コメント
コメント
yuki2012年02月03日 18:42
こんにちわ。webデザイナーです。
後半の画像解像度のお話ですが、
iPhone4/4Sは確かに解像度を2倍にした方が奇麗に見えるのですが
その画像をiPhone 3G/3GSなどの古い端末で表示させると
とても重くなってしまいます。
その場合、どうされていますか。
私の場合、現状では対処法やどういったやり方が主流なのか分からず、
高解像度用の画像と普通のサイズの画像と
2種類用意してそれぞれ対応しています。
その二度手間をなんとか解消したいのですが
みなさん古い機種へのフォローは
どのくらいされているのでしょうか。
長々と失礼しました。
りか2012年02月05日 15:49
記事、参考にさせて頂きました。
ありがとうございます。
しかい、galaxy nexusでは画像が適切なサイズにならず、
余白が出来てしまいました。
皆様はどうですか？？
林2012年02月06日 15:54
フェンリルの林です。
> yuki さん
本記事では、高解像度画像だけで両対応できるということを謳っていますが、
特別見栄えを気にしなければ低解像度でも良いと思います。
容量が気になるのであれば PNG 最適化ツールで減色したり容量を削減したりします。
私のおすすめは『PNGGauntlet』です。
■ PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」:phpspot開発日誌
http://phpspot.org/blog/archives/2012/01/pngwindowspngga.html
> りか さん
Galaxy Nexus で余白ができるとのことですが、CSS リセットは行っておりますでしょうか。
当方の Galaxy Nexus 環境では余白は出さずに表示できます。
ちょっとしたことで余白ができたりうまくいかなくなると思いますが、
Firebug や Webkit の開発ツールを使って変な余白などがないか調整してみてください。
げっちゃん2012年02月07日 16:22
初めまして。
NEXUSで上手く表示されないのを解消したいと検索していて、このサイトに出会いました。
りかさんと同じ現象なのか分かりませんが、私のところのNEXUSも右と下に空白が出来てしまいます。同じページが、iPhoneでは上手く動作しています。
iPhoneのsafariではtarget-densityDpiが効かない、というネタや、width=指定の前に宣言しないと優先順位で効かないブラウザがある、等のネタを他のサイトで見かけたのですが、それらと関係しているのかもしれません。
ちなみに、私のところでは宣言の順番を
とするとiPhone側もNEXUS側も崩れたので、そもそも私のところのCSSの宣言自身がおかしい可能性も高いです。(汗)
げっちゃん2012年02月07日 16:27
すみません、↑の投稿でタグ表記をそのまま埋め込んでしまって、消えてしまいました。
<meta name="viewport" content="target-densityDpi=device-dpi, width=device-width, initial-scale=1.0">
と書きたかったのですが…
げっちゃん2012年02月08日 15:48
追記です。
NEXUSのsafariの「設定」「高度な設定」「デフォルトの倍率」が中になっていて、これを低にしたら空白が消えて、思い通りの表示になりました。
ちなみに高にしたらさらにヒドい崩れ方になりました。
FireFoxでも同様の崩れ方で、Chromeでは最初から思い通りの表示に。
サイトのソース自体は全く変えていないので、ブラウザの倍率も踏まえた倍率宣言にする必要があるのかもしれませんが、逆にそこまでになるとソース側で対応するのは少し違う気もしますので、今のところはブラウザに依存している制限、という位置づけにしています。
林2012年02月10日 3:48
> げっちゃん さん
フェンリルの林です。
CSS リセットはなさっていますか？
倍率で空白が出るとは不思議ですが、端末の仕様かもしれませんね。
スマホは端末差が大きいので、こういった貴重なご意見は大切です。
表示がきれいにされないサイトがあるとき、管理者などに機種とブラウザを連絡するとお礼をいただくこともあります。
このやりとりもどなたかのお役に立つことでしょう。
ありがとうございます。