はじめに
本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。
これまでの記事では、クロスブラウザなCSSデザインをするうえで知っておきたいポイントとして、「ブラウザの表示モード」や「CSSハック」、「デフォルトスタイルの初期化」など、ブラウザの実装差異に関する基本的な事項を紹介してきました。今回から次回にかけて、より実践的なテクニックとして、「ナビゲーション」を例にクロスブラウザな表示を意識したスタイリング方法を紹介していきたいと思います。
ナビゲーションのマークアップに使われる代表的な要素には、a要素とリスト関連の要素（ul要素、ol要素）がありますが、今回は、これら要素のプレゼンテーションをコントロールする代表的なCSSプロパティを押さえておきましょう。
対象読者
- XHTMLとCSSの基本を理解している方。
- Web標準に準拠したクロスブラウザなレイアウトデザインに興味のある方。
必要な環境
クロスブラウザなデザインを目指すうえでターゲットとする視覚系ブラウザを一通りご用意ください。本稿では、Web標準を比較的よくサポートしているFirefox、およびユーザー数が多く表示上の問題の多いWindows Internet Explorer 6を中心に解説していますが、できるだけ多くの種類／バージョンのブラウザで表示確認をするのが望ましいでしょう。
リンクのスタイリングの基本
アンカーを示すa要素は、ナビゲーションのマークアップに用いる最も基本的な要素です。以下、a要素で示されるリンク部分のスタイルを制御するテクニックを見ていきましょう。
リンクのデフォルトスタイル
一般に、リンク部分であることを伝えるのに最も適した視覚表現は、ブラウザのデフォルト設定をそのまま反映したスタイルだと言えます。主な視覚系ブラウザのデフォルト設定では、未訪問リンク（まだ表示したことのないページへのリンク）の文字色は「青」、既訪問リンク（既に表示したこのあるページへのリンク）の文字色は「紫」で表現され、リンクテキストには下線が、リンク画像には枠線が引かれるのが一般的です。
text-decorationプロパティでリンクテキストの下線を制御
テキストにリンクを設定した場合、一般的な視覚系ブラウザでは下線が引かれますが、この下線を制御するには、text-decorationプロパティを使用します。下線を消したい場合には、値を「none（装飾なし）」とし、消した下線を再度表示させたい場合には「underline（下線）」を指定します。
a {
text-decoration: none; /* a要素の装飾をしない（下線なし） */
}
text-decorationプロパティでは、線の色や太さを制御することはできませんが、これらを制御したい場合には、まず「text-decoration: none」としてデフォルトの下線のスタイルをリセットしたうえで、「border-bottomプロパティ」で詳細なスタイルを指定することができます。
ただしリンク表現としてユーザーが持っている認識を逸脱した表現をするのは避けた方が無難です。このような場合、リンク箇所であることに気付かれない可能性が高く、ユーザービリティは悪くなります。例えば、リンクテキストの文字色と下線の色が大きく異なったり、下線の線幅が太かったりするといった表現は、リンク箇所の表現として一般的ではありません。リンクテキストの下線やリンク画像の枠線の色は、文字色（colorプロパティ）に依存しますし、ボーダーの幅は、1pxで表現されるのが一般的です。
