くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[CSS]リストを使った横ナビゲーション(3月12日)

リストを横ナビゲーション

 

ナビゲーションの種類
  グローバルナビ →実はあまり使われない 
  サイドナビ  →ローカルナビ
  フッターナビ →ローカルナビ

  パンくずリスト →現在位置を示す役割

 

横ナビゲーションの特徴・注意点
・各メニューの横幅指定が必要
・float: leftで横並びにする
・更にその周りをulで固めるが、ulにも横幅指定をする

サイズの設定を綿密に!(レイアウトが崩れやすい)

 

li に幅指定、float: left; 指定

li aborder指定

※li にborder指定すると、borderの分幅が増え、カラム落ちの原因に。

 

ul・・・ top、bottom、leftのボーダー
li a ・・・right