グローバルナビゲーシ...|独学でWebデザインの勉強をする人のためのまとめサイトです。


WordPressの準備・導入パターンとレンタルサーバー費用相場・比較表
WordPressの始め方、導入パターン・レンタルサーバーの費用相場、おすすめのレンタルサーバーを紹介

マンダラ塗り絵ダウンロードサイト
マンダラや幾何学模様、花、ボタニカルアートの塗り絵を配布中。





グローバルナビゲーション リストを横並びにする


  • メニュー・ナビゲーション

グローバルナビゲーション リストを横並びにする

グローバルナビゲーションの一例です。

ここでは、テキストメニューでリストを横並びにし、displayプロパティを使ってボタンのように見せています。

→デモサイトを見る

リストを横並びにする

  1. 横並びのリストはdiv id="navigation"としてdivで囲みます。
  2. div id="navigation"にボックスの幅を指定します。
  3. ul要素のlist-styleプロパティでマーカーを消します。
  4. li要素のボックスの幅を指定し、floatプロパティで横並びにします。(リストを左から順に回り込ませる。)
    ※floatプロパティを指定したli要素には、同時にボックスの幅も指定しておく必要があります。
    (Mac IE5では、li要素のボックスの幅が広がり横並びにできないという事例があるため)

リンク領域を拡大し、アレンジしていく

  1. a要素をブロックレベル要素として表示させます。(display:block)
  2. 旧ブラウザ対策として横幅を100%と指定しておくとよいでしょう。
  3. 上下方向のpaddingを指定することでテキストの位置を調整。
  4. 文字色や背景色のスタイルを追加していきます。
  5. リンクの下線を消し、テキストを中央ぞろえにします。
  6. ul要素にはボックスの高さを指定し、overflowプロパティの値をhiddenにします。
    ※フォントサイズが拡大された場合に、ナビゲーションのレイアウトが大きく崩れてしまうのを防ぐための指定。

オンマウス時のスタイルを指定する

  1. マウスを重ねることで変化する仕組みを取り入れていきます。

→デモサイトを見る

以下の「HTML」「CSS」それぞれのタブをクリックすると、ナビゲーション部分のみのコードを確認することができます。




Facebookページに「いいね!」をクリックしていただくと、当サイトの更新情報を受け取ることができるようになります。
ぜひ、「いいね!」していただけると嬉しいです!



Pagetop