Dreamweaver MX 2004や僕が愛用させてもらっているskEditのようなエディタを使えばCSSの属性や値をすべて覚えなくてもコードヒントが出て来てくれるので非常に便利です。ある程度は覚えていますが、すべてきちんと覚えているかといったら自信がないのでこういったコードヒントは制作の上で役に立つと思います（もちろん頼り過ぎもどうかと思いますけど）。ブログをはじめとしたCMSを使ってサイトを管理している方の中にはエディタを使わずサイト管理画面から直接CSSを編集している方もいると思います。そういった場合すぐに属性や値が思い出せないときもあると思います。もちろん本を開けばそれで解決だと思いますが、以下に紹介しているようなページがあると便利かもしれませんね。
Webuator：CSS Reference
フレームの左側に常に属性リファレンスが用意されていて、グループ分けにもしてくれてあるので探している属性も見つけ易くなっています。右側のフレームに表示されているHTMLに記述して「Run」ボタンをクリックすればどんな見た目になるのかプレビュー出来るのも嬉しいところです。毎回訪れたくなる便利サイトってわけじゃないですが、初心者用の練習ページとしては使えそうだし、管理ツールにもこういった機能が組み込まれればおもしろいでしょうね。
11/26
yuuさんからいろいろとご指摘をいただきました。
私のエントリーには、いろんな面であやふやであったり、簡単に書きすぎてしまった部分がありましたので、ありがたくご指摘していただいた氏のBlogのエントリーにリンクさせていただこうと思います。
実際のエントリーは以下に残しておきます。
また、折を見て以下の文を修正し、新しくエントリーしようと思っております。
yuu氏のblog、securecatのMTのエントリー「Re: アクセシビリティとCSS」
-----
個人的にかなり久しぶりのエントリーとなってしまいましたが、私はWebサイトのアクセシビリティというものを考えると、CSSの役割がこれからさらに重要となり、また注目されると考えています。
それで、初心に帰るという意味をこめて書かせて頂きました。
以下駄文です。
実用性があるかないかは別としてCSSだけでもかなりいろいろなことが出来るんだよという意味で今回はCSSで絵やグラフを描いているサイトを幾つか紹介したいと思います。どのテクニックにも共通しているのがposition、display、z-indexのような場所を指定する属性を駆使して作られているところですね。CSSの実験サイトで一番おもしろいのはCutting Edge CSSですね。いきなり絵が登場していますが、画像を全く使っていないと言われても疑ってしまうくらいものスゴいことになっています。ちなみに曲線は「•（•）」を使い、大きさを変えたり重ねたりして作っているわけですね。えらい凝っています。他にもゲームがあったり、CSSフォントが作れたりとなかなか楽しいネタばかり集まっています。
もう少し実用的なのになるとCSSだけでグラフを描くやり方が紹介されているページがあります。たっぷりCSSを描く必要がありますが、それでも画像を貼付けるよりかはファイルサイズは小さいですし、ちょっと数値を変えたいときも画像編集ソフトを使わないで変えることが出来るので、ちょっと便利かもしれません。
他にもCSSで図表を描くことも出来ます。試しにCSSをオフにしてみると分かりますが、ヘッダーとリストを組み合わせてXHTMLが構造化されているのにも関わらずCSSをオンにすると図表に早変わりするようになっています。ソースコードをご覧になると分かりますが、ハックがたくさん施されているので実装するのは難しいかもしれません。しかし、CSSだけでもここまで出来るんだよという意味で見ると純粋に楽しいページ達なのではないでしょうか。
少し前のエントリーでCSSのプロパティの記述順番について書きました。特に決まったルールがあるわけではないのですが、MozillaではHTMLを含めたマークアップのリファレンスを掲載して海外のサイトを含めてサイト全体に一貫性を保っています。非常に長い英語のドキュメントですが、先日taiさんが、日本語訳を掲載してくださったのでこの場を借りて紹介させていただきます。英語との対訳があるので非常に分かり易いです。英語だから挫折してしまった方も今回の日本語訳を利用して参考にしてみてください。
takapo index：mozilla.org Markup Reference
Mozilla.orgが提案しているCSSプロパティの記述順番に疑問をもったJAM LOGのkazさんはCSSのコーディングスタイルを考えるというエントリーでMozilla.orgをデザインしたfantasaiさんにメールしたときのレポートを掲載しています。fantasaiさんの言葉を再引用させていただくと：
ちょっと任意の順になっている部分もありますが、関連するプロパティを並べるようにしました。それから大まかに
- ボックスモデル
- フォント関連
- その他細かいもの
という流れになるように書いています。ポイントは、「矛盾の無い順序にする」ということでした。
