Text Editor Actions for Coda v2.0b3

HTML 文章を書くのに Coda を使っています。ハンドコードする上で欠かせないプラグインが「Text Editor Actions for Coda」です。Espresso では標準でインストールされていますが Coda では別途インストールしなければなりません。

何が便利かといいますと、zen coding が使えること。この構文を覚える手間がありますが、習得してしまえば作業効率が格段に向上しますよ。CSS セレクタを理解しているとすぐに使いこなせるようになります。

他にも、コンテンツや要素の選択が簡単にできたり、選択した要素に親要素を追加したり、とかが簡単にできるようになります。わざわざマウスに持ち替える手間がなくて入力できます。

一例として、箇条書きリストを ul 要素でマークアップしてみましょう。

home
about
content

3行を選択した状態から Wrap With Abbreviation (control-shift-A) アクションを使います。コマンド実行シートが表示されるので

ul>li*>a

と入力して実行します。すると

<ul>
  <li><a href="">home</a></li>
  <li><a href="">about</a></li>
  <li><a href="">content</a></li>
</ul>

このように要素が補完された状態になります。ビデオを見るともっと理解が早まるかもしれません。

Demo video with current Zen Coding features

This entry was posted in HTML/CSS and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">