@ HTML

HTML5 Boilerplate

HTML5 Boilerplateはウェブサイトやアプリケーションを作成するのためのテンプレートです。
HTML5でサイトを作成するとき、さまざまなブラウザまたはデバイスに対応する必要があるならばHTML5 Boilerplateは優れた選択肢の一つになります。

Boilerplate のダウンロード

<HTML5 Boilerplate> にアクセスして、[Download v.x] からダウンロードします。

CSS と JavaScript ライブラリの構成モジュールについて。

CSS / main.css

ベースになるCSSが定義されています。

CSS / normalize.css

デフォルト値が異なるプロパティを標準化すべく定義されたスタイルシートです。従来のリセット系 CSS を使ったスタイル定義に比べ、最終的な定義量が少なくなるというメリットがあります

normalize.html は normalize.css の動作確認ファイルです。

normalize.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>sample</title>
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
body
</body>
</html>

demo

JavaScript / Modernizr.js

Modernizrは、HTML5/CSS3の新機能が対象のブラウザに対応しているか調べたり、
対応していなければ、その結果を<html>タグのクラス名に設定します。
IE8以前の古いブラウザを対象に含めつつ、HTML5でWebサイトを制作する場合には、欠かせないライブラリです。

※modernizr.htmlは、Modernizr.jsの動作確認ファイルです。IE8 / 7 / 5 で section 要素を使うことができます。

modernizr.html

<!DOCTYPE html>
<html lang="ja" class="no-js">
<head>
  <meta charset="utf-8">
  <title>sample</title>
  <style>
section {
  color: #FF0000;
}
  </style>
  <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>
  <section>
    <h1>section</h1>
  </section>
</body>
</html>

demo

JavaScript / main.js

サイトやアプリで使用もしくは参照するために使います。

JavaScript / plugins.js

jQueryのプラグインや他のサードパーティスクリプトのような、すべてのプラグインの記述をまとめてしまう方法がとられ、plugins.js が用意されています。

それぞれのファイルの役割

404.html
404(Not Found)のときに表示されるページです。
apple-touch-icon-precomposed.png
iPhone/iPadのホーム画面にあなたのサイトが追加されたときに表示されるアイコンです。
CHANGELOG.md
バージョン情報。
CONTRIBUTING.md
寄付に関する情報。
crossdomain.xml
HTMLファイルが置かれているドメインのサーバ以外のサーバとの通信設定ファイル。
favicon.ico
Webブラウザのブックマーク(お気に入り)機能で表示される、そのWebサイトのアイコン画像。
humans.txt
人間向けの情報を記述したテキストファイル。
LICENSE.md
ライセンス情報。
README.md
一般的な情報を記載したファイル。
robots.txt
検索エンジン向けの情報を記述したテキストファイル。
書式に従って書くことで検索エンジンのクローラーにクロールして欲しくないページを知らせる。

ルート以下全てのファイルへのクロールを禁止する場合の記述例は次のようになります。

User-Agent: *
Disallow: /

index.htmlの記述の概略

html要素のコンディショナルクラス

IEのバージョンによって、「lt-ie9」「lt-ie8」「lt-ie7」のクラスが付加されます。例えば、

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

では、

“[if lt IE 7]“つまりIE7より古いバージョン(IE6,IE5..)の時に、
lt-ie9、lt-ie8、lt-ie7というクラスがCSS記述の際に使えるようになります。

これによって、IE6のみ背景画像を非表示にしたい場合は、

.lt-ie7 body { bacground-image: none; }

と記述することで、CSSの振り分けが行えます。

conditional.htmlは、IE7より古いバージョン(IE6,IE5..)の時に背景を #99cc00 で表示します。

conditional.html

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<html>
<head>
  <meta charset="utf-8">
  <title>sample</title>
  <style>
.lt-ie7 body {
  background-color: #99cc00;
}
  </style>
</head>
<body>
body
</body>
</html>

demo

no-jsというクラスはmodernizr用class、modernizrがJSが有効の場合はno-js→jsにclassを変更してくれる。開発者はno-jsのclass指定でjs無効ユーザに向けてのスタイルを記述できるようになります。

コンディショナルコメントの記述例

<!--[if lt IE 8]> ブラウザがIE8未満の時(IE7 IE6)
<!--[if lte IE 8]> ブラウザがIE8以下の時(IE8 IE7 IE6)
<!--[if IE 8]> ブラウザがIE8の時(IE8)
<!--[if gte IE 8]> ブラウザがIE8以上の時(IE8 IE9)
<!--[if gt IE 8]> ブラウザがIE8超の時(IE9)

META要素によるIE対策

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

ここでは、IEによる表示崩れを最低限に抑えるための設定をしています。
content属性の「IE=edge」は、“IEが利用できる最も互換性の高いモードでコンテンツを表示”させるための記述です。

viewportによるモバイル対策

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

viewportとは、モバイルブラウザのウインドウサイズや表示解像度、倍率などを設定する場所です。

例えばiPhoneでは、viewportの初期設定の表示解像度は980pxになっています。iPhoneというデバイスの横幅は320pxですので、viewportを設定しなければ、980pxのコンテンツを、倍率を縮小して320pxの幅におさめたような状態で表示されます。