HTMLの雛形とは？便利なサンプルを紹介！
HTMLを書いていると「必ず記述しなければならない部分」が案外多いことに気付きます。
できればその部分は雛形にして、本当に記述するべき部分に注力したいですよね。
この記事では、用途に合わせた雛形や、HTMLエディタの便利な機能を紹介します。
シンプルなHTMLの雛形
まずは、最低限の情報を用いたHTMLの基本形から紹介します。
文字コードやビューポート（表示領域。このサンプルの場合は端末やブラウザにより自動設定する）といった基本的な設定内容が入っていますので、まずはこれを利用するとよいでしょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Site Title</title>
</head>
<body>
</body>
</html>jQueryを使う時の雛形
jQueryを使う場合は、該当のjQueryをロードする記述が必要になります。
その時はこの雛形を使い、コメント部分に呼び出すjQueryの記述を追加しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>Web Site Title</title>
<script>
$(()=>{
// ここにロード時の処理を記述する
});
</script>
</head>
<body>
</body>
</html>Emmetを利用してHTMLを作成する
「雛形があっても、たくさんHTMLを書くので毎回コピーペーストするのは大変」という方には「Emmet」の利用をお勧めします。
「Emmet」は、HTML、CSSなどの入力補完機能を持つ、テキストエディタのプラグインです。
オープンソースで、著名なエディタに組み込むことができる、大変便利なツールです。
今回は初心者から上級者まで多くの人が利用しているエディタ「Visual Studio Code（VS Code）」でEmmetを利用する方法を紹介します。
「Visual Studio Code（VS Code）」 については、以下の記事で紹介しています。
https://web-camp.io/magazine/?p=106208
VS CodeでHTMLを作成する
1.エクスプローラの部分から新しいファイルを作成します。
2.ファイル名を設定します。この時、拡張子が「html」であることを確認しましょう。
3.作成すると、以下のように空のファイルが生成されます。
4.この状態で「!」と入力すると、以下のようなコードスニペット（プログラムに挿入できるコード）一覧が表示されますので、「Emmet Abbreviation」と書いてあるものを選択してください。
5.以下のように雛形が生成されます。
langが「en」になっているので「ja」に変更し、titleを設定すれば雛形として使うことができます。
Emmetの入力補完機能
新しくHTMLを作成する時だけではなく、入力中にもEmmetの補完機能が役に立ちます。
例えば「h1」要素を入力すると、候補として「Emmet Abbreviation」が出てくるので選択すると、タグを閉じてくれます。
まとめ
HTMLで使用できる雛形と、エディタで利用することができる「Emmet」プラグインを紹介しました。
状況によって便利な方法を選んで、効率的に作成できるようにしましょう。
