WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

レスポンシブサイトのナビボタンを画像で作る

前回の授業で作ったギャラリー部分とスライダーにナビゲーションを追加します。
レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。
また、今回のナビゲーションボタンの画像はCSSスプライトで作ります。
さらに参考サイトであるキリンのサイト同様、ボタンをホバーしたら、ボタン下部に▲とボーダーが出てくる設定にしましょう。


参考画像
f:id:yachin29:20170224131120p:plain

f:id:yachin29:20170224131213p:plain


nav要素の高さ:50px
li要素の高さ:30px
ホバーしたら出てくるborderの幅:3px

今回のポイント

以前はPC用とSP用に2つのnav要素を用意して、display:block と display:none で表示・非表示をコントロールしていましたが、今回は1つのnav要素でPC・SP共に使いまわす方法を取ります。もちろん「display:none」がNGでは無いですが、安易に「display:none」を使うのを辞めようという流れがあるのも事実です。
なので、ケース・バイ・ケースで常に両方の選択肢を持てるようにしましょう。
今回はこのナビゲーションにメガドロップダウンメニューを入れるので、授業ではPC用とSP用に2つのnav要素を用意する方法で進めますが、余裕のある人は自宅などで1つのnav要素のパターンもやって見て下さい。


2つのnav要素のパターン

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブでのCSSスプライト</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,ul,li {
margin:0;
padding:0;
line-height:1.0;
}
ul {
list-style:none;
}
a {
text-decoration:none;
}

.pc-nav {
width:100%;
height:50px;
margin-top:50px;
border-bottom:1px solid #999999;
}
.pc-nav ul {
width:960px;
margin: 0 auto;
overflow:hidden;
height:50px;
}
.pc-nav li {
width:16.66%;
height:30px;
float:left;
border-right: 1px solid #999;
box-sizing: border-box;
}
.pc-nav li:first-child {
border-left: 1px solid #999;
box-sizing: border-box;
}
.pc-nav li a {
display:block;
line-height:50px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
background: url(img/nav.png) no-repeat center top;
}
.pc-nav li.nav2 a {
background-position:center -50px;
}
.pc-nav li.nav3 a {
background-position:center -100px;
}
.pc-nav li.nav4 a {
background-position:center -150px;
}
.pc-nav li.nav5 a {
background-position:center -200px;
}
.pc-nav li.nav6 a {
background-position:center -250px;
}

.pc-nav li a:hover {
line-height:47px;
border-bottom:3px solid #FF0000;
}
.pc-nav li.nav1 a:hover {
background: url(img/nav_h.png) no-repeat center top;
}
.pc-nav li.nav2 a:hover {
background: url(img/nav_h.png) no-repeat center -50px;
}
.pc-nav li.nav3 a:hover {
background: url(img/nav_h.png) no-repeat center -100px;
}
.pc-nav li.nav4 a:hover {
background: url(img/nav_h.png) no-repeat center -150px;
}
.pc-nav li.nav5 a:hover {
background: url(img/nav_h.png) no-repeat center -200px;
}
.pc-nav li.nav6 a:hover {
background: url(img/nav_h.png) no-repeat center -250px;
}

.sp-nav {
display:none;
}
@media screen and (max-width:959px) {
.pc-nav ul {
width:100%;
padding:0 1%;
box-sizing:border-box;
}
}
@media screen and (max-width:640px) {
.pc-nav {
display:none;
}
.sp-nav {
display:block;
width:100%;
}
.sp-nav ul {
width:100%;
overflow:hidden;
height:122px;
}
.sp-nav li {
width:50%;
height:40px;
float:left;
position:relative;
}
.sp-nav li a {
display:block;
font-size:13px;
line-height:40px;
color:#222;
padding-left:30px;
box-sizing:border-box;
border-bottom: 1px solid #999999;
}
.sp-nav li:nth-child(even) a {
border-left:1px solid #999999;
}
.sp-nav li a:after {
display:block;
content:"";
width:2px;
height:16px;
background:#F00;
position:absolute;
top:12px;
left:10px;
}
.sp-nav li a:hover {
text-decoration: underline;
}
}
</style>
</head>

<body>
<nav class="pc-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a></li>
<li class="nav2"><a href="#">キャンペーン</a></li>
<li class="nav3"><a href="#">エンタメ・レシピ</a></li>
<li class="nav4"><a href="#">CSV活動</a></li>
<li class="nav5"><a href="#">企業情報</a></li>
<li class="nav6"><a href="#">お客様相談室</a></li>
</ul>
</nav><!--/pc-nav-->

<nav class="sp-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a></li>
<li class="nav2"><a href="#">キャンペーン</a></li>
<li class="nav3"><a href="#">エンタメ・レシピ</a></li>
<li class="nav4"><a href="#">CSV活動</a></li>
<li class="nav5"><a href="#">企業情報</a></li>
<li class="nav6"><a href="#">お客様相談室</a></li>
</ul>
</nav><!--/sp-nav-->
</body>
</html>


1つのnav要素のパターン

htmlファイル

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブでのCSSスプライト</title>
</head>

<body>
<nav class="pc-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a></li>
<li class="nav2"><a href="#">キャンペーン</a></li>
<li class="nav3"><a href="#">エンタメ</a></li>
<li class="nav4"><a href="#">CSV活動</a></li>
<li class="nav5"><a href="#">企業情報</a></li>
<li class="nav6"><a href="#">お客様相談室</a></li>
</ul>
</nav><!--/pc-nav-->
</body>
</html>


CSSファイル

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブでのCSSスプライト</title>
<meta name="viewport" content="width=device-width">
<style>
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  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: none;
}
img, input {
  vertical-align: bottom;
}

.pc-nav {
  margin-top:50px;
  height: 50px;
  border-bottom:1px solid #999;
}
.pc-nav ul {
   width:960px;
   margin: 0 auto;
   overflow: hidden;
   height:50px;
}
.pc-nav li {
  float: left;
  height: 30px;
  width: 16.66%;
  border-right: 1px solid #999;
  box-sizing: border-box;
}
.pc-nav li:first-child {
  border-left: 1px solid #999;
  box-sizing: border-box;
}
.pc-nav li a {
  display: block;
  line-height: 50px;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}
.pc-nav li.nav1 a {
  background: url(img/nav.png) no-repeat center top;
}
.pc-nav li.nav2 a {
  background:url(img/nav.png) no-repeat center -50px;
}
.pc-nav li.nav3 a {
  background:url(img/nav.png) no-repeat center -100px;
}
.pc-nav li.nav4 a {
  background:url(img/nav.png) no-repeat center -150px;
}
.pc-nav li.nav5 a {
  background:url(img/nav.png) no-repeat center -200px;
}
.pc-nav li.nav6 a {
  background:url(img/nav.png) no-repeat center -250px;
}
.pc-nav li a:hover {
  line-height: 47px;
  border-bottom:solid 3px #ed0200;
}
.pc-nav li.nav1 a:hover {
  background: url(img/nav_h.png) no-repeat center top;
}
.pc-nav li.nav2 a:hover {
  background:url(img/nav_h.png) no-repeat center -50px;
}
.pc-nav li.nav3 a:hover {
  background:url(img/nav_h.png) no-repeat center -100px;
}
.pc-nav li.nav4 a:hover {
  background:url(img/nav_h.png) no-repeat center -150px;
}
.pc-nav li.nav5 a:hover {
  background:url(img/nav_h.png) no-repeat center -200px;
}
.pc-nav li.nav6 a:hover {
  background:url(img/nav_h.png) no-repeat center -250px;
}

@media screen and (max-width:959px){

.pc-nav {
  width:98%;
  padding:0 1%;
}

@media screen and (max-width:640px){

.pc-nav {
  width:100%;
  height:120px;
  margin:0;
 border-bottom:none;
}
.pc-nav ul {
  width: 100%;
  height: 120px;
  overflow:hidden;
}
.pc-nav li {
  width: 50%;
  height:40px;
  border-right: none;
  box-sizing: border-box;
   border-bottom: 1px solid #CCC;
}
.pc-nav li:first-child {
  border-left: none;
  box-sizing: border-box;
}
.pc-nav li a {
  display: block;
  line-height: 40px;
  white-space: normal;
  text-indent: 0;
  overflow: visible;
  padding-left: 30px;
  box-sizing: border-box;
  font-size:14px;
  position:relative;
}
.pc-nav li a:before {
  display:block;
  content:"";
  position: absolute;
  top:10px;
  left:20px;
  width:2px;
  height:20px;
  background:#F00;
}
.pc-nav li.nav1 a {
  background: none;
}
.pc-nav li.nav2 a {
  background: none;
}
.pc-nav li.nav3 a {
  background: none;
}
.pc-nav li.nav4 a {
  background: none;
}
.pc-nav li.nav5 a {
  background: none;
}
.pc-nav li.nav6 a {
  background: none;
}
.pc-nav li a:hover {
  line-height: 40px;
  background: none;
  border-bottom:none;
  text-decoration: underline;
}
.pc-nav li.nav1 a:hover,
.pc-nav li.nav2 a:hover, 
.pc-nav li.nav3 a:hover,
.pc-nav li.nav4 a:hover,
.pc-nav li.nav5 a:hover,
.pc-nav li.nav6 a:hover {
  background: none;
}
.pc-nav li:nth-child(odd) {
  border-right: 1px solid #999999;
}

}
</style>
</head>

<body>
<nav class="pc-nav">
<ul>
<li class="nav1"><a href="#">商品情報</a></li>
<li class="nav2"><a href="#">キャンペーン</a></li>
<li class="nav3"><a href="#">エンタメ</a></li>
<li class="nav4"><a href="#">CSV活動</a></li>
<li class="nav5"><a href="#">企業情報</a></li>
<li class="nav6"><a href="#">お客様相談室</a></li>
</ul>
</nav><!--/pc-nav-->

</body>
</html>