こんにちは、中尾です。
Zen-Coding、みなさん試されましたか？画期的なコーディング補助ツールとして近頃話題になっています。未体験の方は是非オススメです。インストールせずともオンラインでZen-Codingできます。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

div#header+div#contents>(div.section>h3)+div#footer

と入力すると・・・以下のコードがドンと表示されます。

<div id="header"></div>
<div id="contents">
<div>
<h3></h3>
</div>
<div id="footer"></div>
</div>

私もDreamWeaverや秀丸マクロで早速試してみましたが、コードがどばっと表示され爽快です。CSSを書くような気持ちで簡単に記述できます。今後定番となりそうですね。

以前CSS Zen Gardenというサイトがありましたが、HTML/CSSは禅にも通ずるということなのでしょうか？
（※Zen-Cartというのもありましたね）

以下の記事を参考にしました。

Zen-Codingでできるあんなことこんなこと  |  gaspanik weblog

Zen-Codingで楽々コーディング! + コツ1つ

明けましておめでとうございます。ここのところ所持品が色々と故障している中尾です。
遅くなりましたが本年もWeb&Peaceをよろしくお願いします。

新年早々JQueryが1.4にバージョンアップしました！更にスピードアップとのこと。改善されたパフォーマンスをここまで視覚的に訴えられると、試したくて仕方がありません。特設サイトも展開しているようですね。近頃は書籍などからも軽量化・高速化の波を肌で感じております。早速導入です。

さて、本日は要素の高さを揃えるいろいろの話です。要素を横並びにfloatさせた場合に高さを揃えるため四苦八苦しています。高さを揃える手段は多岐に渡り存在しており、そのどれもが一長一短というところ。今回はここ最近で使用している方法を中心にご紹介いたします。

CSSのみで揃える場合：

横並びにする段組を一つの要素で囲み、囲んだ要素に背景画像を表示させることで表示では高さを揃えているように見せるテクニックを使います。

• 段組レイアウトのお約束：段組ボックスの底辺を揃える（揃っているように見せる） « Like@Lunatic Blog

この場合、clearfixを使うなどして、親要素の高さを表示させる必要があります。また、うまくマークアップをしないと不要な要素をHTML側に加えることとなります。「要素の高さ」という文書と関係のないHTMLをどこまで許容するか・・日々精進です。

Javascriptで揃える場合：

便利なJavascriptを使用します。これらのスクリプトにはいつもお世話になっており、大変助かっています。

• ブロックレベル要素の高さを揃えるheightLine.js[to-R]
• jQueryでブロック要素の高さを揃えてみる – 徒書（jquery.flatheights.js）

heightLine.jsの場合は要素にクラスの指定をする必要があるため、近頃はjquery.flatheights.jsを使わせてもらっています。このスクリプトを使えば要素指定をJS側で指定するため、HTML側を触る必要はありません。

ただし、Javascriptが無効の環境では当然のことながら動作しませんので、最低限ガタガタにならぬようCSSでmin-heightを当てます。しかしmin-heightはIE6に効果がありませんので、堂々巡りを避けるため下記のようなハックを当てることでIE6とは一応の和解としています。

• 2行追加するだけで、簡単にIE6でもmin-heightを実現する方法 | CSS-EBLOG

他にもinline-blockを使用する方法やpaddingとmarginを極端当てる方法など、
色々とありますが、状況に応じて使い分けたいところです。