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

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

既存サイトのトレース

<!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>
$(function(){
$('.more-btn').on('click', function(){
$(this).siblings('dl').children('dt:nth-of-type(n+4),dd:nth-of-type(n+4)').slideToggle(0);
	});
});
</script>
</head>

<body>
<ul class="gallery">
<li class="size-l"><a href="#"></a></li>
<li class="size-m"><a href="#"></a></li>
<li class="size-s"><a href="#"></a></li>
<li class="size-s"><a href="#"></a></li>
<li class="size-m"><a href="#"></a></li>
<li class="size-s"><a href="#"></a></li>
<li class="size-s"><a href="#"></a></li>
<li class="size-s"><a href="#"></a></li>
<li class="size-s"><a href="#"></a></li>
<li class="size-s"><a href="#"></a></li>
<li class="size-s sp-on"><a href="#"></a></li>
</ul>

<div class="inner">
<div class="news">
<h2>ニュースリリース</h2>
<dl>
<dt>2017年11月7日</dt>
<dd><a href="#">「キリン 氷結®ストロング 南高梅(なんこううめ)<期間限定>」新発売</a></dd>

<dt>2017年11月7日</dt>
<dd><a href="#">「ジョニーウォーカー トリプルグレーン アメリカンオーク 10年」を数量限定で発売</a></dd>

<dt>2017年11月7日</dt>
<dd><a href="#">「『キリン 午後の紅茶』学校では教えてくれないきゅん英語」</a></dd>

<dt>2017年11月2日</dt>
<dd><a href="#">キリンオンラインショップ「DRINX(ドリンクス)」「マンスリー シャトー・メルシャン」11月特別企画「シャトー・メルシャン 日本の新酒 2017 2本セット」をDRINXで数量限定発売</a></dd>

<dt>2017年11月1日</dt>
<dd><a href="#">「Tap Marché(タップ・マルシェ)」を18年春から全国へ展開</a></dd>

<dt>2017年10月31日</dt>
<dd><a href="#">「ギュギュッと搾ったサングリア」シリーズをリニューアル 初の季節限定品「ギュギュッと搾ったサングリア スプリングロゼタイム」を新発売!</a></dd>

<dt>2017年10月30日</dt>
<dd><a href="#">「木樽熟成シリーズ~樽熟FIRST CROSSING」を新発売</a></dd>
</dl>
<p class="more-btn" id="news-btn">もっと見る</p>


</div>
<div class="info">
<h2>新着情報</h2>

<dl>
<dt>2017年11月9日</dt>
<dd><a href="#">「フォアローゼズ スモールバッチ リミテッドエディション 2017」を新発売!(11月9日発売)</a></dd>

<dt>2017年11月7日</dt>
<dd><a href="#">「キリン まもるチカラのサプリ すっきりヨーグルトテイスト」をリニューアル発売!(11月7日発売)</a></dd>

<dt>2017年11月7日</dt>
<dd><a href="#">「キリン 氷結® ストロング 土佐文旦<期間限定>」を新発売!(11月7日発売)</a></dd>

<dt>2017年11月7日</dt>
<dd><a href="#">キリン食生活文化研究所 調査レポート「Vol.69 近所とのつながり」公開中!</a></dd>

<dt>2017年11月2日</dt>
<dd><a href="#">キリンビール大学 ビールをリアルに学ぼう! セミナー参加者募集中!!</a></dd>

<dt>2017年11月1日</dt><dd><a href="#">「キリンのお歳暮」サイトを公開!</a></dd>

<dt>2017年10月31日</dt><dd><a href="#">「キリン 氷結® アップルヌーヴォー<期間限定>」を新発売!(10月31日発売)</a></dd>
</dl>
<p class="more-btn" id="info-btn">もっと見る</p>
</div>
</div>

</body>
</html>

スタイルシート

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

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
  text-decoration:none;
}
/*PCレイアウト*/
/*共有パーツ*/
.inner {
  max-width:940px;
  margin:0 auto;
  overflow:hidden;
}


/*ギャラリー部分*/
.gallery {
  max-width:960px;
  margin:0 auto;
  padding:1%;
  box-sizing:border-box;
  overflow:hidden;
}
.gallery li {
  width:18%;
  height:0;
  padding-bottom:18%;
  float: left;
  margin:1%;
  border: 1px solid #bbb;
  box-sizing:border-box;
}
li.size-l {
  width:38%;
  height:0;
  padding-bottom:38%;
}
li.size-m {
  width:38%;
  height:0;
  padding-bottom:18%;
}
.gallery li:nth-child(1) {
  background: url(../img/image_900.jpg) no-repeat center/cover;
}
.gallery li:nth-child(2) {
  background: url(../img/image_902.jpg) no-repeat center/cover;
}
.gallery li:nth-child(3) {
  background: url(../img/image_754.jpg) no-repeat center/cover;
}
.gallery li:nth-child(4) {
  background: url(../img/image_777.png) no-repeat center/cover;
}
.gallery li:nth-child(5) {
  background: url(../img/image_903.jpg) no-repeat center/cover;
}
.gallery li:nth-child(6) {
  background: url(../img/image_904.png) no-repeat center/cover;
}
.gallery li:nth-child(7) {
  background: url(../img/image_905.jpg) no-repeat center/cover;
}
.gallery li:nth-child(8) {
  background: url(../img/image_223.png) no-repeat center/cover;
}
.gallery li:nth-child(9) {
  background: url(../img/image_894.jpg) no-repeat center/cover;
}
.gallery li:nth-child(10) {
  background: url(../img/image_906.jpg) no-repeat center/cover;
}
.gallery li:nth-child(11) {
  background: url(../img/image_896.png) no-repeat center/cover;
}
.gallery li.sp-on {
  display:none;
}

/*ニュースリリース部分*/
.news {
  width:48%;
  float:left;
  padding-left:1%;
  box-sizing:border-box;
}
.info {
  width:48%;
  float:right;
  padding-left:1%;
  box-sizing:border-box;
}
.news h2, .info h2 {
  font-size:18px;
  font-weight:bold;
  margin-bottom:40px;
}
.news dt, .info dt {
  font-size:11px;
  float:left;
  width:30%;
  padding-top:15px;
  line-height:1.4;
  margin-bottom:10px;
}
.news dd, .info dd {
  font-size:12px;
  padding-left:30%;
  padding-top:15px;
  box-sizing:border-box;
  line-height:1.4;
  margin-bottom:10px;
  border-top: 1px solid #BBB;
}
.news dd:nth-of-type(1), .info dd:nth-of-type(1) {
  border-top: 2px solid #BBB;
}
.inner dd a {
  display:block;
  position:relative;
}
.inner dd a:hover {
  text-decoration:underline;
}
.inner dd a:before {
  display:block;
  content:"";
  width:11px;
  height:11px;
  background:url(../img/redarrow.gif) no-repeat center/cover;
  position:absolute;
  top:0;
  left:-20px;
}
.more-btn {
  display:none;
}
/*タブレットレイアウトーーーーーーーーーーーーーーー*/
@media screen and (max-width:960px) {
  
/*ニュースリリース部分*/
.news {
  width:98%;
  margin:0 auto;
  float:none;
  padding-left:1%;
  box-sizing:border-box;
}
.info {
  width:98%;
  margin:0 auto;
  float:none;
  padding-left:1%;
  box-sizing:border-box;
}
}

/*スマホレイアウトーーーーーーーーーーー*/
@media screen and (max-width:640px) {

/*ギャラリー部分*/
.gallery {
  max-width:960px;
  margin:0 auto;
  padding:1%;
  box-sizing:border-box;
  overflow:hidden;
}
.gallery li {
  width:48%;
  height:0;
  padding-bottom:48%;
  float: left;
  margin:1%;
  border: 1px solid #bbb;
  box-sizing:border-box;
}
li.size-l {
  width:98%;
  height:0;
  padding-bottom:48%;
}
li.size-m {
  width:98%;
  height:0;
  padding-bottom:48%;
}
.gallery li:nth-child(1) {
  background: url(../img/image_901.jpg) no-repeat center/cover;
}
.gallery li.sp-on {
  display:block;
}

/*ニュースリリース部分*/
.news dt, .info dt {
  font-size:11px;
  float:none;
  width:30%;
  padding-top:15px;
  line-height:1.4;
  margin-bottom:10px;
}
.news dd, .info dd {
  font-size:12px;
  padding-left:20px;
  padding-top:0;
  padding-bottom:20px;
  box-sizing:border-box;
  line-height:1.4;
  margin-bottom:10px;
  border-top:none;
  border-bottom:1px solid #BBB;
}
.news dd:nth-of-type(1), .info dd:nth-of-type(1) {
  border-top:none;
}
.inner dd a:before {
  display:block;
  content:"";
  width:11px;
  height:11px;
  background:url(../img/redarrow.gif) no-repeat center/cover;
  position:absolute;
  top:0;
  left:-20px;
}

/*スマホ時は上3つ以外を非表示*/
.news dt:nth-of-type(n+4), .info dt:nth-of-type(n+4),
.news dd:nth-of-type(n+4), .info dd:nth-of-type(n+4)  {
  display:none;
}
.more-btn {
  display:block;
  width:80%;
  margin: 20px auto;
  height:40px;
  border:1px solid #BBB;
  text-align:center;
  font-size:14px;
  line-height:40px;
  cursor:pointer;
}

}












Bパターン

$(function(){
	$('#news-btn').on('click', function(){
	$('.news dt:nth-of-type(n+4), .news dd:nth-of-type(n+4)').slideToggle(0);
	});
	$('#info-btn').on('click', function(){
	$('.info dt:nth-of-type(n+4), .info dd:nth-of-type(n+4)').slideToggle(0);
	});
});