Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
こんにちは、鴨田です。

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

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

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


1.HTML5の初期テンプレート案
  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.     <meta charset=utf-8 /> 
  5.     <title>HTML5 初期テンプレート</title>
  6.  
  7.     <!-- reset.cssの設定 -->
  8.     <link rel="stylesheet" media="screen" href="reset.css" />
  9.  
  10.     <!-- Viewportの設定 -->
  11.     <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, minimum-scale=0.5 , maximum-scale=2">
  12.  
  13.     <!-- Media queriesの設定 -->
  14.     <link rel="stylesheet" media="screen and (max-width: 65025px)" href="style.css" />
  15.     <link rel="stylesheet" media="screen and (max-width: 640px)" href="mobile.css" />
  16.  
  17.     <!-- jQuery,jQuery Mobileの設定 -->
  18.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
  19.     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  20.     <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
  21.  
  22.     <!-- Modernizrの設定 -->
  23.     <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
  24.  
  25.     <!-- IE向けの設定 -->
  26.     <!--[if IE]> 
  27.       <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  28.       <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  29.     <![endif]-->
  30.  
  31.   </head> 
  32.   <body> 
  33.     HTML5 初期テンプレート
  34.   </body> 
  35. </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の設定

  1. <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の設定

  1. <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の設定

  1. <link rel="stylesheet" media="screen and (max-width: 65025px)" href="style.css" />
  2. <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の設定

  1. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
  2. <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  3. <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の設定

  1. <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向けの設定

  1. <!--[if IE]> 
  2.   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  3.   <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  4. <![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には戻れなくなるのではないでしょうか。

コメント

  • にゃにゃし

    もしかして

    <link rel="stylesheet" media="screen and (max-width: 640px)" href="mobile.css" />
    <link rel="stylesheet" media="screen and (max-width: 65025px)" href="style.css" />

    の部分は

    <link rel="stylesheet" media="screen and (max-width: 65025px)" href="style.css" />
    <link rel="stylesheet" media="screen and (max-width: 640px)" href="mobile.css" />



    <link rel="stylesheet" media="screen and (max-width: 640px)" href="mobile.css" />
    <link rel="stylesheet" media="screen and (min-width: 641px) and (max-width: 65025px)" href="style.css" />

    ではないですかにゃ?

  • 鴨田

    にゃにゃし様

    コメントありがとうございます。
    確かにご指摘の通りですので、そのように修正させていただきました。

    範囲指定した方がより親切かつ間違いが起こりにくいですよね。

  • HTML5なのに「 />」があるのはなぜですか?

  • 鴨田

    HTML5では、空要素の終端スラッシュは書いても書く必要はないようなのですが、
    ここで終わりますよ、と宣言したい個人的な都合です。

  • SCR Catalyst

    先日、開発中のスマフォアプリで異常にメモリが消費される現象が起こり、これがタグの構造が深すぎると起きるのでは無いかという検証を行うために、出来るだけ少ないタグで画像を中央寄せさせたい場面がありました。

  • ユッキー

    はてなブックマークからきました

    とても参考になりました

    ありがとうございます

  • 毒舌野郎

    なるほど

    参考になりました

    他の記事も拝見させていただきます

    ありがとうございます

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事