header部分の制作 - WEBサイト制作の勉強

以前、既存のサイトをモデルにしてレスポンシブサイトを制作し、jQueryのプラグインを使いトップにスライダーを導入しましたが、モデルサイトに最も近い形のスライドショーを導入したパターンが今回のやつです。

今回のスライドショーの主なポイント

ブラウザー幅一杯にスライドを表示させる
左右の画像は半透明のブラーがかかっている
レスポンシブサイトなので、フリックにも対応

レスポンシブ対応サイト制作wideslider版
black-flag.net

<!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>
</div>
</header>
<div class="wideslider">
<ul>
<li><a href="#1"><img src="img/mainvis_233.jpg" alt="" /></a></li>
<li><a href="#2"><img src="img/mainvis_250.jpg" alt="" /></a></li>
<li><a href="#3"><img src="img/mainvis_252.png" alt="" /></a></li>
<li><a href="#4"><img src="img/mainvis_248.jpg" alt="" /></a></li>
</ul>
</div><!--/.wideslider-->
<ul class="gallery">
<li class="size2x2"><a href="#"></a></li>
<li class="size2x1"><a href="#"></a></li>
<li class="size1x1"><a href="#"></a></li>
<li class="size1x1"><a href="#"></a></li>
<li class="size2x1"><a href="#"></a></li>
<li class="size1x1"><a href="#"></a></li>
<li class="size1x1"><a href="#"></a></li>
<li class="size1x1"><a href="#"></a></li>
<li class="size1x1"><a href="#"></a></li>
<li class="size1x1"><a href="#"></a></li>
<li class="size1x1 sp-on"><a href="#"></a></li>
</ul>
</body>
</html>

スタイルシート

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

html,body,h1,h2,h3,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  vertical-align: bottom;
}

/*PCレイアウト*/


/*ヘッダー部分*/
header {
  padding:16px 0;
  box-sizing:border-box;
}
h1 {
  width:103px;
  background:url(../img/head_logo_001.jpg) no-repeat center/contain;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  
}


/*ギャラリー部分*/
.gallery {
  max-width:960px;
  padding:1%;
  box-sizing:border-box;
  margin:0 auto;
  overflow:hidden;
}
.gallery li {
  width:18%;
  height:0;
  padding-bottom:18%;
  float:left;
  margin:1%;
  border:1px solid #DCDCDC;
  box-sizing:border-box;
}
.gallery li.size2x2 {
  width:37.9%;
  height:0;
  padding-bottom:37.9%;
}
.gallery li.size2x1 {
  width:38%;
  height:0;
  padding-bottom:18%;
}

.gallery li a {
  display:block;
  width:100%;
  height:0;
  padding-bottom:100%;
}
.gallery li.size2x1 a {
  padding-bottom:49%;
}
.gallery li:nth-child(1) a {
  background:url(../img/image_928.jpg) no-repeat center/cover;
}
.gallery li:nth-child(2) a {
  background:url(../img/image_925.jpg) no-repeat center/cover;
}
.gallery li:nth-child(3) a {
  background:url(../img/image_930.jpg) no-repeat center/cover;
}
.gallery li:nth-child(4) a {
  background:url(../img/image_838.jpg) no-repeat center/cover;
}
.gallery li:nth-child(5) a {
  background:url(../img/image_728.png) no-repeat center/cover;
}
.gallery li:nth-child(6) a {
  background:url(../img/image_821.jpg) no-repeat center/cover;
}
.gallery li:nth-child(7) a {
  background:url(../img/image_894.jpg) no-repeat center/cover;
}
.gallery li:nth-child(8) a {
  background:url(../img/image_669.png) no-repeat center/cover;
}
.gallery li:nth-child(9) a {
  background:url(../img/image_927.jpg) no-repeat center/cover;
}
.gallery li:nth-child(10) a {
  background:url(../img/image_824.jpg) no-repeat center/cover;
}
.gallery li:nth-child(11) a {
  background:url(../img/image_912.png) no-repeat center/cover;
}




/*共有パーツ*/
.inner {
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
.sp-on {
  display:none;
}
@media screen and (max-width:640px) {
.gallery li {
  width:48%;
  height:0;
  padding-bottom:48%;
}
.gallery li.size2x2 {
  width:98%;
  height:0;
  padding-bottom:48%;
}
.gallery li.size2x1 {
  width:98%;
  height:0;
  padding-bottom:48%;
}
.gallery li.size2x2 a {
  width:98%;
  height:0;
  padding-bottom:48%;
}

.gallery li:nth-child(1) a {
  background:url(../img/image_929.jpg) no-repeat center/cover;
}
.sp-on {
  display:block;
}

}