2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
Post on:2024年4月23日
sponsors
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。
最新版は、最近の実装に合わせた設計にアップデートされました。
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の基本テンプレートは下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="css/style.css"> <meta name="description" content=""> <meta property="og:title" content=""> <meta property="og:type" content=""> <meta property="og:url" content=""> <meta property="og:image" content=""> <meta property="og:image:alt" content=""> <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="icon.png"> <link rel="manifest" href="site.webmanifest"> <meta name="theme-color" content="#fafafa"> </head> <body> <!-- Add your site or application content here --> <p>Hello world! This is HTML5 Boilerplate.</p> <script src="js/app.js"></script> </body> </html> |
index.html -html5-boilerplate: 2024/4/16 ver.9.0.1
リセットCSSが必要な場合は、下記をご覧ください。
以前のver.8からの主な変更点は、下記の通りです。
- Internet Explorerのサポートを終了。
- Modernizrを削除。
- Normalize.cssを削除
- Google Analyticsを削除
- SVGファビコンをサポート。
- アクセシビリティのために
og:image:altを追加。
ファビコンの設置方法は、下記をご覧ください。
2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要
HTML5 Boilerplateの使い方
v.9.0.1ではプロジェクトを開始するためのファイル一式を簡単にインストールできる方法が用意されました。依存関係を個別にインストールすることなく、HTML5 Boilerplateをすばやく開始できます。
|
1 2 3 4 |
npx create-html5-boilerplate new-site cd new-site npm install npm run start |
|
1 2 3 4 |
npm init create-html5-boilerplate new-site cd new-site npm install npm start |
|
1 2 3 4 |
yarn create html5-boilerplate new-site cd new-site yarn install yarn start |
上記のいずれかのコマンドを実行すると、下記のセットアップが実施されます。
- HTML5 Boilerplateの最新バージョンをダウンロードしてインストール。
- 依存関係をすべてインストール。
- Parcelを使用してローカルサーバーを起動。
- ブラウザで、http://localhost:8080/からアクセスできます。
ターミナルで実行すると、すぐに完了します。
依存関係のファイルもすべて最新版がダウンロードされます。
ターミナル
最新バージョンのファイル、依存関係もすべて揃います。
HTML5 Boilerplateのファイル一覧
ローカルサーバーも用意されるので、テスト環境もばっちりです。
ローカルサーバーでの表示
sponsors
