webサイト制作の勉強|2018年9月クラス用ブログ

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」というプロパティを使って、拡大・縮小していきます。



今回のようにフルスクリーンで画像を表示したい場合、絶対的に決まった大きさはありませんが、一番シェアの多いモニターの解像度で作るのが無難です。
モニター解像度のシェア(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」

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


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


ヒーローヘッダーの一例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>background-sizeの指定</title>
<link href="https://fonts.googleapis.com/css?family=Pacifico&amp;subset=latin-ext" rel="stylesheet">
<style>
html,body,ul,li,h1,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #222;
}

body {
width: 100%;/*幅いっぱい*/
height:100vh;/*画面の高さ一杯*/
background:url(img/bg.jpg)no-repeat center center/cover;
background-attachment: fixed;/*背景画像を固定*/
}
h1 {
font-family: 'Pacifico', cursive;
text-align: center;
padding-top: 80px;
font-size: 160px;
color: #FFF;
margin-bottom: 100px;
}

p {
width: 600px;
margin:0 auto;
line-height: 3.0;
font-size: 24px;
background-color:rgba(255,255,255,0.60);
padding: 20px;
}
.box {
width: 100%;
height: 600px;
background-color: #FFF;
margin:400px 0;
}
.footer {
width: 100%;
height: 300px;
background-color: cadetblue;
}
</style>
</head>
<body>
<h1>Kurotaki<br>morning</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing el
</p>
<div class="box"></div>
<div class="box"></div>
<div class="footer"></div>
</body>
</html>