mypglog

プログラミングやデザインの事をメモ等かねながら

HTML5でコーディングする時のテンプレート的なやつ

しょっちゅうコーディングされる方は自分なりのHTML5のテンプレート的なものを使っているかと思うのですが、その中でも私が良く使っているのはこんな感じです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <title>HTML 5 templete</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <!--[if lt IE 9]>
    <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]-->
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/common.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello World</p>
</body>
</html>

X-UA-Compatible

web屋として鬱陶しい事この上ないIEの互換モード封印のため記述

IE8以下の対策

html5やCSS3をある程度解釈してくれるように

  <!--[if lt IE 9]>
    <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]-->

このコードを追加しています。
ただし、クライアントにHTML5で対応して欲しい…と言われた際や、IE8以下は無視してもいいなんて言われた時に保険で入れておいてあります。
予め仕様要件としてIE8以下も含まれているのであれば最初からXHTMLで書くべき。

その他

CSSはそのままwordpressに乗せる事が多いのでstyle.cssのみトップディレクトリに配置してありますが、そのへんは好みかと思います。
wordpress管理画面から編集の必要がないのであれば、他ファイルと同じcssディレクトリへ。