『html5-boilerplate』は無償でコピー、加工、再配布が可能なHTML5ベースのテンプレートパッケージです。
このパッケージのコンセプトとして、フロントエンド(初期段階)にかかる作業を短縮して、高速で堅牢、柔軟性のあるWEBアプリやサイトを素早く構築することを掲げています。
フロントエンド(初期段階)にかかる作業というと、各ブラウザの対応、CSSのリセット、jQuery、Modernizrのライブラリ対応、モバイル・スマホ対応、ApacheやGoogleの解析コードなど、これらを基本に構築をスタートすればさくさくプロジェクトステートできますというのが『html5-boilerplate』です。
HTML5 BOILERPLATE ショールーム
グーグル、マイクロソフト、米航空宇宙局(NASA)でのプロジェクトサイトでも『html5-boilerplate』のテンプレートを利用しているみたいです。他にも『html5-boilerplate』で作成されたサイトが紹介されています。
テンプレートデータのダウンロード
HTML5 Boilerplate、Initialiのサイトからダウンロードすることができます。
テンプレート『HTML5 BOILERPLATE』の内容
html5boilerplate.com から、ダウンロードしたデータを解凍して生成されるファイルの内容は以下のようになっています。(※2013年12月現在)
.gitattributes .gitignore .htaccess 404.html apple-touch-icon-precomposed.png CHANGELOG.md CONTRIBUTING.md crossdomain.xml favicon.ico humans.txt index.html LICENSE.md README.md robots.txt tree.txt │ ├─css │ main.css │ normalize.css │ ├─doc │ crossdomain.md │ css.md │ extend.md │ faq.md │ html.md │ js.md │ misc.md │ TOC.md │ usage.md │ ├─img │ .gitignore │ └─js │ main.js │ plugins.js │ └─vendor jquery-1.10.2.min.js modernizr-2.6.2.min.js
基本ファイル・ドキュメント
ファイル名 | 補足説明 |
---|---|
.gitattributes | Gitを使ったソース管理用の設定ファイル。公開時には必要のないファイルです。 |
.gitignore | Gitを使ったソース管理用の設定ファイル。公開時には必要のないファイルです。 |
.htaccess | Apache用の設定ファイル。 |
404.html | 404ページテンプレート。 |
apple-touch-icon-precomposed.png | アップル用アイコンイメージ。 |
CHANGELOG.md | ソースコードの改変履歴。 |
CONTRIBUTING.md | 利用しているライブラリやバグ内容、ソース管理についてのメモ。 |
crossdomain.xml | Flashから別ドメインにある外部ファイルを読む場合の設定ファイル。 |
favicon.ico | favicon用アイコンイメージ。 |
humans.txt | 検索ロボット向けにrobots.txtがあるように、humans.txtは人間向けのサイト紹介テキストです。 |
index.html | ページテンプレート。 |
LICENSE.md | ライセンスについて。 |
README.md | 読んでね |
robots.txt | 検索ロボット向けの「robots.txt」 |
CSSファイル
ファイル名 | 補足説明 |
---|---|
normalize.css | CSSの基本セットに「normalize.css」を使用しています。リセット系のCSSのように値をクリアにするより、デフォルト値を標準化して定義しています。 |
main.css | 基本的な要素への設定、フォント、clearfix、印刷用、モバイル用のメディア別にも設定が書かれています。 |
JavaScriptファイル
ファイル名 | 補足説明 |
---|---|
main.js | 内容は空になっています。 |
plugins.js | jQueryのプラグインや他のサードパーティスクリプトなどのプラグインを追加する場合に利用できます。 |
jquery | jQueryのライブラリです。 |
modernizr | HTML5、CSS3 の機能が使えるかどうかをテスト、対応状況に合わせて別途 CSS, JS を読み込む機能があります。 |
『html5-boilerplate』はデザインなどの装飾が無い状態から構築が出来るのでオリジナルでのカスタマイズがしやすいと思います。