Emmetの基本的な使い方

Emmetとは

• Emmet は、主にHTMLやCSSの記述・編集を効率化するプラグインです

docs.emmet.io

HTML基本チートシート

CSS基本チートシート

テキストエディターの場合

• 「VS Code」は、インストールされています

基本構造

• 新規HTMLドキュメントを作成します
• 「!」を入力して、「タブキー」を押します

「en」を「ja」に変更する

• 「VS Code」→「設定」→「拡張機能」→「Emmet」

要素を展開

• 「要素」を入力して、「タブキー」を押します
• class名は、「要素.クラス名」と入力して、「タブキー」を押します

div 要素

• 「.container」と、要素名なしで展開できます

子要素・隣接要素

繰り返し

CSSの展開

link

プロパティ・バリュー