読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

借景デザイン

借景

f:id:yachin29:20091204112332j:plain


今回はCSS3の「background: rgba()」を使い、ヘッダー要素などの背景色を透明にする事で、その後ろにある背景画像が見えるようになります。
ヘッダーに画像を使う事無く、bodyやcontainerの背景画像を表示させる事が出来ます。



参考サイト

f:id:yachin29:20150528114944p:plain
一般財団法人ユナイテッド・スポーツ・ファウンデーション(USF)



デモページ

http://yachin29.hotcom-web.com/css3-bg/bg.html

f:id:yachin29:20150528123113p:plain

index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="font.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	$('a[href^=#]').click(function(){
		var speed = 400;
		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>
<div id="container">
<header>
<h1>Old Course,<br> St Andrews Links</h1>
<p class="view"><a href="#map">VIEW MAP </a></p>
</header>
<div id="content">
<ul>
<li class="size-1x1"><a href="#"></a></li>
<li class="size-1x1"><a href="#"></a></li>
<li class="size-1x1"><a href="#"></a></li>
<li class="size-1x1"><a href="#"></a></li>
<li class="size-2x2"><a href="#"></a></li>
<li class="size-2x1"><a href="#"></a></li>
<li class="size-1x1"><a href="#"></a></li>
<li class="size-1x1"><a href="#"></a></li>
</ul>
</div>
<footer>
<p><small>Copyright &copy; 2015 ○○○ Inc. All Rights Reserved.</small></p>
</footer>
</div>
</body>
</html>
style.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: 'Didactic';
}
h1, h2, h3, h4, h5, h6, p, li {font-weight: normal;  text-rendering: geometricPrecision;
    font-variant-ligatures: common-ligatures;
  font-variant-ligatures: discretionary-ligatures;
  -moz-font-feature-settings: "salt", "liga";
  -ms-font-feature-settings:  "salt", "liga";
  -webkit-font-feature-settings:  "salt", "liga";
  font-feature-settings: "salt", "liga";}
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-image: url(bg.png);

  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
  /* 画像を繰り返し表示しない */
  background-repeat: no-repeat;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #464646;
  
}

header {
  width: 930px;
  height: 400px;
  margin: 30px auto 15px;
  background: rgba(0, 0, 0, 0.3);
  border: 10px solid #FFF;
  border-radius: 10px;
  box-sizing: border-box;
}
h1 {
  text-align: center;
  padding: 30px 0 10px;
  font-size:80px;
  color: #FFF;
}
.view{
  width:30%;
  margin: 50px auto 0;
}

.view a {
  text-align: center;
  display: block;
  line-height: 60px;
  height:60px;
 position: relative;
	z-index: 2;
	background-color: #333;
	border: 2px solid #333;
	color: #fff;
  box-sizing: border-box;
	transition: 0.3s ease-in-out;
}
.view a:hover{
	background-color: #fff;
	border-color: #59b1eb;
	color: #59b1eb;
}
.view a::before, .view a::after {
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #333;
}
.view a::before {
	top: 0;
}
.viewa::after {
	bottom: 0;
}
.view a:hover::before, .view a:hover::after {
	height: 0;
	background-color: #59b1eb;
}
#content {
  width: 100%;
  height: 800px;

}
ul {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
  }
li {
  margin: 15px;
  background: #FFF;
  float: left;
}
.size-1x1 {
  width: 210px;
  height: 210px;
}
.size-2x1 {
  width: 450px;
  height: 210px;
}
.size-2x2 {
  width: 450px;
  height: 450px;
}
footer {
  width: 100%;
  background: rgba(255, 255, 255,1);
}
footer p {
  font-size: 24px;
  text-align: center;
  padding: 40px 0;
}
広告を非表示にする