Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ナビゲーションのマークアップとCSSデザイン

クロスブラウザなレイアウトデザインテクニック 第4回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/07/21 14:00

 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介しています。今回から次回にかけて、より実践的なテクニックとして、「ナビゲーション」を例にクロスブラウザな表示を意識したスタイリング方法を紹介していきたいと思います。

目次

はじめに

 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。

 これまでの記事では、クロスブラウザなCSSデザインをするうえで知っておきたいポイントとして、「ブラウザの表示モード」や「CSSハック」、「デフォルトスタイルの初期化」など、ブラウザの実装差異に関する基本的な事項を紹介してきました。今回から次回にかけて、より実践的なテクニックとして、「ナビゲーション」を例にクロスブラウザな表示を意識したスタイリング方法を紹介していきたいと思います。

 ナビゲーションのマークアップに使われる代表的な要素には、a要素とリスト関連の要素(ul要素、ol要素)がありますが、今回は、これら要素のプレゼンテーションをコントロールする代表的なCSSプロパティを押さえておきましょう。

対象読者

  • XHTMLとCSSの基本を理解している方。
  • Web標準に準拠したクロスブラウザなレイアウトデザインに興味のある方。

必要な環境

 クロスブラウザなデザインを目指すうえでターゲットとする視覚系ブラウザを一通りご用意ください。本稿では、Web標準を比較的よくサポートしているFirefox、およびユーザー数が多く表示上の問題の多いWindows Internet Explorer 6を中心に解説していますが、できるだけ多くの種類/バージョンのブラウザで表示確認をするのが望ましいでしょう。

リンクのスタイリングの基本

 アンカーを示すa要素は、ナビゲーションのマークアップに用いる最も基本的な要素です。以下、a要素で示されるリンク部分のスタイルを制御するテクニックを見ていきましょう。

リンクのデフォルトスタイル

 一般に、リンク部分であることを伝えるのに最も適した視覚表現は、ブラウザのデフォルト設定をそのまま反映したスタイルだと言えます。主な視覚系ブラウザのデフォルト設定では、未訪問リンク(まだ表示したことのないページへのリンク)の文字色は「青」、既訪問リンク(既に表示したこのあるページへのリンク)の文字色は「紫」で表現され、リンクテキストには下線が、リンク画像には枠線が引かれるのが一般的です。

図1:リンクのデフォルトスタイルの例
図1:リンクのデフォルトスタイルの例

text-decorationプロパティでリンクテキストの下線を制御

 テキストにリンクを設定した場合、一般的な視覚系ブラウザでは下線が引かれますが、この下線を制御するには、text-decorationプロパティを使用します。下線を消したい場合には、値を「none(装飾なし)」とし、消した下線を再度表示させたい場合には「underline(下線)」を指定します。

[リスト1]CSSソース:a要素の装飾をしない(下線なし)
a {
  text-decoration: none; /* a要素の装飾をしない(下線なし) */
}

 text-decorationプロパティでは、線の色や太さを制御することはできませんが、これらを制御したい場合には、まず「text-decoration: none」としてデフォルトの下線のスタイルをリセットしたうえで、「border-bottomプロパティ」で詳細なスタイルを指定することができます。

 ただしリンク表現としてユーザーが持っている認識を逸脱した表現をするのは避けた方が無難です。このような場合、リンク箇所であることに気付かれない可能性が高く、ユーザービリティは悪くなります。例えば、リンクテキストの文字色と下線の色が大きく異なったり、下線の線幅が太かったりするといった表現は、リンク箇所の表現として一般的ではありません。リンクテキストの下線やリンク画像の枠線の色は、文字色(colorプロパティ)に依存しますし、ボーダーの幅は、1pxで表現されるのが一般的です。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:クロスブラウザなレイアウトデザインテクニック
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5