HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
Post on:2020年12月11日
sponsors
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。
v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。
IE11を含む、すべてのモダンブラウザをサポートしています。
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に対応しています。
|
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 34 35 36 37 38 39 40 |
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:title" content=""> <meta property="og:type" content=""> <meta property="og:url" content=""> <meta property="og:image" content=""> <link rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" href="icon.png"> <!-- Place favicon.ico in the root directory --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> <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/vendor/modernizr-3.11.4.min.js"></script> <script src="js/app.js"></script> <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. --> <script> window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date; ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview') </script> <script src="https://www.google-analytics.com/analytics.js" async></script> </body> </html> |
html5-boilerplate/dist/index.html: 2020/12/11
テンプレートなので例えば、CSSリセットを変更してもOKです。
HTML5 Boilerplateの使い方
v.8.0.0ではプロジェクトを開始するためのファイル一式を簡単にインストールできる方法が用意されました。依存関係を個別にインストールすることなく、HTML5 Boilerplateをすばやく開始できます。
|
1 2 3 4 |
npx create-html5-boilerplate new-site cd new-site npm install npm 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:1234/からアクセスできます。
ターミナルで実行すると、すぐに完了します。
依存関係のファイルもすべて最新版がダウンロードされます。
ターミナル
最新バージョンのファイル、依存関係もすべて揃います。
HTML5 Boilerplateのファイル一覧
ローカルサーバーも用意されるので、テスト環境もばっちりです。
http://localhost:1234/
sponsors
