HTML5 新規サイト用 テンプレート(レスポンシブル対応版)

先日アップしたHTML5用のHTMLテンプレートを、レスポンシブル対応に修正しました。

newsite_html5_ver02ダウンロード
デモ

具体的な修正点は、以下の通り。

(1)index.htmlに追加
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta name=”format-detection” content=”telephone=no” />

(2)CSSに追加
-webkit-text-size-adjust: none; /* フォントサイズ自動調整 */
@media screen and ( max-width : 760px ) { ~ }

なお、CSSのブレイクポイント(表示切替ポイント)は、
iPad ポートレート(768px)で、ぎりぎりPC表示にする想定で、
幅760pxに設定してます。

なお、ブレイクポイントの参考にしたのは、以下のサイト

■レスポンシブWebデザインのブレークポイント調査
http://design-spice.com/2012/05/17/break-point/

ブレイクポイントの設定については、いろいろ説がありますが、
とりあえず今回はこれで。

ちなみに、自分がiphoneユーザーでないこともあり、
retina対応は、後回しにしています。

HTML5 新規サイト用 テンプレート

まずは、ブログの体裁を作り直す。
ということで、HTMLテンプレートを制作。

newsite_html5_ver01.zip をダウンロード
デモ

基本的には、CSS HappyLife さんのテンプレートから
手を入れさせてもらってます。

■【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
http://css-happylife.com/archives/2010/0609_1305.php

主な修正点は以下の通り
・hgroupの廃止
・CSSのファイル構成を簡単に
・footerFixed.js を追加

次回は、このテンプレートをレスポンシブル対応に修正する予定です。