Emmetとは?

のアイコン画像

・プログラミング初心者だけどコードを素早く出す方法があれば知りたい。
・具体的にどのようにしたらいいのか知りたい。

こんなお悩み解決します。

会社に行きながら自分でも何か学びたいと思ってプログラミングを始めたあなた。

コードを書くのに時間がかかってしまっていませんか。

あなたの貴重な時間を無駄にせず、爆速コーディングが出来るEmmet記法についてご紹介します。

実際にプログラミング初心者でEmmet記法を知ってからコーディング速度があがったヤマネ(@yamanebass)がEmmetとは何かについてご紹介します。

本記事でわかること

・爆速コーディングの記法、Emmetとは何かわかる

・実際のEmmet記述方法がわかる

それではみていきましょう。

目次

Emmetとは?

Emmetとは

EmmetとはHTMLやCSSを省略して記述ができる方法です。

同じコードでも短縮して記載することで作成にかかる時間を縮めることが出来ます

ProgateやドットインストールでHTML&CSSを学び終わった方は習得しておきましょう。

ヤマネのアイコン画像ヤマネ

プロのコーダーの方はほとんど使っています!

Visual Studio Code」だと拡張機能など使うことなく、標準でEmmetを使えるので便利です。

ヤマネのアイコン画像ヤマネ

Atomなどの他エディターを利用している方は拡張機能が必要な場合があります。

HTMLでの使い方

EmmetのHTMLでの使い方

Emmetは省略コードを記載した後にtabキーを押すことにより、コードを出現させることが出来ます。

それでは具体的にどのように記述を省略していくのかみていきましょう。

要素(省略記述)+ tabキーでコードが基本。

HTMLのテンプレートを出現させる

毎回使うのにいちいち記述するのが大変なHTMLテンプレートも「!」で一瞬で出現させることが出来ます。

!

tabキーを押すと・・・

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

たった一文字書くだけでここまで記述してくれるのはありがたいですね。

ヤマネのアイコン画像ヤマネ

<html lang=”en”>になっているので”ja”に直すのを忘れずに!

タグを記述する

タグも省略記載が出来ますし、閉じタグまできちんと出現させてくれます。

閉じタグがあるケース

閉じタグまで書かなければならないタグも要素のみ記載するだけで簡単に閉じタグも出せます。

h2

tabキーを押すと・・・

<h2></h2>

閉じタグがないケース

閉じタグのない要素が場合も使えます。

img

tabキーを押すと・・・

<img src=”” alt=””>

altも出現するので入力漏れを防げますね。

ヤマネのアイコン画像ヤマネ

tabキーを押すと、””の間にカーソルがあるので、コピーしておいたURLをすぐ貼ることが出来ます!

記号で記述を短縮する

記号を使うことで様々な指示を出すことが出来ます。

> でネストを作成する

ネストを作りたい時も簡単に記述が出来ます。

ul>li

tabキーを押すと・・・

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

ヤマネのアイコン画像ヤマネ

「>」は左に書いた要素の中に右の要素が欲しいときに使います♪

* で要素の複製する

要素が複数欲しいときも「*」で増やすことが出来ます。

先ほどのlistですが、ヘッダーなどで複数のリスト項目を作るケースが多いときはこちらを使います。

ul>li*3

tabキーを押すと・・・

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

小ヤマネくんのアイコン画像小ヤマネくん

べんり〜!!

+ で同階層に要素を作成

同じ階層に要素を並べて表示したいときも「+」で出現させることが出来ます。

div>h1+p

tabキーを押すと・・・

<div>
  <h1></h1>
  <p></p>
</div>

.でクラス名を指定

何かとつけるクラス名も「.」を使えばかなり簡単に記述が出来ます。

.container

tabキーを押すと・・・

<div class=”container”></div>

#でID名を指定

IDをつけたいときは「#」を使えます。

#box

tabキーを押すと・・・

<div id=”box”></div>

{ }でテキストを挿入

テキストを入れたいときは「{ }」でテキストを囲みましょう。

h1{最近秋めいてきましたね}

tabキーを押すと・・・

<h1>最近秋めいてきましたね</h1>

・・・となりますが、これに関してはh1で展開した後にテキスト書くのとあまり書く時間が変わらないかもしれません。

$で連番を当てる

半角「$」マークで連番を当てることが出来ます。

ul>li#list$*5

tabキーを押すと・・・

<ul>
  <li id=”list1″></li>
  <li id=”list2″></li>
  <li id=”list3″></li>
  <li id=”list4″></li>
  <li id=”list5″></li>
</ul>

ヤマネのアイコン画像ヤマネ

$を二つにすると、「01」、「02」など二桁表示にすることも出来ます!

CSSでの使い方

EmmetのCSSでの使い方

CSSでEmmetを使用する際は、プロパティ、もしくはプロパティ+値を省略記述してtabキーを押し、コードを時短で出すことが出来ます。

CSSでよく使うEmmet記法

CSSでよく使うEmmetをご紹介します。

プロパティ名を省略記述する

プロパティ名を省略記載してtabキーを押すとあっと言うまに欲しいコードが書けます。

wwidth: ;
hheight: ;
mmargin: ;
ppadding: ;
fzfont-size: ;
fwfont-weight: ;
ccolor: ;
dbdisplay: block;
dfdisplay: flex;
bdborder: ;
bgbackground: ;
tatext-align: ;
ltsletter-spacing: ;

プロパティを適用する方向を指定する

上下左右などの方向を指定したい際も省略記述することが出来ます。

ptpadding-top: ;
prpadding-right: ;
pbpadding-bottom: ;
plpadding-left: ;

値を含めて記述する

「: ;」で囲まれた値を含めて記述をすることも出来ます。

w100width: 100px;
m0automargin: 0 auto;
c#fcolor: #ffffff;
p5-10padding: 5px 10px;
bdrs4border-radius: 4px;
ヤマネのアイコン画像ヤマネ

かなり省略が出来ますね!

CSSのEmmet記法=プロパティ名(ーがつくものは頭の一文字をとる)+値

ヤマネのアイコン画像ヤマネ

あてはまらないこともありますが大体この公式です。

その他はEmmetのチートシートで確認しましょう。よく使うコードはEmmet記法した方が効率的です。

まとめ:はやめにEmmetを習得して爆速コーディングを!

Emmetで爆速コーディング

初心者の方HTMLやCSSの基礎学習を終えて模写コーディングを行う前にEmmetを習得しましょう。

初心者はコーディング速度があまり早くないので、Emmetを使うことで記述速度をあげることが出来、コードを書くのがより楽しくなるからです。

あなたも今日からEmmetを使ってコーディングライフを楽しみましょう。

ヤマネのアイコン画像ヤマネ

少しでもお役に立てたら嬉しいです♪

小ヤマネくんのアイコン画像小ヤマネくん

お・わ・り★

↓しがないOL、プログラミング独学日記です。よければご覧ください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次
閉じる