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">
<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>
<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>
<header>
<h1>とある会社のロゴ</h1>
<nav class="sp-off">
<ul class="gnav">
<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>
</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_246.jpg" alt="" /></a></li>
<li><a href="#3"><img src="img/mainvis_247.jpg" alt="" /></a></li>
<li><a href="#4"><img src="img/mainvis_248.jpg" alt="" /></a></li>
</ul>
</div><!--/.wideslider-->

<nav class="sp-on">
<ul class="gnav-sp">
<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="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">
<div class="news-inner">
<h2>ニュースリリース</h2>
<p class="rss"><a href="#">RSS</a></p>
<p class="about-rss"><a href="#">RSSについて</a></p>
</div>
<p class="news-list"><a href="#">一覧へ</a></p>





<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;
}
/*PC時には表示*/
.sp-off {
  display:block;
}

/*ヘッダー周り*/
header {
  width:960px;
  margin:0 auto;
  padding-top:20px;
}
h1 {
  width:103px;
  height:26px;
  background: url(../img/head_logo_001_sp.jpg) no-repeat center/contain;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  margin-bottom:20px;
}
nav {
  width:100%;
  height:50px;
}
.gnav {
  overflow:hidden;
}
.gnav li {
  width:16.66%;
  height:50px;
  float:left;
  position:relative;
}
.gnav li a {
  display:block;
  height:50px;
  box-sizing:border-box;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  background:url(../img/gnav-off-felica.png) no-repeat center top;
}
.gnav li:nth-child(2) a {
  background:url(../img/gnav-off-felica.png) no-repeat center -50px;
}
.gnav li:nth-child(3) a {
  background:url(../img/gnav-off-felica.png) no-repeat center -100px;
}
.gnav li:nth-child(4) a {
  background:url(../img/gnav-off-felica.png) no-repeat center -150px;
}
.gnav li:nth-child(5) a {
  background:url(../img/gnav-off-felica.png) no-repeat center -200px;
}
.gnav li:nth-child(6) a {
  background:url(../img/gnav-off-felica.png) no-repeat center -250px;
}

/*ホバー部分*/
.gnav li a:hover {
  border-bottom:3px solid #F00;
  background: url(../img/gnav-on-felica.png) no-repeat center top;
}
.gnav li:nth-child(2) a:hover {
  background:url(../img/gnav-on-felica.png) no-repeat center -50px;
}
.gnav li:nth-child(3) a:hover {
  background:url(../img/gnav-on-felica.png) no-repeat center -100px;
}
.gnav li:nth-child(4) a:hover {
  background:url(../img/gnav-on-felica.png) no-repeat center -150px;
}
.gnav li:nth-child(5) a:hover {
  background:url(../img/gnav-on-felica.png) no-repeat center -200px;
}
.gnav li:nth-child(6) a:hover {
  background:url(../img/gnav-on-felica.png) no-repeat center -250px;
}
.gnav li:before {
  display:block;
  content:"";
  width:1px;
  height:30px;
  background:#bbb;
  position:absolute;
  top:0;
  left:0;
}
.gnav li:last-child:after {
  display:block;
  content:"";
  width:1px;
  height:30px;
  background:#bbb;
  position:absolute;
  top:0;
  right:0;
}






/*ギャラリー部分*/
.gallery {
  max-width:960px;
  margin:0 auto 60px;
  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;
}
.sp-on {
  display:none;
}

/*ニュースリリース部分*/
.news {
  width:48%;
  float:left;
  padding-left:1%;
  box-sizing:border-box;
}
.news-inner {
  width:85%;
  float:left;
}
.news-inner p {
  width:25%;
  float:left;
  font-size:12px;
}
.rss a {
  display:block;
  padding-left:18%;
  background:url(../img/rss.png) no-repeat;
  color:#222;
}
.about-rss a {
  display:block;
  padding-left:15%;
  background:url(../img/icon_001.jpg) no-repeat;
  color:#222;
}
.news-list {
  width:14%;
  float:right;
  font-size:12px;
}
.news-list a {
  display:block;
  padding-left:12px;
  background:url(../img/redarrow.gif) no-repeat;
  color:#222;
}
.info {
  width:48%;
  float:right;
  padding-left:1%;
  box-sizing:border-box;
}

.news h2, .info h2 {
  font-size:18px;
  width:50%;
  font-weight:bold;
  margin-bottom:10px;
  float:left;
}
dl {
  clear:both;
}
.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) {
/*ヘッダー周り*/
header {
  width:100%;
}
.gnav li a {
  background:url(../img/gnav-off-felica-641.png) no-repeat center top;
}
.gnav li:nth-child(2) a {
  background:url(../img/gnav-off-felica-641.png) no-repeat center -50px;
}
.gnav li:nth-child(3) a {
  background:url(../img/gnav-off-felica-641.png) no-repeat center -100px;
}
.gnav li:nth-child(4) a {
  background:url(../img/gnav-off-felica-641.png) no-repeat center -150px;
}
.gnav li:nth-child(5) a {
  background:url(../img/gnav-off-felica-641.png) no-repeat center -200px;
}
.gnav li:nth-child(6) a {
  background:url(../img/gnav-off-felica-641.png) no-repeat center -250px;
}
/*ホバー部分*/
.gnav li a:hover {
  background: url(../img/gnav-on-felica-641.png) no-repeat center top;
}
.gnav li:nth-child(2) a:hover {
  background:url(../img/gnav-on-felica-641.png) no-repeat center -50px;
}
.gnav li:nth-child(3) a:hover {
  background:url(../img/gnav-on-felica-641.png) no-repeat center -100px;
}
.gnav li:nth-child(4) a:hover {
  background:url(../img/gnav-on-felica-641.png) no-repeat center -150px;
}
.gnav li:nth-child(5) a:hover {
  background:url(../img/gnav-on-felica-641.png) no-repeat center -200px;
}
.gnav li:nth-child(6) a:hover {
  background:url(../img/gnav-on-felica-641.png) no-repeat center -250px;
}





/*ニュースリリース部分*/
.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) {
/*スマホ時には非表示*/
.sp-off {
  display:none;
}
nav.sp-on {
  display:block;
  width:100%;
  height:120px;
}
.gnav-sp {
  overflow:hidden;
  margin-bottom:20px;
}
.gnav-sp li {
  width:50%;
  height:40px;
  float:left;
  position:relative;
}
.gnav-sp li a {
  display:block;
  font-size:13px;
  line-height:39px;
  padding-left:40px;
  color:#222;
  border-bottom:1px solid #999;
}
.gnav-sp li:nth-child(odd) a {
  border-right:1px solid #999;
}
.gnav-sp li:before {
  display:block;
  content:"";
  width:3px;
  height:14px;
  background:#FF0000;
  position:absolute;
  top:-2px;
  right:77%;
  bottom:0;
  left:0;
  margin:auto;
}

/*ギャラリー部分*/
.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;
}

}

header部分の制作

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

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


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

広告を非表示にする

htmlspecialcharsとENT_QUOTESの設定

特殊文字をブラウザで文字列として表示させるには htmlspecialchars 関数を使用します。これを使用すると、各文字列が <、>、&、" に変換されて返されます。
さらに続けて ENT_QUOTES と書くと、' (シングルクォート)も ' に変換されて返されます。

この処理は、訪問者から送信されたデータを表示する際には必ず行うようにしてください。もしこの処理を忘れると、フォームから送信する際に入力されたHTMLやJavaScriptをそのまま解釈してしまいます。
もし悪意あるJavaScriptが埋め込まれると訪問者全員に影響を与えてしまうため、それを防ぐためにも htmlspecialchars で安全な文字列に変換します。



以前の記述

$name = $_POST["namae"];

htmlspecialchars 関数を指定した場合

$name = htmlspecialchars($_POST["namae"], ENT_QUOTES);

PHP: htmlspecialchars - Manual

PHP演習問題

問1

現在の年月日・時刻をPHPで記述し、ブラウザに表示させなさい。その際に曜日も一緒に表示させなさい。

問2

数字「1」から「10」までの数字を、ブラウザにランダムに表示させなさい

問3

九九の表をPHPで繰り返し文で記述し、ブラウザに表示させなさい


問4

「input.php」に「名前」と「年齢」を記入し、その値を「POST」で取得して「output.php」に表示させなさい


問5

問4の「input.php」に複数選択可のチェックボックスを追加し、その値を「POST」で取得して「output.php」に表示させなさい
(設問は自由)



問6

「input」ファイルの入力フィールドに入力された金額の、消費税合算後の金額を「output」ファイルに表示させなさい。


問7

登録済みの英語を日本語に変換する入力フォームを作りなさい。登録する単語は「apple,banana,orange,strawberry」それ以外は「その単語は登録されていません」と表示されるようにする。

広告を非表示にする

既存サイトのトレース

<!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);
	});
});