HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML

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

v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。
IE11を含む、すべてのモダンブラウザをサポートしています。

HTMLでWebページやアプリを実装するための必要最小限をまとめたフロントエンド用のテンプレート(IE11も対応)

HTML5 Boilerplate -GitHub

HTML5 Boilerplateの特徴

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

  • 実践的な基本のテンプレート
    200人を超える貢献者による分析・研究・実験をもとにしています。
  • ブラウザの見え方を最適化
    プログレッシブエンハンスメントを念頭において設計されています。
  • インクルード
    CSSの正規化と一般的なバグ修正のためのNormalize.css、機能検出のためのModernizr、パフォーマンスとセキュリティを向上させるApache Server Configsが含まれます。
    今回のv.8.0.0より、jQueryは削除されました。
  • 使い勝手のよい設計
    便利なCSSのヘルパークラス。
    デフォルトの印刷スタイル、パフォーマンス最適化。
    Google Universal Analyticsスニペットの最適化バージョン。
    古いブラウザでJavaScriptエラーの原因となる迷惑なコンソールステートメントに対する保護。
    「削除キーに対応」 不要な部分を簡単に取り除くことができます。
  • ライセンス
    MITライセンスで、商用プロジェクトでも無料で利用できます。

ブラウザのサポートは、下記の通りです。

  • Chrome (latest 2)
  • Edge (latest 2)
  • Firefox (latest 2)
  • Internet Explorer 11
  • Opera (latest 2)
  • Safari (latest 2)

古いブラウザのサポートが必要な場合は、HTML5 Boilerplate v6 (IE9/IE10), HTML5 Boilerplate v5 (IE8)も用意されています。

HTMLの基本テンプレート

HTMLの基本テンプレートは下記の通りです。
head内がかなり増え、スマホやソーシャルメディアやGoogle Analyticsに対応しています。

html5-boilerplate/dist/index.html: 2020/12/11

テンプレートなので例えば、CSSリセットを変更してもOKです。

HTML5 Boilerplateの使い方

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

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

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

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

ターミナルのキャプチャ

ターミナル

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

ファイル一覧

HTML5 Boilerplateのファイル一覧

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

サイトのキャプチャ

http://localhost:1234/

参考: Create HTML5 Boilerplate -GitHub

sponsors

top of page

©2024 coliss