こんにちは、ウェブ開発の林です。
スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。
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="https://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/ )
-------------------------------------------------- */
*{
/* 意図しない横幅が出ないように画面幅で強制改行を有効にする */
word-break: break-all;
}
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 で表示 [960×640]
ばっちり。(`・ω・´)bｸﾞｯ!
Galaxy S2(Android) で表示 [800×480]
こちらもばっちり。(`・ω・´)bｸﾞｯ!
画面サイズが違っていても、縦でも横でも画像も含めてくっきりぴったりと表示されているのが分かると思います。
もちろんコードの分岐もしていませんし、画像も分けていません。
今後、さまざまな画面サイズの端末が登場してきても大丈夫ですね。
画像くっきりについて
画像をくっきりさせるためには高解像度画像を用意する必要があります。
かといって、低解像度のサポートを怠るわけにはいきません。
CSS3 には、そういった点を解消できる background-size プロパティがあります。
これを使えば、大きい画像でも最適な大きさに伸縮してくれます。素晴らしい！
img タグはもともとそういった自動拡大、縮小をサポートしていたのでこれと組み合わせて高解像度画像だけで対応しましょう。
■ background-size－CSS3リファレンス
http://www.htmq.com/css3/background-size.shtml
高解像度画像と、通常画像を同じ iPhone 4S で表示させたときの違い
上の方がはっきりくっきりしていて綺麗です。
見栄えが非常に良いので高解像度で組んでいきましょう。
以上となります。
meta viewport に振り回されずに簡単に開発していくことができます。
今後のスマホ向けウェブページを作成する際の参考にしていただければと思います。
おまけ
おすすめの CSS リセットや CSS フレームワーク
—
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
