WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

背景画像を固定/スムーススクロールでTOPに戻る

f:id:mmmmofu:20150627012713p:plain

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景画像を固定</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(function(){
	  var topBtn = $('#to-top');
		topBtn.hide();
		//スクロールが100pxに達したらボタン表示
		$(window).scroll(function(){
			  if($(this).scrollTop() > 100) {
					topBtn.fadeIn();
			  }else{
					topBtn.fadeOut();
				}
		});
	$('a[href^=#]').click(function(){
		var speed = 200;
		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>
<body id="top">
<div id="container">
<div id="header">
<h1>背景画像を固定</h1>
</div><!-- /#header -->
<div id="content">
<div class="box"></div>
<div class="box"></div>
<div class="box right"></div>
<div class="box size-2">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12955.616087273338!2d139.71540923553763!3d35.7285789028028!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d6effe1fcd9%3A0x9a47103b0fa5f77!2z44K144Oz44K344Oj44Kk44Oz44K344OG44Kj!5e0!3m2!1sja!2sjp!4v1434014622494" width="636" height="312" frameborder="0" style="border:0"></iframe>
</div>
<div class="box right"></div>
</div><!-- /#content -->
</div><!-- /#container -->
<p id="to-top"><a href="#top">トップに戻る</a></p>
</body>
</html>

CSS

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

html,body,div,p,ul,li,h1 {
  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;
}
img {
  boder: none;
}
body {
	background-image: url(../img/bg.png);
	background-position: center center;
	background-repeat: no-repeat;
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
	/* 表示するbody(ブラウザ)の大きさに基づいて、背景画像を調整 */
	background-size: cover;
	/*背景画像が読み込まれる前に表示される背景のカラー*/
	background-color: #464646;
}
#container {
	width: 960px;
	height: 1000px;
	margin: 0 auto;
	padding-top: 20px;
}
#header {
	width: 960px;
	height: 300px;
	background-color: rgba(255,255,255,0.5);
	border: 10px solid #FFF;
	border-radius: 10px;
	/* ボーダーを内側に入れる */
	box-sizing: border-box;
}
h1 {
	text-align: center;
	margin-top: 40px;
	font-size: 44px;
}
#content {
	overflow: hidden;
}
.box {
	width: 312px;
	height: 312px;
	margin-right: 12px;
	background: rgba(255,255,255,0.8);
	float: left;
	margin-top: 12px;
}
.right {
	margin-right: 0;
}
.size-2 {
	width: 636px;
}
#to-top {
  position: fixed;
	bottom: 20px;
	right: 20px;
	background: url(../img/btn.png);	
}
#to-top a{
	display: block;
	width: 100px;
	height: 100px;
	/*text-indent: -9999px;*/
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

googleマップの埋め込み方

f:id:mmmmofu:20150627013441p:plain
歯車のマーク

地図を共有または埋め込む

地図を埋め込む

コピーして貼り付ける

レイアウトに合わせてwidthとheightを変える