メインコンテンツまでスキップ

HTMLの便利な書き方/便利なもの

この章では、HTMLを書くときの便利な書き方や、便利な機能を紹介します。

みなさんは、HTMLを書くときに、<html>や<head>などの基本的な構造を毎回書いているでしょうか？実は、VSCodeを使うと、これらの基本的な構造を簡単に生成することができます。

便利な書き方​

なんと、VSCodeでは、HTMLに強力な補完機能が実装されています。例えば、!と入力してEnterを押すと、HTMLの基本的な構造が自動で生成されます。 生成されるものは以下の通り。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

このように、VSCodeの補完機能を活用することで、HTMLを書く際の手間を大幅に減らすことができます。

Tips​

このテンプレートはlang="en"になっていて英語のサイトという扱いになるため、右上に翻訳が出ることがあります。そのため、翻訳が邪魔な時はlang="ja"に変更しておくと良いでしょう。

タグの補完​

VSCodeでは、タグの補完も非常に便利です。例えば、divと入力してEnterを押すと、以下のようなコードが自動で生成されます。

<div></div>

さらに、同じタグを複数用意するとき、(aタグやdivなど)は、a*3やdiv*2のように入力してEnterを押すと、指定した数だけタグが生成されます。

a*3

<a href=""></a>
<a href=""></a>
<a href=""></a>

div*2

<div></div>
<div></div>

作成:2026-06-15 YGMS_yukkuri