Rittyのサイト作成日記

zen-cordingでHTMLとCSSのタグ打ちが速くなる

私はHTMLとCSSでホームページを作っていて、タグ入力ももっぱら手書きです。さくらエディタというテキストエディタ（フリーウェア）を使い、良く使うタグはwindowsで文字登録しています。（たとえば、「ａ」と入れたら「<a href="" target="_blank">」と変換）でも、<li></li><li></li><li></li>というのを一気に入力できないわけで、コピペコピペで頑張っていました。そしたらzen-codingです。さくらエディタなら、外部登録マクロとして導入することができ、div#page>div.logo+ul#navigation>li*5>aと入力しマクロを実行すると、<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul></div>と変換されます。いちばん最初に変換した時は、感動で涙でるぐらい震えました（笑。調べてみると、Zen Cordingを解説した記事ははてぶ数が1000以上でした。知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログいろんなひとがそれぞれの環境で使えるZen Cordingを公開中。★Movable Type用→Downloads - mt-zen-coding - Project Hosting on Google Code★さくらエディタ用→Zen Coding for Sakura Editor - MoonWing（カンパウェア）※さくらエディタ用は、基本の変換のみ実装しています。私は本屋さんでこの本を見つけて知りました。わかりやすく解説されているので買ってよかったですが、買わなくても基本機能を使うに困らないと思います。▲HTML＋CSSコーディングが10倍速くなるZen Coding