Webの最新トピックを配信中!

最強の入力補完機能「Emmet」は必ず使おう

Emmet(エメット)は、HTMLとCSSの入力補完ツールです。例えば、CSSで「mb25」と入力しTabキー(設定によってはCrtl+E)をクリックするだけで「margin-bottom:25px」と展開されます。コーディングが爆速になるので、Emmetは必ず導入しましょう。

Emmetの導入方法

Emmetを使えるようにするため、エディタにEmmetをインストールする必要があります。

ドリちゃん(Dreamweaver)は最新のAdobeCCなら最初からインストールされています。SublimeTextやAtomはそれぞれのPackageからインストールする必要があるので、下記の記事を参考にインストールしてみてください。簡単です。
じっくり解説。SublimeText3にEmmetをインストールする
Atom+Emmetで爆速なHTML,CSSコーディング環境を入手する

Emmetの使い方

Emmetはその記法を覚える必要があります。大丈夫です。簡単だしすべてを使いこなす必要はありません。

例えば、HTMLの場合、ulの中に5つのliを書きたい時はEmmetの記法でこのように書きます。

そしてTabキーを押すと、

このように展開されます。だいぶコーディングの手間が省けそうですよね。*のアスタリスクはその数の分を用意して!という意味です。

CSSの場合もかなり重宝します。こんなふうに書きます。
posl → position:relative
fz10 → font-size:10px
tdn → text-decoration:none;
c → color:

text-decoration:noneなんて長すぎて絶対打ってられないですもんね。しかもタイプミスも起こりえます。それを防ぐ上でも、自動で展開されるEmmetはおすすめです。

というかEmmetの存在がもはや当然になっています。だからこそドリちゃんには最初から使えるようになっている経緯があるのだと思います。

Emmetの記法は公式サイトにチートシートとして詳しく記載されています。少しずつでいいので、特にCSSでは積極的に使っていきましょう。作業がかなり速くなります!
Emmetのチートシート

ドットインストールにEmmetのレッスンが追加されています。(無料)
Emmet入門 (全15回)

質問や感想などお気軽にどうぞ!

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • 管理人(ねこポン)について

    ぬるま湯でぬくぬくと週3日だけ働く30代半ばウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。

    > 僕の20代まるごと黒歴史ストーリー

  • Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ