1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

HTML Emmetでエレガントなhtmlライフを、、、

Posted at

HTMLをもっと簡単に早く書きたい!

htmlのタグを書くのってめんどいですよね。。。
そんな時に使うのが!!!今回紹介するHTML Emmetです!

HTML Emmetとは

htmlを効率よく書くために作られたショートカットキーのようなもの
直感的な操作で素早くhtmlの構造を作成できます。

例1

htmlを書くとき、最初<!DOCTYPE html>って書くと思うんですけどvsCode上で以下のように!を入力してEnter押すと

Demo.html
!

こんな感じでhtmlの基本形が出てきますよね!これがまさにEmmetです!

Demo.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>

例2

例えば以下のようにコマンドを打つと、、、

Demo.html
<body>
    div>p>a
</body>

こんな感じで一気にタグを作ってくれるんです!便利ですねぇ

Demo.html
<body>
    <div>
        <p><a href=""></a></p>
    </div>
</body>

例3

次はこんな感じでコマンドを打ってみると、、、 お分かりですかね?

Demo.html
<body>
    <div>
        <p><a href=""></a></p>
        ul>li*3
    </div>
</body>

こーんな感じになっちゃいます!

Demo.html
<body>
    <body>
    <div>
        <p><a href=""></a></p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</body>

余計な説明はしません。皆さんなら直感で書けるはずです!w
なんとなく概要はわかったと思うので、気になる方は

このページまで飛んでみてください!色んな記法に出会えると思います!

僕も勉強頑張ります!
それでは!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?