HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。
個人的に仕事の大半はスマートフォン関連なので、
最近のマークアップはほとんど全てHTML5+CSS3で行っています。
とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。
ですので 、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。
１．HTML5の初期テンプレート案
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 初期テンプレート</title>
<!-- reset.cssの設定 -->
<link rel="stylesheet" media="screen" href="reset.css" />
<!-- Viewportの設定 -->
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, minimum-scale=0.5 , maximum-scale=2">
<!-- Media queriesの設定 -->
<link rel="stylesheet" media="screen and (max-width: 65025px)" href="style.css" />
<link rel="stylesheet" media="screen and (max-width: 640px)" href="mobile.css" />
<!-- jQuery,jQuery Mobileの設定 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<!-- Modernizrの設定 -->
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
<!-- IE向けの設定 -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
HTML5 初期テンプレート
</body>
</html>
コメント付きで書かれているタグについては、全て省略可能です。
逆に言えば、コメント付きのタグを除いた部分が
HTML5の本当の初期テンプレートになります。
HTML4.01やXHTML1.0に比べ、随分シンプルなものになっています。
参考リンク：
「HTML5リ ファレンス」による初期テンプレート
http://labs.cubit.ne.jp/html5/sample/13/2/
HTML5のテンプレートを作成してくれるオンラインサービス「Initializr」
http://www.initializr.com/
「HTML5.JP」
http://www.html5.jp/
２．reset.cssの設定
<link rel="stylesheet" media="screen" href="reset.css" />
HTML5でももちろん、reset.cssは欠かせない存在です。
何を使ってもいいとは思いますが、 探すのが面倒なようでしたら、
下記の参考リンクからどうぞ。
参考リンク：
「HTML5 Doctor」
http://html5doctor.com/html-5-reset-stylesheet/
「HTML5 RESET」
https://github.com/murtaugh/HTML5-Reset
３．Viewportの設定
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, minimum-scale=0.5 , maximum-scale=2">
MetaタグによるViewport設定で、widthを設定することにより、
ブラウザの横幅を規定することが出来ます。
仮にViewportの設定をしない、
あるいはwidth=device-width(ブラウザの横幅をViewportの幅と する)とした場合、
端末の横幅解像度が640pxで、320pxのコンテンツを表示した場合は、
画面の半分にしかコンテンツは表示されません。
もし、Viewportをwidth=320とすれば、たとえ端末の横幅解像度が640pxであっても、
320pxのコンテンツを表示した場合は、画面一杯にコンテンツが表示されることになります。
Viewportの詳しい設定については、各自で調べてみてください。
上記設定は、幅はブラウザの幅とし、デフォルト1倍、最小0.5倍、最大2倍までズーム可能ということになります。
PC向けサイトには特に設定する必要はありませんが、スマホ向けサイトでは重要な設定になります。
参考リンク：
Viewport [iPhone生活]
http://ipn3g.com/web/study3.html
４．Media Queriesの設定
<link rel="stylesheet" media="screen and (max-width: 65025px)" href="style.css" />
<link rel="stylesheet" media="screen and (max-width: 640px)" href="mobile.css" />
※コメントのご指摘により、順番を逆にしました。コメントありがとうございます。
Viewportとは逆に、Media Queriesではブラウザの横幅に合わせて、
表示するcssを変えることが出来ます。
上記の設定では、640pxまではmobile.cssを適用し、
65025pxまではstyle.cssを適用することになります。
※追記
CSSは上から順番に読み込まれるので、max-widthが大きいものを上にしてください。
参考リンク：
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/
５．jQuery & jQuery Mobileの設定
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
特にHTML5+CSS3とは関係ないのですが、
どのようなサイトにおいても、jQueryの存在は欠かせないと思います。
スマホ用サイトであれば、jQuery Mobileを使用することで、
簡単にスマホアプリライクなUIやアニメーションを使うことが出来るようになります。
jQuery Mobileの説明に関しては、下記で。
参考リンク：
「jQuery」
http://jquery.com/
「jQuery Mobile」
http://jquerymobile.com/
jQuery Mobile 日本語リファレンス
http://dev.screw-axis.com/doc/jquery_mobile/
スマホ用JavaScriptフレームワーク5つ＋1を徹底研究
http://www.atmarkit.co.jp/fsmart/articles/sma_jslib/02.html
jQuery Mobileを試してみました
http://blog.asial.co.jp/830
６．Modernizrの設定
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
Modernizrは、CSS3の各プロパティがブラウザで対応しているかどうかを判別し、
htmlタグのクラスに反映してくれるJavaScriptになります。
Modernaizrに関する情報は他にもたくさんあるので、調べていただくとして、
CSS3の対応状況によって、別のスタイルを割り当てることができるので、
ブラウザ別に細かい調整を行いたいときに便利です。
なお、CDNだと全てのプロパティに対応しているので、
カスタマイズしたい場合は、本家サイトからカスタマイズしてください。
参考リンク：
「Modernizr」
http://www.modernizr.com/
「Modernizr」 モダンなクロスブラウザCSSの為の支援スクリプト
http://blog.mach3.jp/2010/07/modernizr-js.html
絶対に使いたい、modernizr 2.0
http://all-web-blog.blogspot.com/2011/03/modernizr-20.html
７．IE向けの設定
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
残念なことに、IEではほとんどHTML5やCSS3に対応していないので、
JavaScriptを使って、HTML5から導入された新しいタグを認識させる必要があります。
また、Media Queriesにも対応していないので、こちらもそれ用のJavaScriptを使います。
他に、IEでCSS3を使えるようにするJavaScriptもあります。
参考リンク：
IEにHTML5を認識させる「html5.js」
http://d.hatena.ne.jp/mystandardcojp/20110523/1306118355
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
http://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html
以上です。
全てを設定する必要はないので、目的に合わせて適宜取捨選択してください。
HTML5+CSS3と言っても、難しく考える必要はないので、
まだ触ったことのない方は一度触ってみるといいと思います。
その便利さのあまりHTML4orXHTML1.0+CSS2.1には戻れなくなるのではないでしょうか。
