4杯目：桜の下でCSS談義

＜この内容はwithDで公開されているものの転載になります＞

「人と人」「人と情報」「人と物」をつなぐために、3人のフリーランスWebデザイナーがユニットを作りました。その名も「linker（リンカー）」。ポッドキャスト第4回は、予定していた内容を変えて、新宿御苑にお花見がてら出かけてみました。ゲストに株式会社まぼろしの小林信次さん（ディレクター／マークアップエンジニア）をお呼びしてのCSS談義です。

今回も収録は外でやってみましたよ

右から2番目がゲストの小林信次さん

第3回の収録が外でやってみていい感じだったので、今回もお花見がてらロケとなりました。桜が三分咲きの新宿御苑（東京都新宿区）に、お弁当持参で行ってきたのです。

初のゲストは（株）まぼろしの小林信次さん！

本来、「人と物をつなぐ」をテーマにお送りする予定だったのですがが、急遽企画を変更。番組初のゲストとして、株式会社まぼろしの小林信次さん（ディレクター／マークアップエンジニア）に来ていただきました。

初めてのCSS本は、エビスコムさんの本

エビスコムさんは沢山の技術書を出版されています。なんですが、本名や職場などの情報は明かされていないので、cremaはいつもすごーく気になっているのです。一説によると、北海道のすごく奥にお住まいというウワサも。普段どのように情報収集されているのでしょうか？ あぁ、一度お会いしてみたい。

師匠は、益子貴寛さん

小林さんのCSSの師匠として名前があがったのが、益子貴寛さん。「CYBER@GARDEN」「Web標準の教科書」などでおなじみの、CSSの巨匠です。cremaは、CYBER@GARDENのCSSをとても参考にしています。

CSSの仕様書

CSSの仕様書（日本語訳）は、こちら。Web制作に携わるのであれば、ぜひ目を通しておきたいところですね。調べ物をするときには、プロパティから CSS 仕様書を引く形のリンク集もとても便利ですよ。

モジラのあれ

小林さんがCSSのプロパティの順番において参考にしていたのは、Mozilla.orgのガイドラインです。CSSファイルの先頭に、「Suggested Order」が記述されています。なお、話題に出てきたCSSのプロパティを並べ替えするツールは、こんなのとかこんなのなど、いろいろあります。試してみてはいかがでしょうか？

わいゆーあい（YUI）

話の中に「わいゆーあい（YUI）」という言葉が出てきましたが、「The Yahoo! User Interface Library」のことです。各種ブラウザがデフォルトで持っているスタイルを一度クリアにするための「YUI Reset CSS」が提供されています。

キャメルケース

idとclassの話のところで出てきたキャメルケースというのは、複数の単語をひと続きで書くときに、単語の頭文字を大文字で記述する方式のことを言います（例：camelCase）。らくだのコブに似ているので、こう呼ばれるようになったらしいですよ。

yuga.js

ページ内移動の「するするアニメーション」のところで話題に出たのが、「yuga.js」。Webクリエイターの中村享介さんが開発／配布しているJavaScriptです。画像のロールオーバーやテーブルに一行おきにカラーリングをするなど、使い勝手の良い機能が一つにまとめられた便利モノです。

CSSがValid

CSSがValidかどうかは、「W3C CSS 検証サービス」でチェックできますよ。

CSSが格好いいサイト１「Vicuna」

Vicunaは、3ping.orgのwuさんが、各種CMSやブログのテンプレートを配布しているサイトです。このCSSの美しさは、必見です。

CSSが格好いいサイト２「西村あさひ法律事務所」

話題に出てきた「西村あさひ」とは、かの有名なWeb制作会社「bA」ことBusiness Architectsさんが制作した「西村あさひ法律事務所」のWebサイトのこと。複雑なコンテンツを整理するユニークなナビゲーションでも、とても話題になったサイトです。

オパシティ（opacity）

小林さんが一つ選ぶCSSのプロパティは、CSS3の「opacity」。透明度をコントロールするためのものですが、現状では、様々なブラウザで同等の表示を得るためには、「filter」「-moz-opacity」などのプロパティと組み合わせて使う必要があります。

こんな気持ちいい場所だと、話も弾みます。