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

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

リストをナビゲーション - 縦

ナビゲーション

  • マウスクリックにより、次の情報に遷移可能であることを認知させる仕組み
  • 文字以外の領域面ををクリック可能にするためには「display: block」が必須
縦ナビゲーション
  • 文字が並ぶだけの場合、「li」に文字サイズとリスト間の空きを指定する
  • 「li a」は、マウスの反応を受け取る「面」を指定する
リストをナビゲーションに
<body>
<div class="nav">
<ul>
<li><a href="#">新着情報</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">店舗案内</a></li>
<li><a href="#">会社案内</a></li>
</ul>
</div>
</body>


《基本形》

f:id:web-0127:20161002233734p: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;
}

/* nav
-----------------------------------*/
.nav {
  width: 100px;
  margin: 50px auto;
  text-align: center;
}
.nav li a {
  display: block;
  padding:10px;
  color: #000;
  cursor: pointer;
}
.nav li a:hover {
  background-color: #E8E8E8;
  color: #ff8800;
}
NV01
  • マウスが乗った状態を設定しなさい

f:id:web-0127:20161003094326p: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;
}

/* nav
-----------------------------------*/
.nav {
  width: 150px;
  margin: 50px auto;
  text-align: center;
}
.nav li a {
  display: block;
  padding: 10px 0 8px 0;
  border-bottom: 1px dotted #AAA;
  color: #000;
  cursor: pointer;
}
.nav li:first-child a {
  border-top: 1px dotted #AAA;
}
.nav li a:hover {
  background-color: #E8E8E8;
  color: #ff8800;
}
NV02
  • マウスが乗った状態を設定しなさい

/* .nav
-----------------------------------------------------*/
.nav {
  width: 200px;
  margin: 50px auto;
  background: #FFF;
}
.nav li {
  height: 40px;
  font-weight: bold;
  margin-bottom: 10px;
}
.nav li a {
  display: block;
  padding-left: 1em;
  line-height: 40px;
  color: #63A4FE;
  border: 2px solid #63A4FE;
}

/* .Pseudo-class
-----------------------------------------------------*/
.nav li a:hover {
  background: #63A4FE;
  color: #FFF;
}
NV03
  • マウスが乗った状態を設定しなさい


/* .nav
-----------------------------------------------------*/
.nav {
  width: 200px;
  margin: 50px auto;
  background: #FFF;
}
.nav li {
  height: 40px;
  font-weight: bold;
}
.nav li a {
  display: block;
  padding-left: 1em;
  line-height: 40px;
  color: #63A4FE;
  border-bottom: 1px dotted #63A4FE;
  background: url(img/arrow.gif) no-repeat 2px 17px;
}
.nav li:first-child a {
  border-top: 1px dotted #63A4FE;
}

/* .Pseudo-class
-----------------------------------------------------*/
.nav li a:hover {
  color: #FFA802;
  background: url(img/arrow_o.gif) no-repeat 2px 17px;
}