実はこの4つの擬似クラスの記述順序には注意が必要で、上記のように link、visited、hover、active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。

なぜこの順番じゃなければダメなのか？

実践Web Standards Design（通称ホップ本）には、次のように書かれています。

:hover擬似クラスと:active擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効にならない点に注意してください。

「3章 3.3/CSS管理のコツ」より

擬似クラスの記述順序には注意が必要です。（略）常に最後の指定で上書きされるということに注意し、link、visited、hover、active の順番で記述しておくと問題ないでしょう。逆に、すでに訪問済みのリンクは背景画像を変えたくないということであれば、visited を最後に記述するとよいでしょう。

「7章 16/背景画像を利用して訪問済みリンクを一工夫する」より

擬似クラスの記述順序にルールがあるというのを知ったのは、実はこの本がきっかけでした。それまでは「hover が効かない！」とか「訪問済みのリンクの色が変わらない！」とかいった問題に出くわしてハマッた経験が何度かあったので、書く順番が原因だったことがわかったときは思わず「そうだったのか！」とひざを打ってしまいました。

で、勢いづいてもう少し調べてみると、CSS の権威である Eric Meyer 氏のサイトでも同じ内容に関する解説を見つけました。

» Link Specificity – meyerweb.com

カンタンにまとめてみると、

• セレクタの固有性（specificity）は4つとも同じ。
• なので、最後に書かれたものから優先的に適用される。
• 例えば、link、active、hover、visited の順番で記述しているとすると・・・
• 未訪問リンクの場合は、active を hover が打ち消すので active は無効になる。
• 従って、active は hover の後ろに記述しなければならない。
• 訪問済みリンクの場合は、active も hover も一番最後の visited が打ち消してしまって無効になる。
• 従って、visited は hover や active の前に記述しなければならない。
• つまり、link、visited、hover、active の順番で書くべし。
• ちなみに、link と visited は打ち消しあうことがないので順番はどっちでもOK。
• link はあくまで「未訪問（unvisited）」のリンクのみに適用される擬似クラスで、「リンク全般」に適用されるものじゃないので要注意。
• link じゃなくて unvisited にすればいいのにね。

順番の覚え方

海外では、この記述順序ルールを link-visited-hover-active の頭文字をとって「LVHA」と言うようです。ちょっと覚えづらいなぁと思っていたのですが、たまたま見かけた海外のブログにうまい覚え方が紹介されていました。

» How To Remember The Order of Selectors: LOVE and HATE – CSS Tricks

Just think ‘LOVE’ (LV) and ‘HATE’ (HA)….

LOVE and HATE かぁ。ちょっと意味深だし覚えやすいですね。

他にも「こんなふうに覚えてるよ」というのがあれば是非教えてください。live happily とかどうかな？

» TinyURL Callback API

使い方はカンタン。

というふうに、コールバック関数名とTinyURLを渡すだけ。すると、

というふうにリンク先のURLがコールバック関数と共に返ってくるので、

という感じに、事前に定義しておいたコールバック関数で受け取ればOK。

しかし、どうしてこの手の API を TinyURL.com が公開していないのか不思議です・・・ニーズはいっぱいあるのにね。

Verdana に統一

ポイントは、実にシンプル。「英数字のフォントを Verdana に統一する」ことです。

デフォルトでは標準フォントが「ＭＳ Ｐゴシック」になっているかと思いますが、英数字がかなり微妙。一方、Verdana はモニタで美しく見えるようにデザインされており、フォントサイズが小さくても見やすいので、非常に気に入っているフォントの一つです。（このブログでも Verdana を使っています。）

比べてみるとこんな感じになります。

やり方は、セルを選んでフォントを「Verdana」に変更すればよいのですが、それだといちいち手間がかかります。そこで一工夫。

1. 標準フォントを Verdana に設定する

   [ツール]-[オプション]-[全般] で「標準フォント」を Verdana にするだけ。ついでに私は、フォントサイズを 9 に変えています。（11 だとちょっと大きいと思うので。）これで、新規ドキュメントの標準フォントはすべて Verdana になります。

2. フォントを Verdana に変更するマクロを用意する

   XLSTARTフォルダに Personal.xls という個人マクロを定義したファイルを置いておくと、Excel が起動されるたびに非表示の状態で読み込まれます。（詳しくは、Excel 2003 での Excel 起動フォルダの使用方法を参照。）この機能を利用して、フォントを Verdana に変更するマクロを用意しておけば、ショートカットキー一発でフォントを変えることが出来ます。

   私が作成したマクロブックは次のファイルです。よかったらどうぞ。

   Personal.xls

   このファイルを以下の場所に置いてみて下さい。

   <pre>C:\\Documents and Settings\\{User Name}\\Application Data\\Microsoft\\Excel\\XLSTART</pre>

   ショートカットキーは

   <strong>Ctrl+j</strong>

   となっています。私はいつも、

   <strong>Ctrl+a</strong>

   （全選択）→

   <strong>Ctrl+j</strong>

   （フォント変更）→

   <strong>Ctrl+s</strong>

   （上書き保存）というコンボで作業しています。

   ちなみにこのマクロ、セルだけでなく、図形の中のフォントも変えることができるので大変便利です。

   

図形を多用するドキュメントの場合

図形をよく使う場合は、「グリッドに合わせる」が有効です。

[表示]-[ツールバー]-[ユーザー設定...]-[コマンド] で、図形描画のコマンドの中に「グリッド」というのがあります。これをドラッグ&ドロップでツールバーに表示させます。

これを使うと、オートシェイプなどの図形を、グリッドにあわせて移動したり拡大・縮小したりできます。図形の大きさを統一させたり、並びを揃えることがカンタンにできるので、美しいドキュメントに仕上げることができます。

さらにセルのサイズを方眼状にしておけば、より図形を作りやすくなるのでオススメです。

以上のテクニックで見栄えのいいドキュメントを作ってみてください。もちろん、中身も大事ですので、お忘れなく！

Fireworksにはバッチ処理の機能がありますが、処理を実行すると次の場所にログファイルが作成されます。

• Documents and Settings\ユーザー名\Application Data\Macromedia\Fireworks8\FireworksBatchLog.txt (Windows)
• /Users/ユーザー名/Library/Application Support/Macromedia Fireworks 8/FireworksBatchLog.txt (Macintosh)

処理結果の確認や、処理に失敗した時のデバッグなどに使いましょう。（アプリから開けないのはイマイチだなぁ・・・）

» A Gradient Tutorial » 9rules Network Official Blog

こちらのサイトでは、グラデーションを作る際のポイントが説明されています。

さて、どれが一番きれいでしょう？1 は彩度（鮮やかさ）が足りません。上のサイトでは「a classic problem」と紹介されています。2 はマシですが、ちょっと素人臭さを感じます。まぁ好みは人それぞれだと思いますが、やっぱり 3 が一番きれいだと思います。

ちなみに僕は、次のようにしてグラデーションを作成しています。使っているのは Fireworks です。

1. まずは、両側とも同じ色で塗ります。少し明るめの色がよいです。

   

2. 一方の色を変えます。ポイントは、「明るさ」のみを落とすこと。Windows版だと、「色の選択」ダイアログの右端の矢印を下げるだけでOK。落としすぎると暗くなってしまうので注意が必要です。

   

3. できあがり。この方法だと最初の色選びを間違えない限り、そんなに悪い結果にはなりません。

   

毎回色を考えるはめんどくさい！というあなた（というか自分）ために、いくつかカラーチャートを用意してみたので、よかったら参考にしてみてください。