【初心者向け】Emmet（エメット）機能有無。HTML/CSSを編集するエディタならこれだ！

2016.08.22

ウェブディレクターの川上です。今回は無料で使えるエディタの紹介です！皆さんはどんなエディタを使っていますか？ウェブ制作の現場でなかなかしぶるものを使っていないと時間がかかってしまってどうしようもないですねf^_^; Emmet機能が使えるものとそうではないものの2グループに分けてご紹介致します。 EmmetとはHTML/CSSのコードをより早く入力するための予測機能的な役割をしてくれる機能です。例えばHTMLでは

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

と打たないといけないものを ul<li*5　Tabキーを押せば一行で終わらせる事ができます。 CSSでは background-image:url(); font-size:; を bgi Tabキー fs　Tabキーのたった3文字などで終わらせてくれたりと簡単に書ける機能です。なかなかしぶりますね(^^) この機能があるとないでは時間のかかりかたが違うので、覚えておくといいですね！

【Emmet（エメット）】HTML/CSSを編集するエディタならこれだ！

Emmet機能有り

Dreamweaber

1番人気の言わずとしれたAdobe社のdreamウィーバーです。正直これさえあれば困る事はほぼないと思います。 ccでは標準でEmmet機能が付いています。ぜひ

ATOM

ATOMを使っている業者の方も多いのではないでしょうか。プラグインで日本語にしたりEmmet機能ももちろん付け加えられます(^^)他のサイトでも紹介されているので検索してみてくださいね！

Brackets

こちろもプラグインに似たアドオンにはなりますが、Emmet機能を取り入れられます(^^)

aptana

こちらも日本語へのプラグインがあるので分かりやすいかと思います。Tabキー以外のボタンにはなりますがEmmet機能をインストールすれば使えます。いろんな箇所ではDreamweaverにも劣らないとの評判もありますので、皆があまり知らないエディタを使いたいって時にはこれをおすすめします7(^^)/ Emmet機能無し

秀丸エディタ

秀丸エディタを使っている方も多くいるんではないかと思います。秀丸エディタの特徴としては、あつかえるファイルサイズが大きい事
高速な動作が出来る
豊富なカスタマイズ機能などです。

サクラエディタ

こちをもメモ帳と同じくらい知っている方も多いはずです！特徴としては、キーワードに色が付く(HTML・CSS・PHPなど)
行数・桁数の表示
各種プログラム言語に対応です。 Emmet機能はありませんがインストールしていて損はしないので、入れておいたほうがいいです。

まとめ

全体的な特典を考えると、Dreamweaverがいいとは思いますが、なんせ有料のため、手が出しにくいですね(‘_’)（１年間で５万程）なので２番目のATOMがいいですね！プラグインでEmmet機能を取り入れられ、日本語にも対応させる事が出来ます。まず間違いないでしょう(^^) まだエディタを入れていない方はATOMを入れて存分にプログラミングをしましょう！ありがとうございましたm(__)m