見出し画像

【VSCode】vscodeのHTMLの短縮裏ワザみたいなのをまとめてさらっと知る記事。😀

ごろじ


vscodeのHTMLの短縮裏ワザ（.containerで<div class="conatainer"> </div>）みたいなのをまとめておしえて。😣


VS CodeでHTMLを効率的に記述するための短縮裏ワザとして、Emmetという機能があります。Emmetは、簡潔な構文を使って、HTMLやCSSのコードを高速に生成するためのツールです。以下に、HTMLでよく使われるEmmetの短縮コマンドの例をいくつか紹介します。これらのコマンドをVS Codeで入力し、`Tab`キーを押すことで、対応するHTMLコードに展開されます。

  1. クラスを含むdivタグの生成

    • 入力: `.container`

    • 出力: `<div class="container"></div>`

  2. IDを含むdivタグの生成

    • 入力: `#header`

    • 出力: `<div id="header"></div>`

  3. 子要素を持つ要素の生成

    • 入力: `nav>ul>li`

  4. 同じレベルの複数の要素の生成

    • 入力: `ul>li*3`

  5. 属性値を持つ要素の生成

  6. 複合的な構造の生成

    • 入力: `div.container>div.row>div.col*3`

  7. カスタム属性とテキストの追加

    • 入力: `p[title="Hello World"]{こんにちは、世界!}`

    • 出力: `<p title="Hello World">こんにちは、世界!</p>`

これらの短縮コマンドは、HTMLを手早く書くための非常に便利な方法です。EmmetはVS Codeにデフォルトで組み込まれているため、追加のインストール作業は必要ありません。ただし、Emmetの機能を最大限に活用するには、その構文と使用法に慣れることが重要です。上記の例を試しながら、自分のプロジェクトに応じてカスタマイズしてみてください。

（6番は.container>.row>.col*3でもいけますね！😄　クラスとIDを含めたい場合は、.container_class#container_idでいけますね！😀　めっちゃHTMLの入力がはやくなって便利っすね！🥰）

　俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！　ご興味あれば、よろしくお願いいたしますッ！！

　それでは、最後まで読んでいただき、ありがとうございましたッ！！

よろしくお願いしますッ！