15秒でHTML5サイトのテンプレートが作成できる「Initializr」

杉山貴章(オングス)
2012-03-01 19:30:00
  • このエントリーをはてなブックマークに追加
最新特集【一覧】

Initializrでもっと手軽にHTML5を始める

 H5BPは非常に強力なテンプレートツールだが、機能が多いため、実際に使用するためには不要な機能を除外するなどのカスタマイズが必要となる(とは言っても大抵はディレクトリを削除するだけで完了だが)。

 そこで登場するのが「Initializr」だ。InitializeはH5BPをベースにして開発されたツール(サービス)であり、Webサイト上で使用するテンプレートや設定を選択するだけで、最適化されたテンプレートを生成してzipファイルとしてダウンロードできるようにしてくれる。公式サイトで謳われているように、本当に15秒で、Webサイト開発の開始点として実用できるテンプレートが完成してしまうのだ。

 Initializrでは、H5BPのデフォルトのテンプレートの他に、Responsiveと呼ばれるInitializr独自のテンプレート、そしてTwitter Bootstrap 2のテンプレートの3種類がある。

 まずはこのいずれかを選択すると、続いて図1のように使用するライブラリや設定ファイルの選択肢が表示される。ここで必要な項目にチェックを入れて、下部の[Download it!]ボタンをクリックすれば、テンプレートが生成されてzipファイルとしてダウンロードできる。[What's inside?]ボタンでは、生成されるテンプレートを1枚のファイルにまとめたものを見ることができる。

図1 Initializrを使うための設定はこれだけ 図1 Initializrを使うための設定はこれだけ
※クリックで拡大画像を表示

 生成されたテンプレートのディレクトリ構造は図2のようになっている。見ての通り、基本構造はいたってシンプルだ。

 index.htmlもシンプルな構造なので、基本的にはこれを参考にしてWebページを作成すればよい。JavaScriptコードのロードが最後に記述されているあたりは、読み込み時間短縮のための基本的なテクニックだ。先頭に古いIE用の<html>タグが別途記述されているが、これはIE用にスタイルシートを用意しなくても、クラス名によってスタイル設定を使い分けるというテクニックだ。

 InitializrやH5BPを使えば、特別な知識やノウハウがなくてもクロスブラウザ対応でかつ高パフォーマンスなHTML5のWebサイトを作り始めることができる。また、Webサイト構築のための様々なノウハウが凝縮されているので、それを学習する目的でも活用できるだろう。

キーワード解説一覧

Keep up with ZDNet Japan
ZDNet JapanはFacebookページTwitterbuilder)、RSSNewsletter(メールマガジン)でも情報を配信しています。

  • 新着記事
  • 特集
  • ブログ