Emmetの使い方

目次

基本的な使い方

Emmetの基本的な使い方を説明します。

STEP
Emmetのコマンドを記載する

まずはEmmet用のコマンドを入力しましょう。

「div」タグを作成する場合は次を入力する。

div
STEP
コードを変換する

「Return」キーor「Tab」キーを押下してSTEP1のコマンドを実際のコードに変換しましょう。

STEP1の例を実行後に「Return」キーor「Tab」キーを押下すると次のようにコードに変更される。

<div></div>

コマンドの紹介

「基本的な使い方」で紹介した内容からお分かりの通り、STEP1のコマンドを変更することで、様々なコード作成時間を短縮できるようになります。そこで、どのようなコマンドがあるのかを紹介していきます。

シンプルなタグを作成

タグ名を記載することで、タグ名を設定したタグを作成できます。

コマンド例

div

生成されるコード

<div></div>

親子関係のタグを作成する

ulタグ、liタグのように親子関係のあるタグを作成する。

コマンド例

ul>li

生成されるコード

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

複数の同一タグを作成する

「*」+「数字」を入力することで、同一タグを指定数字分作成することができます。

コマンド例

ul>li*2

生成されるコード

<ul>
    <li></li>
    <li></li>
</ul>
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

本業はシステムエンジニアでKARTEのテクニカルサポートを担当。マーケティング・SNS・統計・イベント運営など多様な資格を20種以上所持。ゲーム友達が欲しい。

コメント

コメントする

目次