その他

HTML5+CSS3の導入時に役立つ7つの設定

こんにちは、鴨田です。

個人的に仕事の大半はスマートフォン関連なので、
最近のマークアップはほとんど全てHTML5+CSS3で行っています。

とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。

ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。

1.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/

2.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

3.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

4.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/

5.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

6.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

7.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には戻れなくなるのではないでしょうか。

前の記事へ

次の記事へ

一覧へ戻る

「その他」カテゴリの最新記事

PAGE TOP