今回はWEBサイトで必須要素と言ってもいいグローバルメニューをCSSで記述してみたいと思う。一般に横並びのメニューのCSSでの記述は<LI>タグで各ボタンを設置し、<LI>タグにフロートをかけることで横並びになる。あと、注意する箇所は<LI>タグはデフォルトでリストタイプが設定されているので外さなければならない。

 
ホーム
 
会社情報
 
事業概要
 
IR情報
 
採用情報
 
お問合わせ

/*-------------------------
  グローバルナビゲーション
--------------------------*/

#globalnavi{
  margin: 0;
  padding: 0;
  width: 600px; /*各リストの合計の幅*/
}

#globalnavi ul{
  list-style-type: none; /* リストスタイルタイプを外す*/
  margin: 0;
  padding: 0;
}

#globalnavi li{
  float: left; /* フロートで横に並べていく */
  width: 100px;
  margin: 0;
  padding: 0;
}

#globalnavi a{
  text-align: center;
  display:block;
  padding: 0.5em 0;
  width: 100%;
  background-color: black;
  color: white;
}

/* ロールオーバー */
#globalnavi a:hover{
  background-color: red;
  color: white;
}

|  ブログ村 ＩＴ系資格 へ1票お願いします   |   ウェブデザイン技能検定2級対策問題集購入はこちらへ   |