HTMLボイラープレート：最新のひな形を1行ずつ解説
ホーム HTMLボイラープレートジェネレーター
HTMLボイラープレート：解説付きテンプレートとジェネレーター | We.Inc
最新のHTML5ボイラープレートを1行ずつ解説します。タイトル、説明文、言語、Open Graph、ファビコン、テーマカラー、CSSやJSのリンクを設定できるジェネレーター付きで、index.htmlをコピーまたはダウンロードできます。
最小限のHTML5ボイラープレートに必要なのは、文書型宣言、言語属性を付けたルート要素、そしてUTF-8の文字コード、ビューポートのメタタグ、タイトル、説明文を含むヘッド、最後にボディです。CSSはヘッド内のリンクタグで、JavaScriptは遅延実行のスクリプトタグで読み込みます。下で自分用のひな形を生成し、index.htmlをダウンロードしてください。
すべてのページに必要な行
<!doctype html> 標準モードを有効にする <html lang="en"> スクリーンリーダーと翻訳のための言語指定 <meta charset="utf-8"> 文字や記号を正しく表示する <meta name="viewport" ...> スマートフォンで適切に拡大縮小する <title> タブの表示テキストと検索結果の見出し ジェネレーターは、いくつかの切り替えから完全で正しいindex.htmlを書き出します。ページのタイトルと説明文、言語、リンクプレビュー用のOpen Graphタグ、ファビコン一式、テーマカラー、事前接続のヒント、そして選んだ読み込み方式でのスタイルシートとスクリプトのリンクです。生成される可能性のあるすべての行は、下の解説付きテンプレートで説明しています。
タイトル、説明文、言語を入力し、必要な追加機能をオンにします。 スクリプトの読み込み方式を、遅延実行、モジュール、非同期の中から選びます。操作に合わせてファイルのプレビューが更新されます。 マークアップをコピーするか、index.htmlとしてダウンロードします。そのままブラウザーやエディターで開けます。 公開する前に、下の解説付きバージョンを読んで各行の意味を理解しましょう。 文字コードのメタタグは、ファイルの先頭1024バイト以内に置きましょう。ヘッドの最初に書くのがいちばん確実です。 ページごとに固有のタイトルと説明文を書きましょう。検索エンジンは、これらを検索結果の見出しとスニペットとして表示することがよくあります。 ビューポートのタグで maximum-scale=1 や user-scalable=no を指定するのは避けましょう。ズームを禁止すると、大きな文字が必要な読者が困ります。 スクリプトはボディの末尾ではなく、ヘッド内で遅延実行の属性を付けて読み込みましょう。ファイルは早めにダウンロードされ、解析の後に実行されます。 OGP画像には絶対URLを使いましょう。SNSは自社のサーバーから画像を取得するため、相対パスを解決できません。 よくある質問
CSSファイルをHTMLにリンクするには？
ヘッドの中に <link rel="stylesheet" href="styles.css"> を追加します。参照先のパスはHTMLファイルからの相対パスなので、css/styles.css は同じ場所にあるcssフォルダーの中を指します。ヘッド内のスタイルシートは一瞬だけ描画をブロックしますが、これは意図された動作で、スタイルが当たっていない状態が一瞬表示されるのを防ぎます。
スクリプトタグはどこに置くべきですか？
ヘッド内に遅延実行の属性を付けて置きます。たとえば <script src="app.js" defer></script> のように書きます。ブラウザーは解析と並行してファイルを取得し、文書の解析が終わってから順番どおりに実行します。モジュール形式のスクリプトは自動的に遅延実行されます。非同期の読み込みは、アクセス解析など他に依存しないスクリプトにだけ使いましょう。
X-UA-Compatible のメタタグは必要ですか？
不要です。これは古いバージョンの Internet Explorer にしか影響せず、Internet Explorer はすでに Microsoft のサポートが終了しています。現在のボイラープレートでは省略されています。
本当に必要なファビコンのファイルはどれですか？
古いツールやクローラー向けにサイトのルートに置くfavicon.ico、最新ブラウザー向けのSVGアイコン、iOSのホーム画面向けの180 × 180ピクセルのPNG形式のApple用タッチアイコンがあれば、ほぼすべてのケースに対応できます。インストール可能にしたい場合は、Webアプリマニフェストでより大きなアイコンを追加します。
遅延実行と非同期の読み込みの違いは何ですか？
どちらもパーサーをブロックせずにダウンロードします。遅延実行は解析が終わるまで待ち、スクリプトを文書内の順番どおりに実行します。非同期は各スクリプトが届いた瞬間に順不同で実行するため、互いに依存するスクリプトやDOMに依存するスクリプトが壊れることがあります。
ヘッドに入れるもの
ヘッドには、コンテンツではなくページに関する情報を入れます。文字コード、ビューポート、タイトル、説明文、スタイルシートへのリンク、アイコン、SNSプレビュー用のタグなどです。ここに書いたものは、ページの本文には表示されません。 順番も少しだけ重要です。文字コードを最初に、次にビューポート、その後にタイトルと説明文を書きます。事前接続のヒントは、それを必要とするスタイルシートより前に置き、接続ができるだけ早く始まるようにしましょう。 Open Graphとリンクプレビュー
誰かがメッセージアプリやSNSでURLを共有すると、プレビューカードは og:title、og:description、og:image、og:url から作られます。これらがないと、各プラットフォームが内容を推測し、多くの場合うまくいきません。 1200 × 630ピクセルの画像なら、主要なSNSすべてで問題なく表示されます。twitter:card を summary_large_image に設定すると、X に大きいサイズのカードを表示するよう求められます。 ボイラープレートを1行ずつ
完全な最新のindex.html
本番のページに通常必要なものはすべて入っていて、不要なものは入っていません。各行の説明は下の表のとおりです。
各行の役割
<!doctype html> 互換モードではなく標準モードを使うようブラウザーに伝える はい <html lang="en"> 支援技術、ハイフネーション、翻訳のためにページの言語を宣言する はい <meta charset="utf-8"> アクセント記号、記号、絵文字を正しく表示するための文字コード はい <meta name="viewport" content="width=device-width, initial-scale=1"> スマートフォンで縮小されたデスクトップ版ページが表示されるのを防ぐ はい <title> ブラウザーのタブ、ブックマーク、通常は検索結果の見出し はい <meta name="description"> 検索結果のスニペットとしてよく使われる 強く推奨 <link rel="canonical"> ページに複数のURLでアクセスできる場合の優先URL 推奨 <meta name="theme-color"> 一部のモバイルブラウザーでツールバーに色を付ける 任意 <link rel="icon"> と Apple用タッチアイコン タブのアイコンとホーム画面のアイコン 推奨 OGPとTwitter用のメタタグ 共有されたリンクのプレビューに使うタイトル、テキスト、画像 推奨 <link rel="preconnect"> 必要になる前に別のオリジンへの接続を開く 任意 <link rel="stylesheet"> CSSを読み込む CSSがある場合 <script defer> 解析をブロックせずにJavaScriptを読み込み、解析後に実行する JSがある場合 <main> 支援技術向けにメインコンテンツを示す 推奨 CSSをHTMLにリンクする
CSSを追加する3つの方法
ブラウザーがページをまたいでキャッシュできるため、外部ファイルが一般的です。スタイルブロックはそのページ専用のルールに、スタイル属性は一度きりの値に向いています。
相対パスの解説
スタイルシートが読み込まれない原因の多くは、パスの間違いです。開発者ツールのネットワークパネルで404が出ていないか確認しましょう。
JavaScriptを正しくリンクする
スクリプトの読み込みオプション
マークアップ 解析をブロックするか 実行タイミング 順番を保つか <script src="a.js"> はい 到達した時点ですぐ はい <script src="a.js" defer> いいえ 解析後、DOMContentLoaded の前 はい <script src="a.js" async> いいえ（実行時に一瞬止まる） ダウンロードが終わり次第 いいえ <script type="module" src="a.js"> いいえ 遅延実行と同じ はい おすすめのスクリプトタグ
モジュールでは厳格モード、独自のスコープ、インポートが使えます。まだ必要であれば、非モジュール用の属性を使って非常に古いブラウザー向けの代替スクリプトを配信できます。
ボイラープレートジェネレーター
ページタイトル
言語コード
en, fr, es-MX
説明文
ページのURL（canonical と og:url）
スタイルシートのパス（不要なら空欄）
スクリプトのパス（不要なら空欄）
スクリプトの読み込み
Open GraphとTwitterのタグ
ファビコン一式
Google Fontsへの事前接続
og:image（絶対URL）
テーマカラー
HTMLをコピー
index.htmlをダウンロード
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る