Visual Studio Code：Emmet記法を使って簡単なHTMLを入力してみる

投稿日 2020年10月2日
更新日 2020年10月3日
著者羽沢仁
カテゴリー IT

! + Enter

半角の！を入力して、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>

htmlタグの言語が英語になっているので、日本語に変更します。

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

次に不要なmetaタグを削除します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

**ul>li*3**

次にulタグとliタグを3つ入力するために、「ul>li*3」と入力すると、次のように変換されます。

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

liタグに値を入力後、Tabキーを押下すると、次のliタグの値を入力出来る位置にフォーカスが移動するので、ものすごく便利です。

参考情報

たまたまドットインストールでプログラミングの勉強をしていた時に、動画で教えて頂きました。

なお、「Emmet入門」という興味深い講座もあるみたいなので、あとで覗いてみようかなぁと思っています。

書籍

この記事を書いた人

羽沢仁

業務系システムのエンジニアとして、コンサルティング会社で5年、事業会社の社内SEとして5年、フリーランスとして6年、要求定義、設計、開発、テスト、リリース対応の業務に携わってきました。来年からは、街の○○屋さんと直接つながって、ITツールを提供するサービスを開始します。詳しいプロフィールはこちらをご参照ください。

詳細はこちら記事一覧