検索
カレンダー
2020年2月
« 4月    
 1
2345678
9101112131415
16171819202122
23242526272829
ブログメニュー
Amazon検索
キーワード:

HTML5時代の作法をまとめてみた

2012年8月4日

そろそろHTML5を業務で使い始めていいんじゃないかと思い、HTML5で記述するにあたって
記述しておくべき定義(作法?)をまとめてみました。

作法っていうのはHTML5の文法という意味ではなく、ある環境に対する定義とか、
別の環境から見たらおまじないみたいに見えるものとか、そんな感じです。
IE6での標準準拠モードにするためのDOCTYPEの書き方みたいな。
基本的にはheadタグの中に書くべきものを説明していきます。
DOCTYPEとかHTML5のタグの説明は期待しないで下さい…。


<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

これはIEの互換性を明示的に記述しています。
contentの中はカンマ区切りで2種類の定義を記述しています。
「IE=edge」は「IEの一番新しい描画エンジンで記述する」という意味で、
「chrome=1」は「Chrome Frame がインストールされていれば使用する」という意味です。


<meta name="viewport" content="width=device-width, initial-scale=1.0">

これはスマートフォンで表示する際の、仮想的なブラウザサイズの定義です。
iPhoneやAndroidのブラウザで対応しているみたいですが、何の規格かはわかりませんでした…。
「width=device-width」は「横幅をデバイスの解像度に合わせる」という意味で、
「initial-scale=1.0」は「初期の倍率は1倍」という意味です。
「initial-scale=1.0」だけでいいと思うのですが、「width=device-width」を書いているところが多いようですね。


<link rel="apple-touch-icon-precomposed" sizes="144x144" href="144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="72.png">
<link rel="apple-touch-icon-precomposed" href="512.png">

これは、iPhoneやiPadのWebクリップアイコンの画像の指定です。
iPhoneは57ピクセル(Retinaディスプレイのものは114ピクセル)、
iPadは72ピクセル(Retinaディスプレイのものは144ピクセル)のアイコンが表示されるようです。
Twitter Bootstrap のサンプルでは上記のように4種類指定されていました。
ちなみに、sizes属性を付けない場合は512×512ピクセル、もしくは1024×1024ピクセルの画像を指定することになるそうです。
…でか過ぎじゃないですかね(汗)
ちなみに、「apple-touch-icon-precomposed」の代わりに「apple-touch-icon」を指定する方法もありますが、ここでは割愛します。


あと、次のは作法ではないですが、後方互換のためのメモです。

<!--[if lt IE 9]>
<script src="html5shiv-printshiv.js"></script>
<script src="IE9.js"></script>
<![endif]-->

「html5shiv-printshiv.js」はIE8以前でもhtml5のタグを使えるようにするものです。
html5shivというプロジェクトのものです。
このプロジェクトの成果物にはhtml5shiv.jsというものもあるのですが、
html5shiv-printshiv.jsはプリントアウト対応ということなので、こちらを定義しておけば間違いないかと。
(サイズはこちらの方が大きいので必要に応じて使い分けた方がいいですが)

IE9.jsはIE8以前のブラウザの挙動を出来るだけIE9に近づけるようにするものです。
これは、ie7-jsというプロジェクトのものです。
同様のプロジェクトも色々あるようですが、これが一番無難かと。
そんなに高性能じゃないので、IE8での「border-radius」等は実現できないようです。

他にもCSS3PIEModernizr等もよく使われていますが、これはサイトによっては必要ないかもしれません。

参考:
HTML5☆BOILERPLATE
Twitter Bootstrap

コメントはまだありません »

コメントはまだありません。

TrackBack URL : http://www.meibinlab.jp/nishijima/archives/140/trackback

コメントする