結果は情報提供のみを目的としており、誤りを含む場合があります。重要な情報は必ずご自身で確認してください。本ツールのご利用は自己責任でお願いいたします。
このツールでできること
HTMLボイラープレート生成ツールは、HTML5ページの土台となるひな形を書き出します。<!DOCTYPE html>宣言、lang属性付きの<html>要素、UTF-8の文字コード指定とページタイトルを含む<head>、見出しを含む<body>です。タイトルや言語を変更すると、コードがすぐに更新されます。
3つのオプションが最初からオンになっていて、オフにすることもできます。レスポンシブ用のviewportメタタグ（スマートフォンでページを正しく表示するのに必要）、style.cssへのリンク、そしてdefer属性付きのscript.jsタグです。deferを付けるとスクリプトは並行してダウンロードされ、ページの解析が終わってから実行されます。タイトルと言語はエスケープされるので、&や<のような文字も安全に使えます。
こんなときに使えます
- クリーンなHTMLファイルが必要なプロトタイプ、デモ、バグの再現を始めるとき。
- 有効なHTML5ページの最小構成を教えるとき。
- フレームワークを導入する前に、静的なランディングページを作るとき。
- メタタグ生成ツールでSEO用のタグを追加する前に、ページに必要なheadタグを確認したいとき。
使用例
入力
タイトル：My Page
言語：en
viewport、style.css、script.jsはオン出力
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Page</h1>
<script src="script.js" defer></script>
</body>
</html>このツールについての質問
lang属性はなぜ重要なのですか？
スクリーンリーダーは正しい発音を選ぶために、ブラウザは翻訳を提案するために、検索エンジンは言語を判断する手がかりとしてこの属性を使います。en、fr、heのように、コンテンツの主要な言語を指定してください。
viewportメタタグは何をするのですか？
これがないと、モバイルブラウザは画面幅が約980pxあるものとしてページを描画してから縮小するため、文字がとても小さくなります。width=device-width, initial-scale=1.0を指定すると、実際の画面幅を使うようブラウザに伝えられます。
スクリプトにdeferを付けているのはなぜですか？
deferを付けると、ブラウザはスクリプトをダウンロードしている間もHTMLの解析を続け、ドキュメントの準備ができてからスクリプトを実行します。これによりページの表示がブロックされず、スクリプトから要素を安全に参照できます。
次に何を追加すればよいですか？
メタディスクリプションとSNS用のプレビュータグです。これらはメタタグ生成ツールとOpen Graphタグ生成ツールで作成できます。サイトを公開するときはRobots.txt生成ツールも役立ちます。
このツールは無料ですか？
はい、無料でご利用いただけます。登録・メールアドレス不要。結果はこのページに表示されます。
結果はどこで確認できますか？
このページでツールを使用すると、結果がここに表示されます。メールで受け取る必要はありません。