今さら聞けない『Emmet』の基礎知識

今さら聞けない『Emmet』の基礎知識

今さら聞けない『Emmet』の基礎知識

1.『Emmet』って何?

もうすでに導入されている方にとっては、「何を今さら」な内容なのですが、私自身が今イチよく分かってなかったので、備忘録的な感じでまとめさせて貰いました。

まだ導入されていない方の参考になれば幸いです。

と言うより、使わなかったら本当に損です。

それとこの記事は、HTMLやCSSの知識がある方対象ですね。 それが無いと何が何やら?になってしまいます。

HTMLやCSSのことに関してお知りになりたい方は、まずこちらの記事をお読みください。

ch_eyecatch_starttoHTMLいまさら聞けない「HTML」超入門
はじめてのHTMLウェブサイトを作るとき、どうしても学習する必要がある言語がHTMLです。これは何かというと、様々なものをウェブブラウ...

ch_eyecatch_starttoCSSいまさら聞けない「CSS」超入門
はじめてのCSSCSSとは、HTMLなどのWEBページを制作する上で文字のスタイルやフォント、文字の大きさを表現する定義をまとめたものと言え...

1-1.HTMLやCSSのコーディングを支援してくれる爆速サポートプラグイン『Emmet』

プログラミングをしている時の一番の問題は、同じコードを何度も入力しなければならないことです。

HTMLやCSSのような基本的なプログラミングにおいてもそれは同じですよね。 と言うより、そちらの方が多いのかも知れません。

『Emmet』は、元々は“Zen-Coding”という名前でした。

“Zen-Coding”もHTMLやCSSの記述・編集を強力にサポートしてくれるプラグインで、様々なIDEやエディタに対応していましたが、2012年9月ごろから『Emmet』という名前で開発が進められ、2013年2月に正式版がリリースされました。

現在も機能の拡張が行われ続けていますし、CodePenのようなコードを公開するオンラインサービスなどでも採用されています。

独自の省略記法によるコーディングの高速化』が『Emmet』の主な特徴になります。

後で具体例を挙げていきますが、ショートカットキーを1つ入力するだけで、すぐにHTMLやCSSを作成できます。

『Emmet』をもっとよく知りたいなら、こちらのサイトを御覧ください。 入力とその後の展開の様子がデモで流れていますし、実際に入力してみることもできます。

1-2.『Emmet』が使えるテキストエディタ

Sublime Text 2

後で詳しく紹介します。

DreamWeaver

2015年リリースされたDreamWeaverの最新版には、レスポンシブデザイン対応に大幅な改善が施されましたが、中でもbootstrapやEmmetのネイティブサポートが追加されています。 つまりプラグインされた状態で、販売されてると言うことです。

Coda

プラグインページからCoda用プラグインを落としてきて、 それをダブルクリックするだけで準備完了です。

Web Storm

JavaScript系のIDEでは最強と呼ばれるWeb Stormですが・・・・・・。 使ったこと無いので導入方法はイマイチわかりません。本当にご免なさい。

2.導入前にちょっと補足。Sublime Text 2 の紹介。

Sublime Textは、2008年に初版が、2011年にはVer.2がリリースされました。特にVer.2は広く人気が出たテキストエディターです。

日本でも2011年の終わりから関心を集め、2012年にはブログなどで取り上げられる機会が増えたことで、主にWeb制作やRubyなどのLL言語を対象に広く認知されるようになったようです。

また書籍が発売されるなど、現在でも注目を集めています。

2-1.様々なPGM言語に対応したテキストエディタ

  • 強力なテキスト編集機能
    複数選択などのマークアップ・プログラミングにフォーカスしたテキスト編集機能。

  • ソースコードへのアクセスの良さ
    ソースコード内のシンボル/行/ファイルなどへのアクセスだけでなく、プロジェクト内のファイルをまたいだ素早い移動のサポート。

  • カスタマイズ性の高さ
    設定ファイルを編集する方式で、プログラミングなどを普段行っている操作を手早く行え、さらに項目もプログラムの動作からショートカットに至るまで多岐に渡る。 公式に登録されているプラグインパッケージが2014年6月時点で2000を超えており、それらを組み合わせるだけでも強力な環境を自身で構築できる。

  • 対応言語の多さ
    インストール時点のデフォルトでActionScript、AppleScript、ASP、batch files、C、C++、C#、Clojure、CSS、D、Diff、 Erlang、Go、Graphviz(DOT)、Groovy、Haskell、HTML、Java、JSP、JavaScript、JSON、LaTeX、Lisp、Lua、Makefiles、Markdown、MATLAB、Objective-C、 OCaml、Perl、PHP、Python、R、Rails、Regular Expressions、reStructuredText、Ruby、Scala、shell scripts(Bash)、SQL、Tcl、Textile、XML、XSの言語をすでにサポートしている。 さらにパッケージを導入することで対応言語を追加できる。

2014年6月2日にアップルが発表したSwiftについても言語パッケージが現地時間の同日中に公式パッケージとしてリリースされている。

2-2.Emmetはそのプラグイン

紹介したSublime Text 2にPackage Controlが入っている前提で、説明します。

Ctrl + Shift + Pを押し、Install Packageを選択。 出てきたリストの中からEmmetを選ぶ。

これだけです。 数秒待てばインストールが完了し、もう準備完了です。

2-3.とりあえず使ってみよう。

HTML編

『Emmet』でHTMLを書く際に、最低限知っておくと便利なのは、

  • HTMLのひな形を一瞬で作れる
  • idは『#』、classは『.』
  • タグを表すための『<』と『>』が不要になります。タグ名だけでいい
  • 入れ子にする際にはA>Bのように>を使う
  • 展開した時に連番にしたいときは$を使う
  • 属性を表すときは、[属性名=値]と書く。値に"は不要
  • 各タグにいい感じにデフォルト属性をつけてくれる

基本、これだけの恩恵を受けられます。 プログラミングする上での面倒なことを、全部引き受けてくれる感じですね。 CSSやjQueryを使ったことが有る方なら、すぐ馴染めると思います。

他にも『()』でグループ化したり、『^』で階層を上に戻ったりできます。

例えば、HTMLのひな形を作る場合 HTML5なら、たった一文字! ホントこれだけ!なんです。「!」だけです。

これを展開するとHTML5のひな形が出来ます。

 

文字コード指定のmetaタグまで入れてくれます!

XHTML transitionalにしたい場合は、html:xtです。 HTML4なら『html:4t』です。IE対応用だけって感じですが。 いい加減、IE対応はやめにしたいですけどね。レスポンシブ対応じゃないし。

CSS編

多少の慣れは必要ですが・・・。

EmmetでCSSを書く時に意識すべきことは、

  • 複数行まとめて展開は出来ない。
  • 基本的に-で繋がるプロパティ名は、頭文字を打てばOK。
  • 先頭に-を打つと、ベンダープレフィックスを適切に入れてくれる。

などです。

慣れるまでは「むしろ面倒」と思うかもしれませんが、慣れるともう離せなくなります。

こんなに便利!

【t】【a】【c】と打つだけで、『text-align: center;』と、頭文字をつないだ文字列になっています。

他にも例を出していきますと・・・・・・。

 

このように、被るプロパティ名が多い頭文字は 少し長めに打たないといけないのですが、それでもたかだか5文字程度です。

こんなのが欲しいんだけど、ないかな?

そう思われたのなら、公式のチートシートを見てみて下さい。 とても覚えきれない数があります。ここに書くのはまず無理です。 要所要所を見て覚えてみて下さい。 formやinputタグ回り、CSSの面白い省略記法などアリアリです。

 自分流のカスタマイズも手軽にできますので、『Emmet』を使ってコーディングの効率をあげましょう!!!

LEAVE A REPLY

*
* (公開されません)

CAPTCHA


*

COMMENT ON FACEBOOK