コーディングが爆速に!Zen-Codingの使えるショートカットまとめ

コーディングが爆速に!Zen-Codingの使えるショートカットまとめ


マスターすれば、100%といっていいほどコーディングの速度が上がるプラグインZen-Coding。
基本的な使い方は、Zen-Codingで規定されているコードを記載し、文末でコードに展開していくという使い方。

もちろんそれ以外にも便利な機能がありますが、今回はZen-Codingでの利用頻度の高いであろうショートカットをまとめました。

Zen-Codingの基本的なショートカットコマンド

Zen-Codingをマスターするにはショートカットを覚えること。

比較的使うショートカットをまとめてみました。これを覚えて極めてくださいね。
ショートカットは、使用する環境によって違いますのでご自身の環境を確認して下さい。

入力、編集関係

  • [Ctrl] + [Return]:<br>を入力。
  • [Ctrl] + [Alt] + B:選択範囲を<storng></storng>で囲う。
  • [Ctrl] + [Shift] + W:選択範囲を任意のタグで囲う。
  • [Ctrl] + [Shift] + L:選択範囲をAタグで囲う。
  • [Ctrl] + [Alt] + I(アイ):選択範囲を<em></em>で囲う。

カーソル操作関係

  • [Ctrl] + B:カーソルの親タグを選択。
  • [Ctrl] + W:カーソルのワードを選択。
  • [Ctrl] + L:カーソルの行を選択。
  • [Ctrl] + [Alt] + →:次の入力箇所へ移動。
  • [Ctrl] + [Alt] + ←:前の入力箇所へ移動。
  • [Command] + D:次の見出しへジャンプ
  • [Command] + [Shift] + D:前の見出しへジャンプ

閲覧関係

  • [Command] + [Ctrl] + C:スニペットウィンドウの表示
  • [Command] + [Shift] + ]:次のタブ(ファイル)へ
  • [Command] + [Shift] + [:前のタブ(ファイル)へ

他にもショートカットは沢山ありますのでご自身で使いながら調べてみてくださいね。

ショートカットの応用的使い方

Expand Abbreviation(省略コードの展開)

最も使い勝手のいいショートカット。Zen-Codingの基本は、スニペットを記述して展開するとコードになるというもの。例えば、

div#test

と記述して、文末で展開すると

<div id=”test”></div>

という形になります。つまり、#はHTML要素のIDを指定するために使用していることがわかります。ちなみに、#の代わりに.を使用すると、classの指定になります。

div.test これを展開すると

<div class=”test”></div>というコードに変換されます。

#や.の代わりに>を記述すると、チャイルド要素の指定になります。

つまり、

table>tr>td

と記載したら、

<table>
<tr>
<td></td>
</tr>
</table>

となります。

規定されている記号をタグの間に記載することで、短い記述でHTMLコーディングができるのです。

+や*においても、同様に設定されており組み合わせて使うことによりより短く長いコードが記載できるのです。

+の使い方ですが、

p.name1+p.name2

を展開すると、

<p class=”name1″></p>
<p class=”name2″></p>

となります。

*は、似たような要素を繰り返し記述したい内容が出てきます。その時に使うと、*数字といったような形にすると、任意の数字の回数分、生成されます。

などによく使えますね。table>tr*2>td*3<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>といったように、複数回記述したいものを短縮で行うと、かなりのスピード短縮になります。それ以外の属性を設定したい場合は、[]を使用します。p[title]と記述した場合、<p title=””></p>といった風になります。他にも便利な短縮コード記述方法がありますので、詳しくは、Zen-Coding wikiを御覧ください。その他、フィルターに関してはこちらに記載されています。フィルタの一例ですが、XMLではそのまま出来ない、,&の様な文字を記載できるような形にしたい場合、eというフィルタを利用します。p.title e<p class=”title”></p>といった風になります。フィルタに関する詳細はこちらから確認できます。

 

Wrap with Abbreviation要素を省略コードでマークアップできる方法

マークアップされていないリストの様な要素があった場合、例えば以下の様な形で書かれていたとします。<div>
日本酒
焼酎
ワイン
ウィスキー
ビール
</div><div>~</div>の範囲内で実行するとダイアログボックスが出ます。そのダイアログボックスに、省略コードを記載するとマークアップされた形で、展開されます。例えば、 li*>aと書きます。すると

といったように展開されてきます。aの属性をあらかじめ追記したい場合、a[属性名]と記載すればより短縮になります。

Update <img> Size(画像サイズの取得)

<img>タグのsrc属性で指定した画像ファイルのサイズ(縦横)を取得します。例えば、<img src=”image01.jpg” alt=””>と記載されているコードがあったならば、ここで、Update <img> Sizeのショートカットキーを押します。すると、<img src=”image01.jpg” alt=”” width=”320″ height=”240″>といったように、情報を更新してくれます。

Merge Lines(要素を1行にする)

<ul>
<li class=”list01″></li>
<li class=”list02″></li>
<li class=”list03″></li>
</ul>こういった複数行に展開された要素で、まとめたい場合改行を消していくのは割りと手間です。
それを、Merge Linesを実行すると<ul>
<li class=”list01″></li><li class=”list02″></li><li class=”list03″></li>
</ul>というようになります。

Remove Tag(タグの削除)

フォーカスしているタグのみを削除する機能です。フォーカスしているタグのみ削除され、要素はそのまま残りますので、時間短縮に繋がります。

Balance Tag Inward/Outward(要素の内側・外側を選択)

ショートカットを実行するとカーソルの位置の要素から、Inwardは内側の要素を、Outwardは外側の要素を選択します。長いタグを書いているとどこが終了かわからなくなってしまうため、それを認識するのに重宝します。しかし、ソースコードの記述によっては、認識しない場合もあるので注意です!

Go to Next/Previous Edit Point(編集箇所への移動)

選択しているタグの空の属性や空の要素、空行を移動することができます。
いちいち、マウスでカーソルを合わせなくてもいいので、とても便利です。

Split Tag(タグを分解する)

結合されているタグを分解する。分解することで、複雑なタグも整理しやすくなります。

Join Tag(タグの結合する)

分解されているタグを結合します。
そのタグを修正したい時、それが複雑に書かれている場合比較的使えます。

Toggle Comment(コメントアウトの実行・解除)

選択している要素をコメントアウトします。記述したコードが上手く反映されてない場合、細かい単位でコメントアウトするといいですね

 

まとめ

ここに上げるのは一部であって、使えば使うほどさくさくコーディングが出来るのは快感といっていいほど楽しいです。他にも機能はあります。Zen-coding Wikiにて確認できます。他にも使用していくうちに新たな発見があると思います。基本的な使い方をマスターして、応用のできる自分なりの使い方をしてみてくださいね。コーディングの時間を短縮することができれば、浮いた時間を有効活用できます。
デバッグに充てたり、無茶なスケジュールをクリアしたり、プロジェクトが終了したならば有給を取得したりと。時間がかかってしまう工程は仕方ありませんが、コーディングは短縮できるに越したことありません。Zen-Codingを利用して、生産性を高めてみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article初心者にも嬉しい無料で使えるレンタルサーバーまとめ