iPodを持っていますか？わたしは第三世代のiPodを使っていますが、故障もなく快適に使わせていただいています。主に音楽を聴く為に使っているのですが、iPodにはエクストラと呼ばれるメニューがあり、そこからメモ、カレンダー、ゲームなどプラスαになる機能が付いています。メモはよく使っていて欲しいCDのリストを入れておいたり、RSSを取り込んだりしています。こういうことで使っているとバッテリーの消費が早いのが気になるのですが、なかなか便利だったりします。
このサイトでも度々紹介しているStyleMasterの開発をしているWestcivが最近そのiPodのメモに搭載出来るCSSガイドラインを無料公開しました。そんなわけでわたしも早速ダウンロード。
learn web standards :: style master podGuide
サイトからダウンロードしたZIPファイルを解凍して、iPodの「Notes」フォルダに入れるだけなので非常に簡単です（最初の読み込みが時間かかりますが最初だけです）。英文ですがCSSについての基本的な概念が書かれた説明からCSS2.1の仕様内容までちょっとした本になるボリュームの情報量です。長いメモもリンクを張り巡らすことで素早く読みたい情報へ行けるように工夫がなされています。
これでいつでもどこでもCSSマスターです。実用性が高いか・・・といったら恐らく低いかもしれませんが、ちょっとしたネタには良いかもしれませんね。いやいや、意外に実用性があるのかな？ちょっと日本語化してみようかしらって一瞬思いましたがものすごい情報量なので保留です。とりあえず。
Dreamweaver MX 2004や僕が愛用させてもらっているskEditのようなエディタを使えばCSSの属性や値をすべて覚えなくてもコードヒントが出て来てくれるので非常に便利です。ある程度は覚えていますが、すべてきちんと覚えているかといったら自信がないのでこういったコードヒントは制作の上で役に立つと思います（もちろん頼り過ぎもどうかと思いますけど）。ブログをはじめとしたCMSを使ってサイトを管理している方の中にはエディタを使わずサイト管理画面から直接CSSを編集している方もいると思います。そういった場合すぐに属性や値が思い出せないときもあると思います。もちろん本を開けばそれで解決だと思いますが、以下に紹介しているようなページがあると便利かもしれませんね。
Webuator：CSS Reference
フレームの左側に常に属性リファレンスが用意されていて、グループ分けにもしてくれてあるので探している属性も見つけ易くなっています。右側のフレームに表示されているHTMLに記述して「Run」ボタンをクリックすればどんな見た目になるのかプレビュー出来るのも嬉しいところです。毎回訪れたくなる便利サイトってわけじゃないですが、初心者用の練習ページとしては使えそうだし、管理ツールにもこういった機能が組み込まれればおもしろいでしょうね。
実用性があるかないかは別として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さんの言葉を再引用させていただくと：
ちょっと任意の順になっている部分もありますが、関連するプロパティを並べるようにしました。それから大まかに
- ボックスモデル
- フォント関連
- その他細かいもの
という流れになるように書いています。ポイントは、「矛盾の無い順序にする」ということでした。
皆さんはCSSのプロパティの記述する順番について考えた事がありますか？毎回思いついた順番に書いていると、何処にどのプロパティを書いたのか探し難くなる場合もあります。特に10つくらい複数のプロパティを記述したときはなおさらです。筆者は属性をアルファベット順にならべて記述するように心がけています。
少し前にリニューアルしたMozilla.orgのスタイルシート（content.css）を見てみると属性の書く順番に関する簡単なガイドラインが記述されています。その一部を抜粋するとこんな感じで記述されています。
Suggested order:また、Mozillaにはマークアップ リファレンスというページがあり、そこではHTMLの記述方法や、どのクラスを継承すれば良いのかなど詳しい説明が例と一緒に掲載されています。このようなガイドラインや記述する順番を決めるのは複数のデザイナーやプログラマーと一緒に作業するときには不可欠なものだと思います。Mozillaのように海外にもサイトを持っているところとなるとこのようなガイドラインが重要なコミュニケーションツールになっているのは言うまでもありません。
display
list-style
position
float
clear
width
height
...
ガイドラインを作成するにおいてMozillaのリファレンスを参考にしてみると良いかもしれませんね。
