46日目　メディアクエリ　レスポンシブ対応基本　jQueryプラグイン-fancybox-

レスポンシブ基本

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>メディアクエリ</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<header></header>
<nav></nav>
<div id="wrapper">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<footer></footer>
</div>
</body>
</html>

スマホになったらカラム落ち
paddingなしバージョン
http://tototo.webcrow.jp/BlogUp/RWD/1/index.html

[css]

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

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

body {
  background: #999;
}

#container {
  width: 1000px;
  margin: 0 auto;
}

header {
  height: 300px;
  background: #CCF;
}

nav {
  height: 50px;
  background: #99F;
}
#wrapper {
  overflow: hidden;
}

#content {
  width: 700px;
  height: 400px;
  float: right;
  background: #F9F;
}

#sidebar {
  width: 300px;
  height: 400px;
  float: left;
  background: #FF9;
}

footer {
  height: 50px;
  background: #9C9;
}

@media screen and (max-width: 999px) {
#container {
  width: 100%;
}

#content {
  width: 70%;  /*700px÷1000px × 100*/
}

#sidebar {
  width: 30%;
}

}

@media screen and (max-width: 767px) {
#content {
  float: none;
  width: 100%;
}

#sidebar {
  float: none;
  width: 100%;
}
}

paddingが入るバージョン

http://tototo.webcrow.jp/BlogUp/RWD/2/index.html

[css]


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

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

body {
  background: #999;
}

#container {
  width: 980px;
  margin: 0 auto;
  padding: 10px;
  background: #FFF;
}

header {
  height: 300px;
  background: #CCF;
  margin-bottom: 10px;
}

nav {
  height: 50px;
  background: #99F;
  margin-bottom: 10px;
}
#wrapper {
  overflow: hidden;
  margin-bottom: 10px;
}

#content {
  width: 700px;
  height: 400px;
  float: right;
  background: #F9F;
}

#sidebar {
  width: 270px;
  height: 400px;
  float: left;
  background: #FF9;
}

footer {
  height: 50px;
  background: #9C9;
}

@media screen and (max-width: 999px) {

#container {
  width: 98%;
  padding: 1%;
}

header {
  margin-bottom: 1%;  /*親要素の横幅に対して何％か*/
}

nav {
  margin-bottom: 1%;
}

#wrapper {
  margin-bottom: 1%;
}

#content {
  width: 70%;
}

#sidebar {
  width: 29%;
}

}

@media screen and (max-width: 767px) {
#content {
  float: none;
  width: 100%;
  margin-bottom: 1%;
}

#sidebar {
  float: none;
  width: 100%;

}
}

jQuery プラグイン-fancybox-
iframeでYoutubeとGooglemapをリンクする

iframeはモーダルに作ったHTMLを表示できる

http://tototo.webcrow.jp/BlogUp/fancybox/index.html

[html]


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>fancybox</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>  <!--youtube等用-->
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<script>
$(document).ready(function() {
	$(".fancybox").fancybox({
		openEffect	: 'none',
		closeEffect	: 'none',
		maxWidth	: 600,  //ifreamの表示サイズ
		maxHeight	: 400,
	});
});
$(document).ready(function() {
	$(".various").fancybox({
		maxWidth	: 600,  //ifreamの表示サイズ
		maxHeight	: 400,
		fitToView	: false,
/*		width		: '70%',  表示サイズを合わせるためコメントアウト
	height		: '70%',*/
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});
</script>
</head>

<body>
<div id="container">
<ul>
<li><a class="fancybox" data-fancybox-group="gallery1" href="img/01.png"><img src="img/01s.png" alt="#"></a></li>
<li><a class="fancybox" data-fancybox-group="gallery1" href="img/02.png"><img src="img/02s.png" alt="#"></a></li>
<li><a class="fancybox" data-fancybox-group="gallery1" href="img/03.png"><img src="img/03s.png" alt="#"></a></li>
<li><a class="various fancybox.iframe fancybox" data-fancybox-group="gallery1" href="https://www.youtube.com/embed/s-12VKsabgs"><img src="img/04s.png" alt="#"></a></li>

<li><a class="various fancybox.iframe fancybox" data-fancybox-group="gallery1" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.073881070285!2d139.71327906478854!3d35.724401485211544!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d6bea154935%3A0x66e848601ad02eec!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yT5LiB55uu77yR77yYIO-8s--8qO-8qe-8re-8oeODk-ODqw!5e0!3m2!1sja!2sjp!4v1459242036250"><img src="img/05s.png" alt="#"></a></li>

<li><a class="various fancybox" data-fancybox-type="iframe" href="../../0325/okazu/index.html"><img src="img/01s.png" alt="#"></a></li>
</ul>
</div>
</body>
</html>

[css]

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

ul {
  width: 960px;
  overflow: hidden;
  margin: 50px auto;
}

li {
  float: left;
  margin: 10px;
}