webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

ヒーローヘッダーを使ったサイト制作

f:id:yachin29:20170209004414j:plain






最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。
「ヒーローヘッダー」と呼ばれています。

ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。

2014年頃から海外のウェブデザインにてトレンド的にかなり増えてきている手法です。
巨大な画像により、イメージを強く植えつけることができる反面、写真のクオリティ次第でウェブサイト全体の印象を悪くすることも有りますので、フラットデザイン同様簡単そうでデザインセンスの問われるデザイン要素となっています。


参考サイト
http://racines-park.com/



ferret-plus.com


こういったレイアウトを作る際の1番のポイントは、用意する画像の大きさです。
自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れてしまっていたり、逆に余白が出てしまったり、という事が起こります。

ビットマップのデータをすべてのディスプレイでピッタリの大きさに合わせるという事は基本的に無理なので、ある大きさで書き出した画像をCSSで拡大・縮小していきます。

img要素の場合は前回やったようにフルードイメージ化する事で画像を可変にしましたが、background画像の場合は「background-size」というプロパティを使って、拡大・縮小していきます。

画像を可変にする方法は二通りのみ

img要素ならフルードイメージ

  • フルードイメージの場合、基本的に拡大はさせない為、想定される範囲の中で最大サイズで書き出す。
  • 拡大はNGなので、綺麗に見せたい商品画像などに使用

background画像なら「background-size」

  • 「background-size」の場合、拡大・縮小ともに自由に出来る為、想定される範囲の中間付近のサイズで書き出す。
  • 拡大・縮小を自由に出来る為、ディテールに拘らない、背景などの画像に使用

今回のようにフルスクリーンで画像を表示したい場合、絶対的に決まった大きさはありませんが、一番シェアの多いモニターの解像度で作るのが無難です。
モニター解像度のシェア(2017年1月現在)
f:id:yachin29:20170512100245p:plain

画面のアスペクト比も、以前の「4 : 3」のスクエア型から「16:9」と「16:10」といったワイド型が大半を占めているのが解ります。
f:id:yachin29:20170512112150p:plain




さらにフルスクリーンのように大きなサイズの画像をwebで使う時は必ず下記のようなサービスを使ってデータを軽くし、ユーザビリティーの向上に努めましょう。
tinypng.com




background-sizeプロパティの指定方法

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。これまで使ってきたようなピクセルやパーセンテージの他に「contain」「cover」といった値でも設定出来ます。


「contain」

縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

「cover」

縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

http://yachin29.com/background-size/


background-sizeプロパティは、スマホサイト制作でよく使用されるプロパティなので、各値の違いをしっかり覚えて使えるようにしていきましょう。




<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SVGを画像で表示</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div id="inner">
<h1>Cafe de FELICA</h1>
<p class="txt">毎日食べたい、おうちみたいなごはんやおやつ</p>
<p class="photo"><img src="img/logo.svg" alt=""></p>
<nav>
<ul>
<li><a href="#">Food</a></li>
<li><a href="#">Drink</a></li>
<li><a href="#">Access</a></li>
</ul>
</nav>
</div><!--/#inner-->
</header>
<div id="content">
<ul>
<li><img src="https://placehold.jp/99bf63/ffffff/225x225.jpg" alt=""></li>
<li><img src="https://placehold.jp/99bf63/ffffff/225x225.jpg" alt=""></li>
<li><img src="https://placehold.jp/99bf63/ffffff/225x225.jpg" alt=""></li>
<li><img src="https://placehold.jp/99bf63/ffffff/225x225.jpg" alt=""></li>
<li><img src="https://placehold.jp/99bf63/ffffff/225x225.jpg" alt=""></li>
<li><img src="https://placehold.jp/99bf63/ffffff/225x225.jpg" alt=""></li>
<li><img src="https://placehold.jp/99bf63/ffffff/225x225.jpg" alt=""></li>
<li><img src="https://placehold.jp/99bf63/ffffff/225x225.jpg" alt=""></li>
<li><img src="https://placehold.jp/99bf63/ffffff/225x225.jpg" alt=""></li>
<li><img src="https://placehold.jp/99bf63/ffffff/225x225.jpg" alt=""></li>
<li><img src="https://placehold.jp/99bf63/ffffff/225x225.jpg" alt=""></li>
<li><img src="https://placehold.jp/99bf63/ffffff/225x225.jpg" alt=""></li>
</ul>
<div id="outer">
<div id="wrapper">
<div class="box info">
<h2>Infomation</h2>
<dl>
<dt>TEL</dt><dd>03-3981-7201</dd>
<dt>住所</dt><dd>〒171-0022 豊島区南池袋2-12-9</dd>
<dt>営業時間</dt><dd>ランチ 11-14時<br>ディナー 17-22時</dd>
<dt>定休日</dt><dd>無休</dd>
<dt>総席数</dt><dd>310席</dd>
</dl>
</div>
<div class="box map">
<h2>Access</h2>
<div id="map-inner">
<iframe id="gmap" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.012368807672!2d139.71169096488785!3d35.72591433018388!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d69a1bfc623%3A0x6f829dc3047a4f7c!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yS5LiB55uu77yR77yS4oiS77yZIO-8q-ODu--8q-ODk-ODqw!5e0!3m2!1sja!2sjp!4v1503310055867"  frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>


</div><!--/#wrapper-->
</div><!--/#outer-->
</div><!--/#content-->
<footer>
<p><small>&copy; Cafe de FELICA</small></p>
<ul>
<li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>
</footer>
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */
html,body,header,h1,p,ul,li,a,nav,h2,dl,dt,dd,footer,small {
	margin:0;
	padding:0;
	line-height:1.0;
}
ul {
	list-style:none;
}
a {
	text-decoration:none;
}
img {
	border:none;
	vertical-align:bottom;
}
body {
	width:100%;
	height:100vh;
	background:url(../img/bg.png) no-repeat center/cover;
	background-attachment:fixed;
}
/*ヘッダー部分*/
header {
	width:100%;
	background: rgba(255,255,102,0.7);
	padding: 10px 0 10px 10px;
	box-sizing:border-box;/*paddingとborderを内側に入れる*/
	margin-bottom:400px;
}
h1 {
	position: absolute;
	top:60px;
	left:140px;	
	font-size:38px;
	font-family: 'Oxygen', sans-serif;
}
.txt {
	position:absolute;
	top:20px;
	left:140px;
}
.photo {
	width:100px;
	background:#CC3366;
	float:left;
}
nav {
	width:400px;
	height:100px;
	float:right;
}
nav ul {
	overflow:hidden;
}
nav li {
	width:100px;
	height:100px;
	float:left;
	margin-right:20px;
}
nav li a {
	display:block;
	width:100%;
	height:100px;
	text-align:center;
	padding-top:70px;
	box-sizing:border-box;
	color:#222;
  background:#FC9 url(../img/pizza.svg) no-repeat center 10px/64px 64px;
}
nav li:nth-child(2) a {
  background: #FC9  url(../img/coffee.svg) no-repeat center 8px/60px 60px;
}
nav li:nth-child(3) a {
  background: #FC9  url(../img/access.svg) no-repeat center 8px/60px 60px;
}
nav li a:hover {
	opacity:0.8;
}
#inner {
	width:1080px;
	margin: 0 auto;
	overflow:hidden;
	position:relative;
}
/*ギャラリー部分*/
#content ul {
	width:980px;
	overflow:hidden;
	margin: 0 auto 200px;
}
#content li {
	width:225px;
	height:225px;
	float:left;
	margin:10px;
}
#outer {
	width:100%;
	background:#FFF;
}
#wrapper {
	overflow:hidden;
	width:980px;
	margin:0 auto;
}
/*infoとmap部分*/
.box {
	width:470px;
	height:470px;
	background:#FFFFFF;
	float:left;
	margin:10px;
}
#gmap {
  width:470px;
  height:400px;
}
.box h2 {
	color:#487f13;
	border-bottom:1px solid #487f13;
	text-align:center;
	padding: 20px 0;
}
.box dl {
	margin: 30px 0 0 20px;
}
.box dt, .box dd {
	margin-bottom:20px;
	line-height:1.4;
}
.box dt {
	float:left;
	width:100px;
	margin-right:20px;
}
footer {
	width:100%;
	height:100px;
	background:#487f13;
  position:relative;
}
i.fa {
  font-size:40px;
  color:#FFF;
}
i.fa:hover {
  color:#CCC;
}
footer ul {
  float:right;
  position:absolute;
  right:60px;
  top:0;
}
footer li {
  float:left;
  margin:10px;
}
footer p {
  text-align:center;
  padding-top:20px;
  color:#FFFFFF;
}