jQuery：メディアクエリ：楽しいおかず２ - Webデザインのこと、いろいろ

★レイアウトはかわらず、固定のまま

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>楽しいおかず</title>
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/>
<!--レスポンシブの時必要。
　みた機械によってレイアウトが変わりますよ。-->
<link rel="stylesheet" href="css/okazu01.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	var topBtn = $('#bottom');    
    topBtn.hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>
</head>

<body id="top">
<!--------------------------->
<div id="container">
<div class="column">
<header>
<h1><img src="img/logo01.png" alt="#"></h1>
<nav>
<ul>
<li><a href="#"><img src="img/nav01_01.png" alt="#"></a></li>
<li><a href="#"><img src="img/nav02_01.png" alt="#"></a></li>
<li><a href="#"><img src="img/nav03_01.png" alt="#"></a></li>
<li><a href="#"><img src="img/nav04_01.png" alt="#"></a></li>
</ul>
</nav>
</header>
<ul><li><img src="img/ph01_l.jpg" alt="#"></li></ul>
<ul>
<li><img src="img/ph02_mt.jpg" alt="#"></li>
<li><img src="img/ph03_s.jpg" alt="#"></li>
<li><img src="img/ph04_s.jpg" alt="#"></li>
</ul>
<ul>
<li><img src="img/ph05_my.jpg" alt="#"></li>
<li><img src="img/ph06_s.jpg" alt="#"></li>
<li><img src="img/ph07_s.jpg" alt="#"></li>
</ul>
</div>
<!--------------------------->
<div class="column">
<ul>
<li><img src="img/ph08_my.jpg" alt="#"></li>
<li><img src="img/ph09_s.jpg" alt="#"></li>
<li><img src="img/ph10_s.jpg" alt="#"></li>
</ul>
<ul><li><img src="img/ph11_l.jpg" alt="#"></li></ul>
<ul>
<li><img src="img/ph12_s.jpg" alt="#"></li>
<li class="right"><img src="img/ph13_mt.jpg" alt="#"></li>
<li><img src="img/ph14_s.jpg" alt="#"></li>
</ul>
<ul><li><img src="img/ph15_l.jpg" alt="#"></li></ul>
<ul>
<li><img src="img/ph16_s.jpg" alt="#"></li>
<li><img src="img/ph17_s.jpg" alt="#"></li>
<li><img src="img/ph18_my.jpg" alt="#"></li>
</ul>
</div>
<!--------------------------->
<div class="column three">
<ul><li><img src="img/ph19_l.jpg" alt="#"></li></ul>
<ul>
<li><img src="img/ph20_s.jpg" alt="#"></li>
<li class="right"><img src="img/ph21_mt.jpg" alt="#"></li>
<li><img src="img/ph22_s.jpg" alt="#"></li>
</ul>
<ul>
<li><img src="img/ph23_s.jpg" alt="#"></li>
<li><img src="img/ph24_s.jpg" alt="#"></li>
<li><img src="img/ph25_my.jpg" alt="#"></li>
</ul>
<ul>
<li><img src="img/ph26_s.jpg" alt="#"></li>
<li><img src="img/ph27_s.jpg" alt="#"></li>
<li><img src="img/ph28_s.jpg" alt="#"></li>
<li><img src="img/ph29_s.jpg" alt="#"></li>
</ul>
<ul><li><img src="img/ph30_l.jpg" alt="#"></li></ul>
<!--------------------------->
<!--SP（スマホ）用は、箱型で表示したいのでcontainerの内側-->
<footer id="sp">
<p><small>Copyright &copy; 2015 ○○○ <br>All Rights Reserved.</small></p>
</footer>
</div>
<!--------------------------->
<p><a id="bottom" href="#top"></a></p>
<!--------------------------->
</div><!--#container-->

<!--PC用は、幅いっぱいに表示したいので、containerの外側-->
<footer id="pc">
<p><small>Copyright &copy; 2015 ○○○ All Rights Reserved.</small></p>
</footer>

</body>
</html>

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

/*=====reset=====*/
html,body,h1,ul,li {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
ul { list-style: none; }	
a { text-decoration: none; }
body {
	font-size: 16px;
	background: #281605;
	}
img {
	border: none;
	vertical-align: bottom;
	}
/*// // // // / reset / // // // // //*/
#container {
	width: 960px;
	margin: 10px auto;
	padding: 10px;
	overflow: hidden;
	background: #FFF;
}
.column {
	width: 320px;
	float: left;
}
header {
	width: 320px;
	overflow: hidden;
}
h1 {
	margin: 10px;
}
ul {
	width: 320px;
	overflow: hidden;
}
li {
	margin: 10px;
	float: left;
}
/*縦長の画像だけfloat: right;  を指定する*/
.right {
	float: right;
	}
/*// // // // // // // // // //*/ 
footer#pc p{
	width: 100%;
	line-height: 2em;
	color: #FFF;
	text-align: center;
	background: #281605;
}
footer#sp {
	display: none;
}

/*TOPに戻るボタン*/
a#bottom {
  position: fixed;
  bottom: 65px;
  right: 5%;
  z-index: 9999;
  width: 100px;
  height: 100px;
  display: block;
  background: url(../img/arrow.png);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0.6;
}
a#bottom:hover {
  opacity: 0.8;
}
/*===レスポンシブ対応  (タブレット)===*/
/*PC用の必要部分をコピーして、pxを設定してある部分だけ残して、％指定する*/
@media screen and (max-width: 959px){
#container {
	width: 98%;  /*960px ÷ 980px = 0.98 x 100 = 98 =98%*/
	margin: 0 auto;
	padding: 1%;  /*100% ÷ 98% ( widthの幅 ) = 2% */
}
.column {
	width: 33.3%;  /*3つある.columnを３等分した%幅*/
}
header {
	width: 100%; /* 親要素の.columnの幅の中で何%で表示したいか*/
}
h1 {
	width: 93.75%; /*header幅100%に対し両方のマージン分の6.25％を引いた値*/
	margin: 3.125%;  /*10px ÷ 320px(親要素のheaderの幅) x 100*/
}
ul {
	width: 100%;
}
li {
	margin: 3.125%;  /*10px ÷ 320px x 100*/
}
.size-2x2 {
	width: 93.75%;  /*300px ÷ 320px x 100*/
}
.size-2x1 {
	width: 93.75%;  /*300px ÷ 320px x 100*/
}
.size-1x2 {
	width: 43.75%;
}
.size-1x1 {
	width: 43.75%;
}
img {
	max-width: 100%;  /*フルードイメージの時必ず必要*/
}
/*===レスポンシブ対応  (スマホ)===*/
@media screen and (max-width: 640px){

}