h5bp/html5-boilerplate

これは何？

主な機能

• 01プログレッシブエンハンスメントを考慮して設計された、HTML・CSS・JavaScriptのスターター構成。
• 02Open GraphタグのプレースホルダーとCSSメディアクエリ。
• 03便利なCSSヘルパークラスと、パフォーマンスを重視したデフォルトの印刷用スタイル。
• 04WebPackのビルドコマンドを記載したサンプルのpackage.json。
• 05不要な部分を簡単に削除可能。
• 06オフラインで読めるドキュメントを同梱。

ユースケース

• しっかりしたHTML・CSSの土台を使って、新しい静的Webサイトやランディングページを作成する。
• フレームワークに依存しないテンプレートが必要なフロントエンドWebアプリの開発を始める。
• HTMLのhead設定、metaタグ、印刷用スタイルのベストプラクティスを学ぶ。

クイックスタート

1. 1

   create-html5-boilerplate で新しいサイトのひな形を作成する

   npx create-html5-boilerplate new-site
2. 2

   新しいサイトのフォルダーに移動する

   cd new-site
3. 3

   依存関係をインストールする

   npm install
4. 4

   プロジェクトを起動する

   npm run start

使う前に知っておきたいこと

• !テンプレートのサンプル package.json は WebPack のコマンドを前提としているため、ビルドの設定を調整する必要がある場合があります。

トピック

よくある質問

html5-boilerplate とは？

高速で堅牢、柔軟なWebサイトやWebアプリを構築するための、プロ品質のフロントエンド向けHTML・CSS・JavaScriptスターターテンプレート。 HTML5 Boilerplateは、フロントエンドプロジェクト向けのスターターテンプレートです。あらかじめ用意されたHTMLドキュメント構造、CSSの基本スタイル、JavaScriptのセットアップを備え、クロスブラウザー対応、パフォーマンス、印刷などの一般的な課題に対応します。空のファイルから始める代わりに、検証済みの土台を使って開発を始められます。

html5-boilerplate は無料で使えますか？ライセンスは？

html5-boilerplate は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

html5-boilerplate は今もメンテナンスされていますか？

活発にメンテナンス中。html5-boilerplate の最終コミットは 2026年10月12日 です。

html5-boilerplate は何に使えますか？

しっかりしたHTML・CSSの土台を使って、新しい静的Webサイトやランディングページを作成する。 フレームワークに依存しないテンプレートが必要なフロントエンドWebアプリの開発を始める。 HTMLのhead設定、metaタグ、印刷用スタイルのベストプラクティスを学ぶ。

html5-boilerplate のインストール方法は？

create-html5-boilerplate で新しいサイトのひな形を作成する: npx create-html5-boilerplate new-site 新しいサイトのフォルダーに移動する: cd new-site 依存関係をインストールする: npm install プロジェクトを起動する: npm run start

html5-boilerplate はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/h5bp/html5-boilerplate