CodeZine(コードジン)

特集ページ一覧

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

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

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

目次

borderプロパティでリンク画像の枠線を制御

 画像にリンクを設定した場合、一般的な視覚系ブラウザでは、リンク画像の周りに境界線を表示します。この境界線を表示したくない場合には、img要素に「border: none」を指定してデフォルトスタイルをリセットすると良いでしょう。

[リスト2]CSSソース:img要素の枠線を消す
img {
  border: none;
}

 リンク画像にデフォルトで表示される枠線を非表示にした場合、リンクが貼られていることが視覚的に分かりにくくなる可能性があります。リンク画像では、「押す」「行く」という動作や機能を視覚的に表現し、通常の画像と差別化すると良いでしょう。例えば、リンク画像をボタンのように立体的にしたり、小さな矢印アイコンや三角形アイコンを付加したりするなどの工夫が考えられます。

図2:平面的なリンク画像(左)と立体的なリンク画像(右)の例
図2:平面的なリンク画像(左)と立体的なリンク画像(右)の例

リンク擬似クラスで未訪問リンクと既訪問リンクのスタイルを振り分ける

 「リンクのデフォルトスタイル」の節で述べたように、一般的な視覚系ブラウザでは、リンク先を訪問したことがあるかどうかで、リンクのアンカーを区別して表現します。CSSで両者の状態を区別して表現するには、未訪問リンクは「:link」、既訪問リンクは「:visited」というリンク擬似クラスを使用します。

[リスト3]CSSソース:未訪問と既訪問のスタイルをリンク擬似クラスで振り分け
a:link { color: #003399; }  /* 未訪問リンクの文字色を#003399に */
a:visited { color: #660099; }  /* 既訪問リンクの文字色を#660099に */

ダイナミック擬似クラスでユーザーアクションに応じてスタイルを振り分ける

 さらに、ポインタのホバー時には「:hover」、アクティブ時は「:active」、フォーカス時には「:focus」というダイナミック擬似クラスを使用して、ユーザーアクションに応じたスタイルを適用させることができます。

 「:hover」「:active」擬似クラスについては、リンク擬似クラスと共に、a要素に指定し、リンクテキストのスタイルをコントロールするのに使用されるのが一般的です。これらについては次節で詳しく紹介しましょう。

 「:focus」擬似クラスについては、弱視のユーザーなどがアクションしやすいよう要素を目立たせるために使用されることが多く、例えば、background-colorプロパティで背景色を指定して、要素をハイライト表示させるような使い方をします。しかし「:focus」擬似クラスは、IE 7以下でサポートされていないため、クロスブラウザなデザインを実現するには、別途「csshover3.htc」のようなスクリプトを使用する必要があります。なお、「:focus」をサポートする視覚系ブラウザで、フォーカス時に要素のまわりにデフォルトで表示されるボーダーは、border関連プロパティではなく、outline関連プロパティで制御することができます。

ダイナミック擬似クラス(:hover、:active、:focus)
ダイナミック擬似クラス 説明
「:hover」 ある要素がマウスのようなポインティングデバイスで指し示されているが、まだアクティブではない状態の時に適用される
「:active」 ある要素がアクティブな状態の時(例えば、マウスや実行キーなどを押してから離すまでの間)に適用される
「:focus」 ある要素がフォーカスを受けている状態の時(例えば、アクセスキーやTabキーなどのキーボード操作によってフォーカスを受けている状態の時や、入力フィールドにテキストを入力できる状態の時)に適用される

複数の擬似クラスを指定する場合は、記述順序に注意する

 次の例では、未訪問リンクと既訪問リンクの下線を非表示に指定し、文字色(前景色)をそれぞれ「青」と「緑」に指定、ホバー時とアクティブ時には下線を表示、文字色は「赤」になるよう指定しています。

[リスト4]CSSソース:擬似クラスによるスタイル設定
a:link {
  color: blue;  /* 文字色を青に */
  text-decoration: none;  /* 装飾しない(下線を非表示) */
}
a:visited {
  color: green;  /* 文字色を緑に */
  text-decoration: none;  /* 装飾しない(下線を非表示) */
}
a:hover, a:active {
  color: red;  /* 文字色を赤に */
  text-decoration: underline; /* 下線を表示 */
}

 この例のように、a要素に複数の擬似クラスを指定する場合には、スタイルの読み込み順序による優先度を意識して、「a:link、a:visited、a:hover、a:active」の順序で指定するようにしましょう。リンクのスタイルが期待した結果にならないといった問題は、指定順序に原因があることが多いのです。

 例えば「a:hover」の記述が「a:link」や「a:visited」よりも前にある場合、ホバー時の指定は、後方の「a:link」や「a:visited」の指定に上書きされてしまうため、結果としてホバー時の状態になっても、スタイルは変化しないままになってしまいます。同様に、「a:active」の後に「a:hover」を記述した場合、「a:active」の指定は「a:hover」の指定に上書きされて無効になります。


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

バックナンバー

連載:クロスブラウザなレイアウトデザインテクニック

著者プロフィール

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

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

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

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

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5