読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

ナビゲーションボタンの制作

CSS

擬似クラス

擬似クラスでまず覚えるべきは以下の4つです。

  • link 通常リンク(未アクセス)のスタイル
  • visited アクセス済みリンクのスタイル
  • hover ポイント時のスタイル
  • active アクティブ時のスタイル

です。

この4つの擬似クラスを指定する際には、
link → visited → hover → active 、といった順序で記述する必要があります。

a:link {
   color: #0000FE;
}
a:visited {
   color: #880088;
}
a:hover {
   color: #FF6600;
}
a:active {
   color: #FF000;
}

4つの疑似クラスの前には「:」コロンをつけます。




ナビゲーションボタンを作る際のポイント

マウスクリック(ホバー)により、次の情報に遷移可能であることを認知させる仕組み
文字以外の領域面ををクリック可能にするためには「display: block」が必須
高さは、「line-height」か「padding」で指定する、
「li」に padding を指定しても「li a」に指定がなければ打ち消したことになるので領域が広がりません。

borderを指定する際は「幅の指定はli」borderの指定は「li a」にする
縦並びのナビゲーション

f:id:yachin29:20160314023433j:plain

<body>
<ul>
<li id="new"><a href="#">新着情報</a></li>
<li id="info"><a href="#">お知らせ</a></li>
<li id="item"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
</ul>
</body>


スタイルシート記述例

/* reset */
html, body, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
  color: #222;
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}


/*レイアウト*/
ul {
  width: 200px;
}
li {
  width: 200px;
  height: 50px;
  text-align: center;
}
ul li#new a {
  display: block;
  background-color: #FE0000;
  height: 50px;
  line-height: 50px;
  color: #FFF;
}
ul li#info a {
  display: block;
  background-color: #FEA500;
  height: 50px;
  line-height: 50px;
  color: #FFF;
}
ul li#item a {
  display: block;
  background-color: #9ACD32;
  height: 50px;
  line-height: 50px;
  color: #FFF;
}
ul li#shop a {
  display: block;
  background-color: #32CD33;
  height: 50px;
  line-height: 50px;
  color: #FFF;
}
横並びのナビゲーション

ブロックレベル要素は基本的には縦に並んでいくので、
「float」を使用します。

f:id:yachin29:20160314024951j:plain

/* reset */
html, body, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
  color: #222;
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}


/*レイアウト*/
ul {
  width: 800px;
  margin: 50px auto 0;
}
li {
  width: 200px;
  height: 50px;
  text-align: center;
  float: left;
}
ul li a {
  display: block;
  height: 50px;
  line-height: 50px;
  color: #FFF;
}
ul li#new a {
  background-color: #FE0000;
}
ul li#info a {
  background-color: #FEA500;
}
ul li#item a {
  background-color: #9ACD32;
}
ul li#shop a {
  background-color: #32CD33;
}
ul li#new a:hover, ul li#info a:hover, ul li#item a:hover, ul li#shop a:hover {
  background-color: #FFF;
}
ul li#new a:hover {
  color: #FE0000;
  border: 1px solid #FE0000;
}
ul li#info a:hover {
  color: #FEA500;
  border: 1px solid #FEA500;
}
ul li#item a:hover {
  color: #9ACD32;
  border: 1px solid #9ACD32;
}
ul li#shop a:hover {
  color: #32CD33;
  border: 1px solid #32CD33;
}


通常は横幅をCSSで指定しないと「横幅=100%」ですが、floatさせたボックスには、width を指定しなくてはいけません。