福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > 【初心者向け】Emmet(エメット)機能有無。HTML/CSSを編集するエディタならこれだ!

SUGOYOKU BLOG

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

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

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

【Emmet(エメット)】HTML/CSSを編集するエディタならこれだ!

Emmet機能有り

Dreamweaber

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

ATOM

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

Brackets

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

aptana

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

秀丸エディタ

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

サクラエディタ

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

まとめ

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

HP無料診断

毎月3社様限定SEO対策無料診断

【実践マーケティング手法22選】 無料ダウンロード

マーケティング手法22選

助成金・補助金・融資・M&A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。


補助金 お問い合わせ

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得