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回)

コラム:Webデザイナーを強くオススメする理由

あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。ここで、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『エンジニアカレッジ』の詳細を読む

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

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

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

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

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

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

    一番上へ