0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Emmetの記法について

Last updated at Posted at 2021-01-01

説明

Emmetは、HTMLやCSSを効率的に記述するためのプラグインです。初めのうちはプログラミングの学習に集中し、このような記法があることに気が付きませんでした。以下に使用例を記載します。tabキーを押すことで展開されます。

●HTMLの場合

!

> ```html Document ```

div

> ```html
```

a

> ```html ```

div#top

> ```html
```

div.container

> ```html
```

div#section.btn.twitter

> ```html
```

p{hello}

> ```html

hello

```

p*3

> ```html

```

div.item*4

> ```html
```

ダミー文章を入力する事もできます。

<p>lorem</p>

> ```html

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum illum reprehenderit vel rem mollitia, consequatur facilis sapiente earum, voluptatem veritatis officia iusto debitis expedita ducimus excepturi omnis quas voluptas nostrum?

```

●CSSの場合

m

> ```CSS margin: ; ```

p

> ```CSS padding: ; ```

ピクセルを指定することでもできます。

m10

> ```CSS margin: 10px; ```

m10-20-30

> ```CSS margin: 10px 20px 30px; ```

他にも以下のように、省略して記述することも出来ます。

bgc

> ```CSS background-color: #fff; ```

fsz

> ```CSS font-size: ; ```

pos

> ```CSS position: relative; ```

このようにEmmetを使用すればコーディングが捗ります。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?