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

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

レスポンシブに対応したアコーディオンパネル

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブでのパネルとimg要素のサイズ</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(){
$(window).on('load resize', function(){
	  if($(window).innerWidth() < 768 ){//SPのみで動作されるように
	$('.panel:not(:first)').hide();//最初の.panel以外をhide
	$('.btn').on('touchstart',function(){
		$(this).next('.panel:not(:animated)').slideToggle().siblings('.panel').slideUp();
		$(this).toggleClass('active').siblings('.btn').removeClass('active');
	});
	}else{
		$('.panel').show();
		$('.btn').removeClass('active');
	};
});
});
</script>
</head>

<body>
<h1>アコーディオンパネル</h1>
<div class="content">
<h2 class="btn">グループ1</h2>
<ul class="panel">
<li><img src="https://placehold.jp/3d4070/ffffff/300x260.png" alt=""></li>
<li><img src="https://placehold.jp/3d4070/ffffff/300x260.png" alt=""></li>
<li><img src="https://placehold.jp/3d4070/ffffff/300x260.png" alt=""></li>
</ul>

<h2 class="btn">グループ2</h2>
<ul class="panel">
<li><img src="https://placehold.jp/e0369c/ffffff/300x260.png" alt=""></li>
<li><img src="https://placehold.jp/e0369c/ffffff/300x260.png" alt=""></li>
<li><img src="https://placehold.jp/e0369c/ffffff/300x260.png" alt=""></li>
</ul>

<h2 class="btn">グループ3</h2>
<ul class="panel">
<li><img src="https://placehold.jp/49e036/ffffff/300x260.png" alt=""></li>
<li><img src="https://placehold.jp/49e036/ffffff/300x260.png" alt=""></li>
<li><img src="https://placehold.jp/49e036/ffffff/300x260.png" alt=""></li>
</ul>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */

html,body,h1,h2,p,ul,li {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
ul {
  list-style:none;
}
img {
  vertical-align:bottom;
}

/*PCレイアウト*/
h1 {
  text-align:center;
  padding:40px 0;
}
.content {
  max-width:930px;
  margin:0 auto;
  padding:0 5px;
  box-sizing:border-box;
}
h2 {
  width:50%;
  margin:20px auto;
color:#777;
text-align: center;
padding: 0.25em;
border: solid 2px #777;
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
ul {
  overflow:hidden;
  margin-bottom:100px;
}
li {
  width:calc((100% - 30px) / 3);
  float:left;
  margin:5px;
}
li img {
  max-width:100%;
}
@media screen and (max-width:929px){
}

@media screen and (max-width:767px){
h2 {
  width:98%;
  margin:20px auto;
  color:#777;
  text-align: center;
  padding: 0.5em;
}
h2.active {
  background:#555;
  color:#FFF;
  
}
li {
  width:300px;
  float:none;
  margin:5px auto;
}
li img {
  max-width:100%;
}
}