【html】自分用のHTMLテンプレートを作ろう！ - フレームワークを探せ！編

April 26, 2013 by みなもと

レディース・エン・ジェントルメン。

And お父っつぁんお母っつぁん、おこんばんわ

みなもとです。

最近までしこしことコーディングに精を出したりしてたわけですが、

「もっと効率よく、キモチよく作業してーな」ってな事を考えたりしてました。

そうなってくると自ずとフレームワークの話になってくるわけですが、

これまで、あまり良いのに巡りあったことがありません。（~~そもそもそんなに調べてない~~）

僕が求めるのは、

html5でマークアップ
必要最低限のスクリプトで構成
下地が真っさら

ぐらいですが、

『これくらいなら自分で作ったほうが早いわ』って話しなのか、

あまり見かけません。（~~そもそもそんなにｓ~~）

「つっても、フレームワークガン無視すんのもバカって思われるしなあ」

という、後ろ向きな理由で期待せずに探していたらありました。

HTML5 ★ BOILERPLATE（通称：H5BP）

どうやらgoogleさんやMicrosoftさんからモテモテキュートなニクいヤツらしいです。

おそらく、知らなかったことは恥ずかしいことなんだと思いますが、

無知は若さの特権なので全力で行使していきます！

H5BPの特徴

コイツの特徴は

構成がシンプルだからとにかく軽いよ★
ダウンロード前にカスタマイズできるよ★
Modernizr.jsでIE対策はバッチリだよ★
Normalize.cssを使ってるからエコだよ★
忘れがちな.htaccess、Robots.txtとかの設定ファイルもあるよ★
もちろんjqueryもgoogleアナリティクスも標準装備だよ★

とまあ至れり尽せりなんですが、

出しゃばり過ぎない奥ゆかしさも持ち合わせた大和撫子(外国産)です。

擬人化への期待が止まりませんね★

ダウンロードの方法

そのままでもサクっとヌルっと使えますが、

カスタマイズと聞けば男のロマンが黙っちゃいないです。

折角なのでカスタマイズしてダウンロードしましょう！

トップページから**【Get a custom build】**をクリックすると、

レスポンシブ対応とかブートストラップ対応とか選べますが、

今回はシンプルに戦いたいので【Classic H5BP】をクリックします。

するとニュルっとチューニングオプションが現れるので、要る or 要らないを整理しましょう。

上３項目は説明不要の総スルーで行きますが、

下のH5BP Optional。

やたらたくさんありますが、こいつら一体なんぞや？

ちゅーことでまとめました。

IE Classes: IE対策用です。↓こんなの。

スタイルシートの挙動などをIEのバージョンごとに切り分けられます。
Chrome Frame: IE対策用です。
IEをGoogleChromeへと返信させる魔法のアドオンChromeFlameの導入をIEユーザーへ促せます。
Google Analytics: かの有名なgoogleさんが運営するアクセス解析です。
これ用のjsがソースのフッタ部分に書き込まれます。
Google Analytics
.htaccess: サーバーの動きを決定する設定ファイルです。
自分で作ってもいいけど、最初っから色々設定されてるので便利。
Favicon: サイトを表示したりブックマークした時とかに表示されるアイコン。要る。
Apple Touch Icons: サイトをiOSでホーム画面に追加する時に表示されるアイコン。
スマホで表示される可能性があるなら要る。
plugins.js: jQueryのプラグインとかのjsをまとめて読み込むのに使います。
シビアな読み込み速度が求められるなら使いたいところ。
Robots.txt: GoogleやBing等の検索エンジン向けの設定ファイルです。
検索されたくないページを設定出来ます。
Humans.txt: チームで作るときとかに便利なメモ書きです。
必要ではないですが、書いとくと後からチームに参加した人とかが分かりやすくなります。
404 Page: エラーページです。
自作ページで十分ですがgoogle検索などが最初から組み込まれてるので、
ここから改変していくのも良いと思います。
Adobe Cross Domain: 自分のサイト上のファイルを別ドメインのFLASHから読めるようにするか？ってヤツです。
個人サイトじゃまず要らないと思いますが、Webサービスとか作る時は置いとくと良いことがあるかも知れない。
よくわかんない。

自分に必要なものを選んだら【Download it!】をクリックです。

100KB前後で収まるので速攻でダウンロードが終わります。

そしてZIPファイルを解凍すると、

わーい！わーい！

……さて、どうしよう。

次はファイルの中身を掻っ捌いて自分用にカスタムしていきます！

震えて待て！