webサイト制作の勉強|2018月2月クラスブログ

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

既存サイトのトレース header部分

<!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">
<link rel="stylesheet" href="css/wideslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/wideslider.js"></script>
</head>

<body>
<header>
<div class="inner">
<h1>コーポレートサイト</h1>
<ul class="header-box">
<li><a href="#">マイページ</a></li>
<li><a href="#">IR・投資家情報</a></li>
<li><a href="#">English</a></li>
<li><input type="search" name="search" id="search"></li>
</ul>

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

<div class="wideslider">
<ul>
<li><a href="#1"><img src="img/mainvis_290.jpg" alt="" /></a></li>
<li><a href="#2"><img src="img/mainvis_291.jpg" alt="" /></a></li>
<li><a href="#3"><img src="img/mainvis_292.png" alt="" /></a></li>
</ul>
</div><!--/.wideslider-->
<nav class="sp-nav sp-on">
<ul>
<li><a href="#">商品情報</a></li>
<li><a href="#">キャンペーン</a></li>
<li><a href="#">エンタメ・レシピ</a></li>
<li><a href="#">CSV活動</a></li>
<li><a href="#">企業情報</a></li>
<li><a href="#">お客様相談室</a></li>
</ul>
</nav>

<ul class="grid">
<li class="size-2x2"><a href="#">バナー1</a></li>
<li class="size-2x1"><a href="#">バナー2</a></li>
<li><a href="#">バナー3</a></li>
<li><a href="#">バナー4</a></li>
<li class="size-2x1"><a href="#">バナー5</a></li>
<li><a href="#">バナー6</a></li>
<li><a href="#">バナー7</a></li>
<li><a href="#">バナー8</a></li>
<li><a href="#">バナー9</a></li>
<li><a href="#">バナー10</a></li>
<li class="sp-on"><a href="#">バナー11</a></li>
</ul>
</body>
</html>


スタイルシート

/*PC用スタイル*/
.inner {
  max-width:960px;
  margin:0 auto;
}
/*ヘッダー部分*/
h1 {
  width:103px;
  height:26px;
  float:left;
  background:url(../img/head_logo_001.jpg) no-repeat;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
  margin:20px 0;
}
.header-box {
  width:60%;
  height:26px;
  margin:20px 0;
  float:right;
  display:flex;
  align-items:center;
  justify-content:space-around;
}
.header-box li {

}
.header-box li a {
  padding-left:16px;
  font-size:14px;
  color:#666;
  background:url(../img/ico01.png) no-repeat left center;
}
.header-box li:nth-child(2) a {
  background:url(../img/icon-02.gif) no-repeat left center;
}
.header-box li:nth-child(3) a {
  background:url(../img/icon_001.jpg) no-repeat left center;
}
.header-box li a:hover {
  text-decoration:underline;
}
/*pc-nav部分*/
.pc-nav {
  clear:both;
}
.pc-nav li {
  width:16.66%;
  float:left;
  height:50px;
  border-right:1px solid #dbdbdb;
}
.pc-nav li:first-child {
  border-left:1px solid #dbdbdb;
}
.pc-nav li>a {
  display:block;
  height:50px;
  width:100%;
  background:url(../img/gnav_off.png) no-repeat center top;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
.pc-nav li:nth-child(2)>a {
  background:url(../img/gnav_off.png) no-repeat center -43px;
}
.pc-nav li:nth-child(3)>a {
  background:url(../img/gnav_off.png) no-repeat center -86px;
}
.pc-nav li:nth-child(4)>a {
  background:url(../img/gnav_off.png) no-repeat center -129px;
}
.pc-nav li:nth-child(5)>a {
  background:url(../img/gnav_off.png) no-repeat center -172px;
}
.pc-nav li:nth-child(6)>a {
  background:url(../img/gnav_off.png) no-repeat center -215px;
}
.pc-nav li>a:hover {
  border-bottom:3px solid #F00;
  background:url(../img/gnav_on.png) no-repeat center top;
}
.pc-nav li:nth-child(2)>a:hover {
  background:url(../img/gnav_on.png) no-repeat center -43px;
}
.pc-nav li:nth-child(3)>a:hover {
  background:url(../img/gnav_on.png) no-repeat center -86px;
}
.pc-nav li:nth-child(4)>a:hover {
  background:url(../img/gnav_on.png) no-repeat center -129px;
}
.pc-nav li:nth-child(5)>a:hover {
  background:url(../img/gnav_on.png) no-repeat center -172px;
}
.pc-nav li:nth-child(6)>a:hover {
  background:url(../img/gnav_on.png) no-repeat center -215px;
}
/*グリッド部分*/
.grid {
  overflow:hidden;
  width:940px;
  margin: 0 auto;
}
.grid>li {
  width:168px;
  height:168px;
  float:left;
  margin:10px;
  border:1px solid #dbdbdb;/*ボーダーの色は共通*/
}
.grid>li.size-2x2 {
  width:356px;
  height:356px;
}
.grid>li.size-2x1 {
  width:356px;
  height:168px;
}
.grid>li:nth-child(1) {
  background:url(../img/image_039.jpg) no-repeat center center/cover;
}
.grid>li:nth-child(2) {
  background:url(../img/image_041.jpg) no-repeat center center/cover;
}
.grid>li:nth-child(3) {
  background:url(../img/image_042.jpg) no-repeat center center/cover;
}
.grid>li:nth-child(4) {
  background:url(../img/image_036.png) no-repeat center center/cover;
}
.grid>li:nth-child(5) {
  background:url(../img/image_033.jpg) no-repeat center center/cover;
}
.grid>li:nth-child(6) {
  background:url(../img/image_043.png) no-repeat center center/cover;
}
.grid>li:nth-child(7) {
  background:url(../img/image_044.jpg) no-repeat center center/cover;
}
.grid>li:nth-child(8) {
  background:url(../img/image_018.jpg) no-repeat center center/cover;
}
.grid>li:nth-child(9) {
  background:url(../img/image_037.jpg) no-repeat center center/cover;
}
.grid>li:nth-child(10) {
  background:url(../img/image_223.png) no-repeat center center/cover;
}
.grid>li:nth-child(11) {
  background:url(../img/image_029.jpg) no-repeat center center/cover;
}
.grid>li>a {
  display:block;
  width:100%;
  height:168px;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
}
.grid>li.size-2x2>a {
  width:356px;
  height:356px;
}
.grid>li.size-2x1>a {
  width:356px;
  height:168px;
}
.grid>li:hover {
  opacity:0.7;
}






/*PCの時に見せたくないもの用のクラス*/
.sp-on {
  display:none;
}


@media screen and (max-width:959px){
/*タブレット用スタイル*/
/*グリッド部分*/
.grid {
  overflow:hidden;
  width:100%;
  margin: 0 auto;
}
.grid>li {
  width:18%;
  height:0;
  padding-bottom:18%;
  float:left;
  margin:1%;
}
.grid>li.size-2x2 {
  width:38%;
  height:0;
  padding-bottom:38%;
}
.grid>li.size-2x1 {
  width:38%;
  height:0;
  padding-bottom:18%;
}



}
@media screen and (max-width:640px){
/*SP用スタイル*/
.pc-nav {
  display:none;
}
.sp-on {
  display:block;
}

/*スマホ用ナビボタン*/
.sp-nav li {
  width:50%;
  height:44px;
  float:left;
  border-bottom:1px solid #DBDBDB;
  position:relative;
}
.sp-nav li:nth-child(odd){
  border-right:1px solid #DBDBDB;
}
.sp-nav li>a {
  display:block;
  line-height:44px;
  padding-left:13%;
  font-size:12px;
}
.sp-nav li>a:before {
  display:block;
  content:"";
  width:2px;
  height:12px;
  background:#F00;
  position:absolute;
  top:0;
  right:80%;
  bottom:0;
  left:0;
  margin:auto;
}



.grid>li {
  width:48%;
  height:0;
  padding-bottom:48%;
  float:left;
  margin:1%;
}
.grid>li.size-2x2 {
  width:98%;
  height:0;
  padding-bottom:48%;
}
.grid>li.size-2x1 {
  width:98%;
  height:0;
  padding-bottom:48%;
}
.grid>li:nth-child(1) {
  background:url(../img/image_040.jpg) no-repeat 70% center/cover;
}

}