HTML5のサイトが素早く作れるフレームワーク「HTML5 Boilerplate」をちゃんと触ってみた
この記事は約9分ぐらいで読めます
HTML5 Boilerplateとは
HTML5 Boilerplateは、web上で利用者が必要な機能を選択した上で、その要件を満たすHTML、CSS、.htaccess、favicon等の各種ファイルをダウンロードできるHTML5のフレームワークです。
実はポップ？なデザイン(いまはそうでもなくなっていますが、前は★マークの目立つデザインとレトロな配色で、親近感を持っていましたｗ)と考え方がすごく気に入っていて常々使ってみたいと思っていたんですが、全く使い機会がなくてですね…ｗ
HTML5 Boilerplateの特徴
HTML5 Boilerplate
何も考えずにサイトトップのダウンロードボタンをダウンロードするだけでも全然良いと思います。そうした場合と、その横のGet a custom buildボタンを押して必要なパーツを指定した場合とで、ダウンロードファイルの内容が変わります。HTMLファイルだけでなく、
- アナリティクスコードやアイコンその他
- Normalize.css等の補助的CSS
- jQueryやModernizr
- パフォーマンスを高める設定ファイル
といった各種ファイルのひな形がダウンロードできます。
そのほかにも、デフォルトで404.html、humans.txt、crossdomain.xml(Flashから外部ファイルを呼び出す為のカスタムポリシーファイルというもの)等もセットに入っています。
英語ではありますが、動画での説明までしてくれます。
徹底したIE対応
HTML5をいち早く採り入れたフレームワークとして有名になっただけあって、そのIE対応は完璧です。ModernizrとIEのバージョンごとのclassの振り分けに加え、古いIEを使っている人にChrome Frameのインストールを促す設定、更に旧ブラウザーにHTML5のタグを認識させるhtml5.jsまでを選択することが出来るようになっています。
下記にあるような一般企業のサイトにも採用されている理由はここにもあると思います。
HTML5 Boilerplateの採用事例
トップ部分には、webでもっとも有名なフロントエンドテンプレート
と書かれてますね。
言葉通り、このフレームワークはGoogleやMicrosoft等の有名企業のプロジェクトページにおいて使われています。
HTML5 Boilerplateの使い方
前述の通り単にDownloadボタンを押すだけでもいいんですけど、せっかくなのでファイル構成をカスタムしてみましょう。Get a custom buildを押すと、Initializrというサイトに飛びます。
HTML5 Boilerplateのダウンロードファイルカスタムに関する機能はInitializrに吸収されたって事なんでしょうかね？その辺はよくわかりませんけど、とりあえずここで装備を整えることになります。
設定の前に
とりあえず自分が作ろうとしているサイトに使うフレームワークにどの程度の機能を求めるかで、ざっくりとダウンロードするセットを決められます。
Pre-configuration
- Crassic H5BP
- Responsive
- Bootstrap
Classic H5BPは従来のHTML5 Boilerplateのセットです。HTMLにはメタ情報のみを含み、ModernizrとjQueryが読み込まれるのみです。
Responsiveを選ぶと追加でRespond.jsが読み込まれ、モバイル・ファーストなコードテンプレートが追加されます。
Bootstrapを選ぶと、Twitter BootstrapのCSSが読み込まれ、対応したテンプレートが読み込まれます。
チューニングとオプション
上記の項目を個別に選択できるとともに、jQueryをミニファイせずに通常の状態で読み込むか、Modernizrではなくhtml5.jsを使ってIE対応をする等の選択が出来ます。
更にダウンロードファイルに
- IE向けのclassの付与
- ファビコン
- Humans.txt
- Chrome Frameの設置
- Appleアイコン
- 404.html
- Google Analyticsコード
- jsファイルのひな形
- Crossdomain.xml
- .htaccess
- Robots.txt
といったオプションを含むかを選択できます。
HTML5 Boilerplateは汎用的に使えるテンプレートであることを目指している為、何が汎用的なテンプレートなのかについて盛んに話しあっているようです。
HTML5 Boilerplate, Initializrをこれから使う人が押さえるべき5つの原則 | ゆっくりと…
Respond.jsとレスポンシブWebデザインをめぐるベストプラクティス議論 | ゆっくりと…
この二つの記事にはこれまでの流れの様な事が日本語で説明されているので気になる人はチェックしてみてください。
HTML5 Boilerplateのダウンロード
文章で説明すると長かったですけど、実際内容がわかっていればちょっと選択してダウンロードですね。
HTML5 Boilerplateのファイル構成
H5BPのファイル構成
以上の様なファイルがダウンロードされます。.htaccessの中もかなり細かい設定をしていますが、ちょっと一つ一つまでは確認してません＞＜
HTML5 Boilerplateが向いているwebサイト
ファイル一式が用意されているので、サイトを作ろうとしている段階から採用することに決めていればどんなサイトにも合うかと思います。
特に1ページのティザーサイトや、プロフィールサイト、コーポレートサイト等でも威力を発揮するでしょう。
このフレームワークには旧ブラウザーにCSS3を適用するPIE等のビヘイビアスクリプト等は含まれていません。そういった手段で旧ブラウザーに角丸などの表現を対応させることもできるでしょうが、この選択項目に採用されていないことを考えると、あまりオススメはしていなさそうです。私ももう使ってないですねーｗ
WordPressのテーマもあります。
おれはHTML5 Boilerplate(ボイラープレート)を使い始めるぞ！ジョジョーッ！！ | WP-D
この記事で紹介されているのでチェックしてみてください★
終わりに
今週から、毎週新しいweb制作技術に最低一個ずつ触れていくという習慣をつけることにしました。そういう動機なのでこの記事自体は特に目新しい情報はないかと思いますが、興味を持たれた人は試してみると良いと思います★
とりあえず手始めはこのフレームワークだったわけですが、他にも興味はあるのに手をつけられていないフレームワーク、webサービス、CMS、API、CSSプリプロセッサなど…やってみたいことはたくさんあるので、どんどん手を出してみたいと思います。
面白そうな技術を知って、それを使うタイミングを待っていてもなかなか来ないもんだなとわかったので、その時が来るまでにとりあえずは使っておこうかなと思っています。