コーディングメソドロジー

第53回 汎用性の高いページナビの組み方

今回は通常、IE7以下で認識しないインラインブロック要素をCSSテクニックを使って認識させ、背景画像を使ったちょっとリッチなページナビを実現する方法をご紹介します。
ページナビは、現在ではページが増える度に手作業で設定を行うケースは少なく、WordPressやMovableType等で自動生成されることがほとんどです。ですが静的に自分で組んだ経験があると、出力されたタグをカスタマイズすることも容易になりますので、ぜひトライしてみて下さい。

(1)マークアップの決め手はコメントアウト!
まずはマークアップです。特筆すべきは各<li>要素の間をコメントアウトしていること。
これはIE等で、ソース上のスペースを誤って読み取り、ブラウザで実際に表示される画面にスペースが入ってしまうのを防ぐためです。

HTMLソース記述

01 完成図

HTML解説

ポイントは2つあります。
1つ目は<ul>のように左右の矢印、数字を1つのタグですべて囲んでしまうこと(1-A)です。中の要素<li>をインラインブロックで設定することによって、インラインのようにテキストアラインプロパティを使って中央配置することが可能です。
2つ目は各<li>要素の間に、コメントアウトを入れてソース上の隙間を埋めること(1-B)です。
意図していないスペースがプレビュー画面に現れたら、まずソース上の隙間を調べてみて下さい。

(2) <li>要素をインラインブロックにするには?
IE7ではインラインブロック要素をただのブロック要素として認識してしまうため、
縦に並んでしまいます。そこで今回のポイントです!
*display: inline; *zoom: 1;(2-A)の2行を追記してください。
これだけでIE7以下でもインラインブロック要素が認識されるようになります。
(3)インラインブロックで並べた<li>内の<a>をブロック要素に
次にインラインブロックで並べた<li>要素内に配置した<a>要素のカスタマイズです。
まず<a>要素をdisplayでブロック要素に指定します。通常通り幅や高さを指定するのですが、ここで注目してもらいたいのが併せてline-height(2-B)も設定することです。これは<a>要素内の数字を縦方向中央に配置する効果があります。
(4)オーバー、カレント時をスプライトで設定して完成
最後にオーバー時、カレント時の設定をして完成です。
ページナビの設定には右図のような1枚の背景画像を用意して、ホバー時、カレント時で読み込む背景画像の位置を変えることで表示を変化させる、スプライトと呼ばれるCSSテクニックが便利です。JSで画像を切り替えることもできますが、スプライトにはJSを使うよりも読み込むデバイスに負荷をかけない、挙動が早い、等のメリットがあります。

02 IE7 プレビュー画面

03 CSSスプライト

通常/ホバー/カレント時で、背景画像の表示位置が異なる

03 CSSスプライト

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム