webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

レスポンシブサイトでのcssスプライト

前回の授業で作った企業サイトにナビゲーションを追加します。
レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。
また、今回のナビゲーションボタンの画像は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 で表示・非表示をコントロールする方法を取ります。もちろん「display:none」がNGでは無いですが、安易に「display:none」を使うのを辞めようという流れがあるのも事実です。
なので、ケース・バイ・ケースで常に両方の選択肢を持てるようにしましょう。
今回はこのナビゲーションにメガドロップダウンメニューを入れるので、授業ではPC用とSP用に2つのnav要素を用意する方法で進めますが、余裕のある人は自宅などで1つのnav要素のパターンもやって見て下さい。

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-->

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>キリンの模擬サイト</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>

<body>
<header>
<div class="inner">
<h1>KIRIN</h1>
</div>
<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-->
</header>
<div class="key-visual">
</div>
<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>

<div class="inner">
<ul id="grallery">
<li class="photo01 size-2x2"><a href="#">grallery01</a></li>
<li class="photo02 size-2x1"><a href="#">grallery02</a></li>
<li class="photo03 size-1x1"><a href="#">grallery03</a></li>
<li class="photo04 size-1x1"><a href="#">grallery04</a></li>
<li class="photo05 size-2x1"><a href="#">grallery05</a></li>
<li class="photo06 size-1x1"><a href="#">grallery06</a></li>
<li class="photo07 size-1x1"><a href="#">grallery07</a></li>
<li class="photo08 size-1x1"><a href="#">grallery08</a></li>
<li class="photo09 size-1x1"><a href="#">grallery09</a></li>
<li class="photo10 size-1x1"><a href="#">grallery10</a></li>
<li class="photo11 size-1x1"><a href="#">grallery11</a></li>
</ul>

<div class="news-wrapper">
<div class="news">
<div class="txt-box">
<h2>ニュースリリース</h2>
<p class="rss"><a href="#">RSS</a></p>
<p class="about-rss"><a href="#">RSSについて</a></p>
<p class="all-list"><a href="#">一覧</a></p>
</div>
<dl>
<dt>2017年6月12日</dt>
<dd><a href="#">「復興応援 キリン絆プロジェクト」熊本支援 阿蘇GIAHS(ジアス)ツーリズム推進協議会に支援金を助成</a></dd>
<dt>2017年6月9日</dt>
<dd><a href="#">国産最軽量のアルミ缶が「第41回木下賞」を受賞!</a></dd>
<dt>2017年6月9日</dt>
<dd><a href="#">「キリンウイスキー 富士山麓 ブレンデッド18年」が「アジアスター賞」、「ワールドスター賞」を、「キリン 生茶」525mlペットボトルが「アジアスター賞」を受賞!</a></dd>
<dt>2017年6月8日</dt>
<dd><a href="#">「ギュギュッと搾ったサングリア」新スタイル300ml小容量ボトル缶が販売好調</a></dd>
<dt>2017年6月8日</dt>
<dd><a href="#">「シャトー・メルシャン “調和を味わう”3本セット」をDRINXで数量限定発売</a></dd>
<dt>2017年6月7日</dt>
<dd><a href="#">「第4回 寿司×クラフトビールフェス」開催</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">「キリンチューハイ ビターズ 皮ごと搾りはっさく<期間限定>」を新発売
</a></dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>
</div><!--/.news-->

<div class="info">
<div class="txt-box">
<h2>新着情報</h2>
<p class="all-list"><a href="#">一覧</a></p>
</div>
<dl>
<dt>2017年6月13日</dt>
<dd><a href="#">「キリン 氷結®ストロング 塩グリーンレモン<期間限定>」を新発売!(6月13日発売)</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">「47都道府県の一番搾り(栃木県・群馬県・埼玉県・千葉県・東京都・京都府・大阪府・奈良県・和歌山県・熊本県・宮崎県・鹿児島県・沖縄県)」を新発売!(6月6日発売)</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">「47都道府県の一番搾り」新CMを公開!</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">キリン食生活文化研究所 キリン食生活文化研究所のアンケート「ちょっと教えて」実施中!</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">「キリン 午後の紅茶 ティー ウィズ ミルク」を新発売!(6月6日発売)</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">「キリン 午後の紅茶」新CM『おいしい無糖「オール・マイ・ティー英語講座 ティー ウィズ ミルクぶら下がり」篇』を公開!</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">「キリン 午後の紅茶」新CM『おいしい無糖「食事もオール・マイ・ティー ティー ウィズ ミルクぶら下がり」篇』を公開!</a></dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>
</div><!--/.info-->
</div><!--/.news-wrapper-->

</div><!--/.inner-->
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd {
  margin:0;
  padding:0;
  line-height:1.0;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}
ul,ol {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  border:none;
  vertical-align:bottom;
}

/*ヘッダー部分*/
h1 {
  width:103px;
  height:26px;
  margin:20px 0;
  background: url(../img/head_logo_001.svg) no-repeat center/contain;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}

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

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

/*スマホ用ナビゲーション*/
.sp-nav {
  display:none;
}


/*ギャラリー部分*/
#grallery {
  overflow:hidden;
  padding:10px;
  box-sizing:border-box;
  margin-bottom:60px;
}
#grallery li {
  width:168px;
  height:168px;
  float:left;
  margin:10px;
  border:1px solid #BBB;
  box-sizing:border-box;
}
#grallery li a {
  display:block;
  width:100%;
  height:100%;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  opacity:1;
  transition:opacity linear 0.3s;
}
#grallery li a:hover {
  opacity:0.6;
}
#grallery li.size-2x2 {
  width:356px;
  height:356px;
}
#grallery li.size-2x1 {
  width:356px;
  height:168px;
}
#grallery li.photo01 a {
  background:url(../img/image_800.jpg) no-repeat center/cover;
}
#grallery li.photo02 a {
  background:url(../img/image_802.jpg) no-repeat center/cover;
}
#grallery li.photo03 a {
  background:url(../img/image_804.jpg) no-repeat center/cover;
}
#grallery li.photo04 a {
  background:url(../img/image_754.jpg) no-repeat center/cover;
}
#grallery li.photo05 a {
  background:url(../img/image_803.jpg) no-repeat center/cover;
}
#grallery li.photo06 a {
  background:url(../img/image_750.png) no-repeat center/cover;
}
#grallery li.photo07 a {
  background:url(../img/image_223.png) no-repeat center/cover;
}
#grallery li.photo08 a {
  background:url(../img/image_560.jpg) no-repeat center/cover;
}
#grallery li.photo09 a {
  background:url(../img/image_670.png) no-repeat center/cover;
}
#grallery li.photo10 a {
  background:url(../img/image_805.jpg) no-repeat center/cover;
}
#grallery li.photo11 a{
  background:url(../img/image_806.png) no-repeat center/cover;
}
/*PC時は非表示*/
#grallery li.photo11 {
  display:none;
}



/*ニュース部分*/
.news-wrapper {
  width:100%;
  padding:0 20px;
  margin:0 auto;
  box-sizing:border-box;
}
.news {
  width:48%;
  float:left;
}
.info {
  width:48%;
  float:right;
}
.txt-box {
  overflow:hidden;
  margin-bottom:10px;
}
.news-wrapper h2 {
  width:40%;
  float:left;
  font-size:18px;
}
p.rss {
  width:15%;
  float:left;
  font-size:13px;
  padding-left:18px;
  background:url(../img/rss.png) no-repeat left center;
  box-sizing:border-box;
}
p.about-rss {
  width:30%;
  float:left;
  font-size:13px;
  padding-left:16px;
  background:url(../img/about-rss.png) no-repeat left center;
  box-sizing:border-box;
}
p.all-list {
  width:15%;
  float:left;
  font-size:13px;
  padding-left:18px;
  background:url(../img/dl_list.gif) no-repeat left center;
  box-sizing:border-box;
}
.news-wrapper dl {
  border-top:2px solid #BBB;
  padding-top:15px;
}
.news-wrapper dt {
  width:25%;
  float:left;
  line-height:1.5;
  font-size:12px;
}
.news-wrapper dd {
  width:100%;
  padding-left:30%;
  padding-bottom:15px;
  margin-bottom:20px;
  line-height:1.5;
  font-size:12px;
  border-bottom: 1px solid #CCC;
  background:url(../img/dl_list.gif) no-repeat 25% 3px;
  box-sizing:border-box;
}
.news-wrapper dd a {
  display:block;
  color:#0066CC;
}
.news-wrapper dd a:hover {
  text-decoration:underline;
}
.info p.all-list {
  float:right;
}
.more {
  display:none;
}
@media screen and (max-width:959px) {

/*ギャラリー部分*/

#grallery {
  padding:1%;
}
#grallery li {
  width:18%;
  height:0;
  padding-bottom:18%;
  margin:1%;
}
#grallery li.size-2x2 {
  width:38%;
  height:0;
  padding-bottom:38%;
}
#grallery li.size-2x1 {
  width:38%;
  height:0;
  padding-bottom:18%;
}

#grallery li a,#grallery li.size-2x2 a {
  width:100%;
  height:0;
  padding-bottom:100%;
}
#grallery li.size-2x1 a {
  width:100%;
  height:0;
  padding-bottom:50%;
}
.news {
  width:100%;
  float: none;
  margin-bottom:60px;
}
.info {
  width:100%;
  float:none;
}

}
@media screen and (max-width:640px) {
.pc-nav {
  display:none;
}
.sp-nav {
  display:block;
}
.sp-nav {
  width:100%;
  height:150px;
}
.sp-nav ul {
  overflow:hidden;
}
.sp-nav li {
  width:50%;
  height:50px;
  float:left;
  position:relative;
}
.sp-nav li a {
  display:block;
  line-height:49px;
  font-size:14px;
  border-bottom:1px solid #999;
  padding-left:30px;
  box-sizing:border-box;
}
.sp-nav li:nth-child(odd) a {
  border-right:1px solid #999;
}
.sp-nav li:after {
  display:block;
  content:"";
  width:2px;
  height:16px;
  background:#FF0000;
  position:absolute;
  top:16px;
  left:20px;
}
#grallery li.photo01 a {
  background:url(../img/image_801.jpg) no-repeat center/cover;
}
#grallery li {
  width:48%;
  height:0;
  padding-bottom:48%;
  margin:1%;
}
#grallery li.size-2x2,#grallery li.size-2x1 {
  width:98%;
  height:0;
  padding-bottom:48%;
}
#grallery li.size-2x2 a {
  width:100%;
  height:0;
  padding-bottom:50%;
}


/*スマホ時は表示*/
#grallery li.photo11 {
  display: block;
}

/*.news-wrapper dt:nth-of-type(n+4),.news-wrapper dd:nth-of-type(n+4) {
  display:none;
}*/
.more {
  display:block;
  width:80%;
  height:40px;
  margin: 40px auto;
  border:1px solid #333333;
}
.more a {
  display:block;
  line-height:40px;
  text-align:center;
  color:#222;
  font-size:14px;
}
}