京都のNPO法人 CRA(クリエイター育成協会)が発信するブログです。Web業界、Webデザイナー・Webプログラマー・Webマーケターの育成。

お問い合わせ
075-353-3711 受付時間:10:00〜18:00(土日・祝日除く)
menu close

CRAブログ- Web/IT・教育・福祉業界の情報を、スタッフ&インターン生が配信中

Emmetでコーディング時間を短縮!

2016年01月06日工藤
Pocket

【こちらの記事は、約4分程でお読みいただけます。】

あけましておめでとうございます。水曜日のブログ担当の工藤です。

Emmetは、主にHTMLやCSSの記述・編集を強力にサポートするプラグインです。
今回は、Emmetについて解説していきたいと思います。

効率よくコードをかけるEmmet

コードエディッタ(DreamWeberなど)を使うと、コードが自動補完で出てくるので非常に捗りますが、Emmetを使えばさらにスピードを上げてコーディングすることが出来ます。

header#header.header>h1+ul.nav>li*5>a

たとえば、上記のようなコードをEmmetで変換すると

<header id="header" class="header">
  <h1></h1>
  <ul class="nav">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</header>

このような長いコードに転換してくれます。

詳しくは下記のEmmet公式ページをご覧ください。
emmet1

http://emmet.io/

左ナビのDownloadから、現在愛用しているエディッタのDL項目から選びプラグインを有効化すれば使えるようになります。

手っ取り早く体験するなら、CodePenで使えるようになります。CodePenでは、tabキーを押すと変換出来るようになります。

基本的な使い方

タグを入力

headerpなどを転換するとタグで囲ってくれます。
存在しないタグでも<>で囲ってくれるので注意が必要です。

header
<header></header>

子要素

>】で子要素を作ります。

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

兄弟要素

+】で兄弟要素を作ります。

div>h3+p
<div>
  <h3></h3>
  <p></p>
</div>

ID,class付加

【#〜〜】でIDを。【.〜〜】でclassを付加します。

div#nav__wrap>ul.nav__lists>li.nav__list>a.nav__item
<div id="nav__wrap">
  <ul class="nav__lists">
    <li class="nav__list"><a href="" class="nav__item"></a></li>
  </ul>
</div>

2つ以上のclassを付加したい場合は下記のように記述します。

div.small-7.large-4.columns
<div class="small-7 large-4 columns"></div>

上の階層へ

^】で上の階層へ行きます。

div>h3>span^p>span
<div>
  <h3><span></span></h3>
  <p><span></span></p>
</div>

^の回数分だけ上の階層に移動します。

div>h3>span^^div>ul>li
<div>
  <h3><span></span></h3>
</div>
<div>
  <ul>
    <li></li>
  </ul>
</div>

繰り返し

【*n】で要素を繰り返します。

div>ul>li*4>a
<div>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

連番

$】で連番を作ります。

ul>li.item$*5
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

【$】を増やすと0を追加出来ます。

ul>li.item$$*15
<ul>
  <li class="item01"></li>
  <li class="item02"></li>
  <li class="item03"></li>
  <li class="item04"></li>
  <li class="item05"></li>
  <li class="item06"></li>
  <li class="item07"></li>
  <li class="item08"></li>
  <li class="item09"></li>
  <li class="item10"></li>
  <li class="item11"></li>
  <li class="item12"></li>
  <li class="item13"></li>
  <li class="item14"></li>
  <li class="item15"></li>
</ul>

文字を入れる

【{}】内に文字を入れるとタグ内に文字を挿入出来ます。

p{文字をいれます。}
<p>文字をいれます。</p>

属性付加

【[]】で属性を付加します。

table>tr>td[colspan=2]
<table>
  <tr>
    <td colspan="2"></td>
  </tr>
</table>

応用

tableセット

table+
<table>
  <tr>
    <td></td>
  </tr>
</table>

dlセット

dl+
<dl>
  <dt></dt>
  <dd></dd>
</dl>

クラス

タグを入力せず【.】だけで転換を行うと自動的にdivダグで転換してくれます。
p内の場合は、自動的にspanタグに転換してくれます。

.
<div class=""></div>
p>.
<p><span class=""></span></p>

DOCTYPEセット

!
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  
</body>
</html>

終わりに

emmetは、scssに比べて面倒なrubyなどは要らなくてプラグインを入れればすぐに使えます。

慣れてくれば、面倒なタグも思い通りに作れます。

ul>li*4>a>img[src=../images/img$$.jpg]
<ul>
  <li><a href=""><img src="../images/img01.jpg" alt="" /></a></li>
  <li><a href=""><img src="../images/img02.jpg" alt="" /></a></li>
  <li><a href=""><img src="../images/img03.jpg" alt="" /></a></li>
  <li><a href=""><img src="../images/img04.jpg" alt="" /></a></li>
</ul>

CSSでもEmmetは使えます。
タグが多すぎるので下記のシートを参考に。
http://docs.emmet.io/cheat-sheet/

codepenで触ってみて便利だと思ったら、愛用しているエディッタにプラグインを導入してみましょう。

Pocket

CRAが運営する就労移行支援事業所 ワークサポートセンターはこちら