Rittyのサイト作成日記

< 新しい記事

新着記事一覧(全211件)

過去の記事 >

December 20, 2010

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

(2)

カテゴリ： HP作りアイテム

私は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>
</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

お気に入りの記事を「いいね！」で応援しよう

Last updated December 20, 2010 05:31:58 PM
コメント(2) | コメントを書く

[HP作りアイテム] カテゴリの最新記事

ブログ用にカワイイ写真加工はPicnik（ピ… December 28, 2008 コメント(2)
javascript(lightbox2.04)で写真を表示 September 23, 2008 コメント(6)
ＱＲコードで携帯から楽にアクセス May 25, 2007

■コメント

Rittyさんへ。

m-nao3166

こんばんは＾＾
お久しぶりです☆
私もジーンとしました。
コメントありがとうございました。

実は日ペンで美文字さんのブログも読んでいたんですよ＾＾
いつも一生懸命なRittyさんに元気をいただいてました。

これからもお互いに頑張りましょうね♪

コメントとっても嬉しかったです。
ありがとうございました(^O^)／ (December 21, 2010 08:18:01 PM)

返事を書く

★m-nao3166さんへ

Ritty さん

こんばんは。コメントありがとうございます。

美文字さん、読んでくださったんですね。
苦しかったけどがんばったことなので、嬉しいです♪

>これからもお互いに頑張りましょうね♪

１人じゃないから頼もしいです。
がんばりましょう＾＾
(December 24, 2010 12:18:54 AM)

返事を書く