新しいブログに引っ越しました

tomotomoSnippetは新しいブログに移動しました
http://develtips.com/

2014-07-06

フリーのエディタAdobe Bracketsで ZenCoding

2014/07/06 11:31
BracketsはMac専用じゃないよ。Windowsでも使えるよとご指摘を受けましたのでタイトル修正しましたm(_ _)m

最近、週末に子ども達にプログラミングやHTMLコードを教える道場「CoderDojo西宮」という勉強会でメンターをしています。
CoderDojoでは、HTML+CSSの作成に無料のオープンソースエディタBracketsを利用しています。今日、初めてBracketsをインストールしてみて、便利そうでしたので紹介します。
今回のテーマはBracketsでZenCodingする。です。

まずはBracketsのインストール

Brackets - The Free, Open Source Code Editor for the Web


ライブプレビューが高機能

GoogleChromeと一緒に使う機能ですが、ライブプレビュー機能がかなりの高性能です。

画面、右上の雷(ボルト?)マークをクリックすると編集中のコードが瞬時にChrome上に再現されます。Dreamweaverのようななんちゃってライブプレビューじゃなくて、実際にブラウザでどう見えるかのプレビューなのでとても分かりやすい。

ZenCoding拡張機能(Emmet)のインストール

ファイル>拡張機能マネージャーを開くとBracketsに拡張機能をインストールできます。
検索ボックスに「Emmet」と打ち込むと見つかります。
インストールすれば、ZenCodingが利用できるようになります。

余談:ZenCodingで長らく親しんでいましたが、プロジェクトがリネームされて今はEmmetと呼ぶそうです。

Zen-Codingの次期バージョン、Emmet について
そのZen-Codingが、「Emmet」と、リネームされてプロジェクトが進められているようです。
 知らなかったのは僕だけですか?そうですか。

これからはEmmetと呼ぶことにします。本題に戻る。

Emmetのショートカット

ul#menu>li*3>a{test}
と打ち込んでおもむろにoption+command+returnを押すとHTMLに展開してくれます。
        <ul id="menu">
            <li><a href="">test</a></li>
            <li><a href="">test</a></li>
            <li><a href="">test</a></li>
        </ul>

他にもいろいろなコマンドがあるので、メニューバーのEmmetを開いて確認して下さい。

Expand Abbreviationの右端の記号がreturnキーだと初めて知った

Bracketsが気になった方は紹介動画もどうぞ




中々便利そうではありますが、僕はPhpStorm使うので出番はなさそうです。



0 件のコメント:

コメントを投稿

人気のエントリー