HTML5 Boilerplateで、まっさらなindex.htmlから書き始める作業をやめた

はじめに

新しいプロジェクトを始めるとき、<meta charset="utf-8"> から書き始めて、favicon の設定を思い出し、印刷時のスタイルを毎回ググり直す……という経験はないでしょうか。1つ1つは小さな作業ですが、積み重なると地味に時間を奪われます。

HTML5 Boilerplateは、この「毎回同じことをやり直す」問題を解決するフロントエンドテンプレートです。10年以上にわたって200人以上の開発者が知見を積み重ねてきたスターターキットで、推奨メタタグ、アクセシビリティ対応のCSSヘルパークラス、サーバー設定ファイルなどが最初から揃った状態でプロジェクトを開始できます。

とはいえ、読むより触った方が早いと思います。HTML5 Boilerplateに含まれるCSSヘルパークラスがどう動くか、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

HTML5 Boilerplateとは

HTML5 Boilerplateは、「A professional front-end template for building fast, robust, and adaptable web apps or sites」と説明されている通り、高速で堅牢、そして拡張しやすいWebサイト・Webアプリを作るための出発点となるテンプレートです。特定のフレームワークではなく、素のHTML・CSS・サーバー設定ファイルの集合体という点が特徴です。

主な特徴

クロスブラウザ対応のベースCSS - normalize.cssをベースに、ブラウザ間の表示差異を吸収したstyle.cssが最初から用意されている
アクセシビリティ用ヘルパークラス - .visually-hiddenや.clearfixなど、実務でよく使うCSSパターンがすぐ使える形で入っている
推奨メタタグ済みのindex.html - Open Graph、viewport、favicon、Web App Manifestなど、抜け漏れしやすい設定が最初から書かれている
サーバー設定ファイル - Apache用の.htaccessなど、パフォーマンスとセキュリティを高める設定例が同梱されている
削除しやすい設計 - 不要な部分はコメントで用途が説明されており、プロジェクトに合わせて安全に削っていける

インストール

npmパッケージとして取得する方法と、npxでプロジェクトを新規作成する方法の2通りがあります。

# npxで新規プロジェクトを作成
npx create-html5-boilerplate new-site

# 既存プロジェクトにパッケージとして追加
npm install html5-boilerplate

# Yarnの場合
yarn add html5-boilerplate

GitHubのリリースページからZIPファイルとしてダウンロードし、必要なファイルだけを手動で取り込む使い方も一般的です。

HTML5 Boilerplateのサンプルを動かす

HTML5 Boilerplateのstyle.cssには、素のHTMLだけでは実装が地味に面倒な.visually-hidden（視覚的には隠しつつスクリーンリーダーには読ませる）や.clearfix（floatによる高さ崩れの解消）といったヘルパークラスが最初から入っています。下のサンプルはボタンでクラスの付け外しを切り替えられるようにしてあるので、実際にクリックして見た目とDOM構造の違いを確認してみてください。

.visually-hiddenは、position: absoluteと極小サイズの指定を組み合わせることで、画面上には表示せずスクリーンリーダーだけに読み上げさせるためのクラスです。

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}

実際に動かせるものが下です。ボタンを押すと.visually-hiddenクラスの有無が切り替わり、テキストが画面上に見えたり消えたりします（スクリーンリーダー的には常に存在します）。

このサンプルで.box要素にclass="box clearfix"を追加すると、float解除前後で下の段落の位置がどう変わるかも合わせて確認できます。HTML5 Boilerplateのヘルパークラスは、こうした「毎回書くけれど毎回微妙に忘れる」CSSパターンをまとめて提供してくれるのが役割です。

基本的な使い方

HTML5 Boilerplateの基本的な使い方は、テンプレートのindex.htmlとstyle.cssをプロジェクトにコピーし、必要な部分を書き換えていくだけです。head内には推奨メタタグがすでに揃っています。

<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
  <meta charset="utf-8">
  <title>ページタイトル</title>
  <meta name="description" content="ページの説明文">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">

  <meta property="og:type" content="website">
  <meta property="og:title" content="ページタイトル">
  <meta property="og:description" content="ページの説明文">

  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <p>ここから開発を始めます。</p>
  <script src="js/app.js"></script>
</body>
</html>

不要なメタタグやコメントは削除して構いません。テンプレート内のコメントには「なぜこの記述が必要か」が説明されているので、削る前に一読しておくと理解が深まります。

実践的なユースケース

アクセシブルなスキップリンクを作る

長いナビゲーションを持つサイトでは、キーボード操作のユーザーが本文までTabキーを何度も押す必要が出てきます。.visually-hiddenと.focusableを組み合わせると、普段は非表示だけどTabキーでフォーカスが当たった瞬間だけ画面に現れる「スキップリンク」を作れます。

マウスでは見えないリンクなので違和感がありませんが、キーボードユーザーには確実に届きます。hrefの先を実際のメインコンテンツのIDに合わせるだけで、そのまま実務に使えるパターンです。

floatレイアウトの高さ崩れを`.clearfix`で直す

floatを使ったレイアウトでは、親要素が子要素の高さを認識できず、後続の要素が回り込んでしまう問題がよく起こります。HTML5 Boilerplateの.clearfixは、::after疑似要素でclear: bothを仕込むことでこれを解決します。

card-listからclearfixクラスを外すと、.footer-noteがカードの領域内に潜り込んでレイアウトが崩れるのがわかります。display: flexやdisplay: gridで代替できる場面も増えましたが、既存のfloatベースのCSSを保守する際には今でも頻繁に使うテクニックです。

`[hidden]`属性とJavaScriptで表示を切り替える

HTML5 Boilerplateのstyle.cssは.hiddenクラスと[hidden]属性の両方にdisplay: none !importantを当てています。これにより、HTML標準のhidden属性だけで要素の表示・非表示を制御でき、JavaScript側もクラス名ではなく属性の付け外しで済むようになります。

detail.hidden = trueのように真偽値を代入するだけで表示が切り替わるため、classList.toggle('is-hidden')のような独自クラス管理よりもシンプルに書けます。CSS側で!importantが付いているのは、他のスタイルにdisplayが上書きされてhidden属性が無視される事故を防ぐためです。

まとめ

HTML5 Boilerplateは、Webアプリの機能そのものを提供するライブラリではなく、「毎回同じところで悩む部分」をあらかじめ解決してくれるスターターテンプレートです。推奨メタタグの揃ったindex.html、.visually-hiddenや.clearfixといった実務で頻出するCSSヘルパークラス、そしてサーバー設定ファイルまでが最初からセットになっているので、プロジェクトの立ち上げ時間を大きく短縮できます。

まずはnpx create-html5-boilerplateで1つプロジェクトを作ってみて、style.cssの中身を眺めてみることをおすすめします。何が用意されているかを把握しておくだけでも、次にゼロから書き始める作業がぐっと減るはずです。