ども、パープル・ヘイズのフィギュア買うかどうかどうしようかなあ。と悩み中のパープルです。表題でも叫ばしていただきました通り、今日はHTML5でサイトを構築していくためのベスト・プラクティスと言われているHTML5 Boilerplate(ボイラープレート)についてのお話です。知っている人は知っていますし、すでに使い初めているでしょう。というかこれを使わないと話にならないよ。ぐらいの感じかもしれません。
転換期を迎えたっぽいWEB制作環境
なにやら昨今は、インブラウザデザインや、Sassにless、フレームワークにパッケージ、レスポンシブでモバイルファーストで、プログレッシブ・エンハンスメントですから、WEBサイト構築が激変している感じがしますよね。日々取り残されていくような焦燥感に苛まれながら、なんとか新しい情報をキャッチアップして消化していかなきゃなと思う日々です。まあそうボヤいていても仕方ないので、一つ一つ取り組もうぜってことで、第一歩目が今回のHTML5 Boilerplate(ボイラープレート)です。
説明はいいからどうしたらいいんだ？
はい、そういった気の短めの方はまずこちらから最新版をDLしてください。
おもむろに解凍して、中にあるindex.htmlをブラウザで開いてください。 はい、こちら。
ねえ。。。一行だけ。。 そうなんです。でもこれが最先端の Web 開発のために完成されたBoilerplate(ボイラープレート)＝ひな型なのです。
何がどうすごいんだね？
詳しくてわかりやすい説明記事が以下にありますから、時間のある方や、確りと理解したいという方はこちらを御覧ください。
の中でとくに良さがわかりやすいのを3つ上げます。
リセットでなくてノーマライズ normalize.css（ノーマライズCSS）が同封
各ブラウザ間のCSS解釈の差異を埋めるために使われるものですね。リセットCSSが主流でしたがこれからはこっちの方向になりそうです。
リセットがいい！いやノーマライズだ！という議論もありますが、そこはそれで柔軟に使いやすい方で取り入れましょう。時流はこちらという感じでしょうか。
旧ブラウザなどでもHTML5の新しいタグに対応してくれるJS、Modernizrとhtml5shivを完備！
HTML5であたらしく増えたタグである article や section といったタグに対応していないブラウザでも何とかしてくれるってことですね。助かります。助かります。
モバイルファーストなレスポンシブに対応したメディアクエリのサンプル main.css 付き！
@media only screen and (min-width: 480px) なにがしってやつですね。書き方のイメージとしては最初に一番小さな幅で必要なCSSを書き、順々にメディアクエリの設定を大きくしながら、CSSを追加していくという感じです。
文字ばっかりでわかんないよ。。
そういうかたはこちらの動画をご覧ください。英語だけどお姉さんが分り易く説明してくださっています。ライブコーディングもあるから、本当にぼーっと見るだけでも十分内容はわかるとおもいます。
http://youtu.be/NMEB78VX2P0
新しく勉強することが今後の制作の時短にきっと繋がる！
とまあ、ここまでHTML5 Boilerplateの説明をざっくりしましたが、やっぱこういう新しいのを勉強するのって、面倒だし時間がかかると思うんです。いままで培ってきたWEB制作のノウハウがあれば、今時点ではそちらのほうが、勝手が解ってて楽だし早いかもしれません。でもこれからは変わるんです。紹介したHTML5 Boilerplateの中で使われているCSSやJSはGitなどでオープンソースとして公開されてますよね。ということは、これからも時流に乗ってどんどん進化するんです。ということは、今後新しいサイトを構築するたびにHTML5 Boilerplateの最新版を使っておけば、常に最新のノウハウをすぐに流用できるということなんですよね。こりゃー使わない手は無いですね。
WordPressのテーマになっているものもあるよ！
さて、ここまでHTML5 Boilerplateを知れば、いざ使おう！となりますよね。WordPressのテーマに組み込むぞ！みたいなね。そこも大丈夫。すでに開発が進んでいるのがあるわけですよ。本当にシンプルにただテーマ化したものが使いたいということであれば
がいいでしょう。さすがにシンプルすぎて、もう少し形になったのないですか？ということであれば、前回ライムがTwitter Bootstrapを使って短時間でWordPressテーマを作る。で紹介した、Twitter Bootstrap。これはHTML5 Boilerplateのサブセット（わかりやすく、すぐ使えるようにカスタマイズしたもの）という位置づけです。それがそのままWordPressのテーマになった
というのもあります。もちろんレスポンシブですね。レスポンシブといえば、レスポンシブなテーマ作りを試すならの中で触れている
こちらもHTML5 Boilerplateをベースに作られています。なんだかこうやってまとめると点と点が線に繋がるような感じがしますね。実際に当サイトはBonesの子テーマとして制作しています。Bonesでは、さらにSassとless2種類のCSSプリプロセッサが丁寧に同封されているので、そこもオススメポイントの一つですね。これはまた次の機会に触れたいと思います。
いやー、ディレクターだからこう云うのは勉強しなくても、できなくてもOK！ なんて甘い考えでいたんですけど、そういうことではこの業界ではすぐに役立たずになってしまいそうですね。楽しみながら学び続けたいものです。
ありがとうございました。
著者情報
