先日の100の質問の答えにもちょっと書いたのですが、世の中には「Zen-Coding」なるものが存在しています。ちょっと前にWebデザイン関係の皆さんのTwitterでも「すげえ」とかってビデオが流れてましたけど、実はこれ相当前からあるんですよ（笑）。
Zen-CodingとはもともとTextMateとNetBeans用に書かれたプラグインのことです。HTMLとCSSのコーディング作業をより高速におこなうための機能追加をしてくれるものですね。前述の2つ以外に、AptanaやCoda、Espressoといったエディタ、最近ではDreamweaverのMXPファイルもダウンロードできるようになってます（*1）。
というわけで、今回はボクが普段使っている「TextMate」とZen-Codingの組み合わせでコーディングがどう変わるのかをご紹介しようかと。タイトルに超速とか書いてますけど、まぁどうでしょうかね。
(more…)今月頭にお知らせしたデジタルスケープさんで11月に開催されるセミナー「WebディレクターのためのHTML+CSS基礎講座」がおかげさまで満員御礼になりまして、次回12月の開催も決定いたしました。
タイトルにもあるように、対象は一応Webディレクターさんとなっていますが、内容的にはこれからWebの業界に入りたい方でも大丈夫です。
と、前回の告知の時に、セミナーの内容についてはグダグダ書いてますので、そちらのページをご確認いただければ幸いです。
先日あまりにも近々でお知らせしたら既に満員御礼だったデジタルスケープさんでのセミナーですが、早速といってはなんですが次回の開催が決まったようでして、そのお知らせをさせていただきます。
タイトルにもあるように、対象は一応Webディレクターさんとなっていますが、内容的にはこれからWebの業界に入りたい方でも大丈夫です。
Webサイトのディレクションなどを担当される皆さんは、実際にあまり手を動かすことはないかもしれませんが、制作の現場がどういったことを考えて仕事しているのかを知らないというわけにはいきません。変化し続けるWebの世界の現状を把握しながら、今どういうことが求められていてどういったことに注意しておくべきか、実務にいかすにはどうしたらいいのかみたいな話とあわせて、Web制作の基本ともいえるHTMLとCSSの仕組みや考え方を押さえましょうといった内容になっております。
が、私の場合どちらかというと教科書でおしえてくれないこと（*1）を余談として口にする傾向にありまして、時間の許す限りHTMLとCSSに関することだけでなくFlashやモバイルの話、検索エンジンがどうしたこうしたとか、作業を楽にするツールを紹介したり、まだ日本では知られてないことなどもあれこれ喋るのではないかと。
※内容がそれない程度にですけど（笑）
興味のある方は是非この機会に（定期開催ではないものですから…）。
*1: 内容こそ違いますがたとえばこんなことだったりです。
（追記: 2009.10.15）
えー、告知をしてあまり日も経ってないのですが、おかげさまでまたまた満員御礼になったようです（ありがとうございます）。12月もひょっとしたらあるかもしれませんので、その際はまたあらためて…
「The Ultimate CSS Reference」や「The Ultimate HTML Reference」の出版元でおなじみの（って洋書読まない人には関係ないか…）sitepointのWebサイトで「CodeBurner for Firefox」というFirefox用のアドオンが配布されてるようです。
もともとFirebugを一緒に使うものであったようですけど単体で独立したのかな？ これをインストールしておけば、HTMLの要素だったりCSSのプロパティだったりを検索窓に入れてあげると、書籍の「The Ultimate CSS Reference」とかの表記と同じ感じでブラウザ毎の対応状況が表示されます（IE 7はBuggyとかね 笑）。
インストールして下のアイコンをクリックするとこんな感じ。
「オレはもう完璧」って人はいらないと思いますけど、ボクみたいに「あれ？あのプロパティ名ってなんだっけ？」っていうような人は入れておくと便利でしょう（笑）。
昨日ぼんやり海外のサイトのニュースを見ていたら、「Conditional-CSS」というサイトのリンクが載ってました。はて、それは何じゃらほい？と見てみると面白いことをされているじゃあーりませんか。
Web制作者の悩みの種といえば、ブラウザの種類が多いこと。
サイトの見え方を重要視した場合など、ターゲット次第ではCSSを切り替えたり、やれCSSハックだなんだと頭を抱えることにもなります。対応させるIEのバージョン次第ではコンディショナルコメントを使ったりされている方もいるのではないでしょうか（ボクはどちらもほとんど使わないのですが… 笑）。
そんなブラウザ毎に微妙に違う解釈を一つのCSSファイルで実現する方法として、このConditional-CSSってものが作られたようです。
これ、PHP版とかC版とかいろいろあるんですが、サイトの右側にあるコンパイラを使って必要なファイルを生成することができます。PHPならバージョンを選んで自分のCSSの名前を入れて「GO」ボタンを押せば、自動的に「c-css.php」なるファイルがダウンロードできます。
で、そのファイルをサーバにアップしてCSSの代わりにコイツを指示する、というのが基本的な導入方法のようです（サイトの説明ちゃんと読んでください 笑）。
Include the ‘c-css.php’ file as you would any CSS file on your web-pages using: @import “{path_to_}/c-css.php”; (or similar).
CSSの記述方法はサイトにも載ってますが、CSSの中にコンディショナルコメント的な書き方で適用させるブラウザ毎の値を入れておく感じです。
デモサイトをそれぞれのブラウザで見て、CSSの頭を見るとちゃんとそのブラウザ専用にCSSが生成されているようですね。そのオリジナルのCSSもサイトには用意されていますので、中を見てみると良いでしょう。
アクセスの多いサイトなんかだと、いちいちPHP呼び出して処理させるとどうかなぁ？と思ったりもしますが、ブラウザ毎に同じようなCSSを何枚も用意するよりは一個で完結できるのは制作者にとっては便利かもしれませんね。
ちなみに無駄に「font.css」だの「layout.css」だの複数のCSSを読み込んでいる場合（HTTP requestsの回数をあげるのが好きな方 謎）は、そのPHPの中の配列にCSSのファイル名を入れておけば良さそうですよ（ってことは、これを使えば統合できるんじゃないか？と思った）。
ま、面白そうだったのでお知らせまで。
使いたかったら、あとは皆さんが頭を使うだけです（笑）。