2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式

Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。

最新版は、最近の実装に合わせた設計にアップデートされました。

HTML5 Boilerplate -GitHub

• HTML5 Boilerplateの特徴
• HTMLの基本テンプレート
• HTML5 Boilerplateの使い方

HTML5 Boilerplateの特徴

HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。

• 実践的な基本のテンプレート

  200人を超える貢献者による10年間の分析・研究・実験を元にしています。

• ブラウザの見え方を最適化

  プログレッシブエンハンスメントを念頭において設計されています。

• インクルード

  推奨されるmetaタグやその他の利点を備えたHTMLファイル。

  基本となるスタイル、一般的に使用されるヘルパースタイルを定義したCSSファイル。

  より広いサイズのスクリーンから高解像度のスマホまで対応したメディアクエリを定義したCSSファイル。

  デフォルトの印刷スタイル、パフォーマンス最適化。

• 使い勝手のよい設計

  特定のフレームワークに依存していないため、自由にコードを構築できます。

  「削除キーに対応」 不要な部分を簡単に取り除くことができます。

  jQueryはv.8.0.0で削除、Modernizr, Normalize.css, Google Analyticsはv.9.0.0で削除されました。

• ライセンス

  MITライセンスで、商用プロジェクトでも無料で利用できます。

HTML5-Boilerplateは、すべての主要ブラウザでサポートされています。

• Chrome
• Edge
• Firefox
• Opera
• Safari

詳しくは、下記をご覧ください。

サポートブラウザ

HTMLの基本テンプレート

HTMLの基本テンプレートは下記の通りです。

index.html -html5-boilerplate: 2024/4/16 ver.9.0.1

リセットCSSが必要な場合は、下記をご覧ください。

• 2024年、現在の環境に適したリセットCSSのまとめ

以前のver.8からの主な変更点は、下記の通りです。

• Internet Explorerのサポートを終了。
• Modernizrを削除。
• Normalize.cssを削除
• Google Analyticsを削除
• SVGファビコンをサポート。
• アクセシビリティのためにog:image:altを追加。

ファビコンの設置方法は、下記をご覧ください。

2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要

HTML5 Boilerplateの使い方

v.9.0.1ではプロジェクトを開始するためのファイル一式を簡単にインストールできる方法が用意されました。依存関係を個別にインストールすることなく、HTML5 Boilerplateをすばやく開始できます。

上記のいずれかのコマンドを実行すると、下記のセットアップが実施されます。

• HTML5 Boilerplateの最新バージョンをダウンロードしてインストール。
• 依存関係をすべてインストール。
• Parcelを使用してローカルサーバーを起動。
• ブラウザで、http://localhost:8080/からアクセスできます。

ターミナルで実行すると、すぐに完了します。
依存関係のファイルもすべて最新版がダウンロードされます。

ターミナル

最新バージョンのファイル、依存関係もすべて揃います。

HTML5 Boilerplateのファイル一覧

ローカルサーバーも用意されるので、テスト環境もばっちりです。

ローカルサーバーでの表示