ホーム

スタッフブログ

2012年3月23日

HTML編集が数倍速くなるzen-cording

システム担当Tです。

今日はちょっと専門的なHTML編集にまつわるお話です。

ずっと気になっていてインストールはしていたものの使っていなかった
「zen-cording」というHTML編集支援のプラグインがありました。

先日奥野のプレゼン資料をHTML化するときにいい機会だと使ってみたら
噂通りすごく便利で編集作業がかなり効率化出来ました。

テキストをHTML化するのに便利

次の画像を見てください。
自動車メーカーが並んでいます。
これらをそれぞれリストタグで囲む作業を普通にやると面倒ですが、
zen-cordingを使うと一瞬です。

zencording11

該当箇所を選択して「ctrl+shift+A」のショートカットで現れるウィンドウに「ul>li*」と入力するだけ。
たったこれだけで一瞬にしてULとLIのタグで囲んでもらえます。

HTMLタグを手打ちしたことある人だったら驚きの速さでコーディングが進みます。

新規のコーディングにも便利

ある程度頭の中にどんな風にコーディングするか決まっていれば
こんな風に使うこともできます。

まず以下のように入力します。
zencording2

そして行末で「ctrl+E」をすると一気に展開され以下のHTMLとなります。

zencording3
インデントも行われ、開始終了のコメントまでつけることができます。
(最後の「|c」がコメント付加のコマンドです)

すごく便利だと思いませんか?

まだまだいろんな使い方ができるようです。

この記事はかなり参考になりました。

マークアップ効率化 – zen-codingでコーディングを倍速に (Yahoo! JAPAN Tech Blog)

さまざまなエディタにインストール可能

zen-cordingについては検索すると、使い方やそれぞれのエディタにインストールする方法がたくさん出てきます。
僕はエディタとして使っているNotepad++とeclipseに入れています。

HTMLのコーディングをやるけどzen-cording未体験の方は是非是非試してみたください!

求人バナー

このページの上部へ戻る