web021　ヒーローヘッダー - ねこきっくぱんちのメモ帳

ヒーローヘッダー

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

f:id:neko_kick_panch:20170526000544p:plain

■考え方
・ビューポートの高さを考慮( E { height: [x%/100%]vh })
・backgroundは通常coverを利用する。場合によりcontain;
　また、center centerで中央からの位置調整とする。
注意
・人が写っているようなかけて困るものは背景に向かない。
・画像のpxが小さい場合、ぼかしをあらかじめ入れる手もある。

■サンプル

...
<body>
<header>
<h1>MONEY<br>REVOLUTION</h1>
<p>あなたの年収は<span>200万</span>上がる。</p>
</header>
<nav>
<li><a href="#">秒速で稼ぐ</a></li>
<li><a href="#">音速で稼ぐ</a></li>
<li><a href="#">高速で稼ぐ</a></li>
</nav>
</body>
</html>

header{
  background: url(../img/bg_header_comp.png) no-repeat center center;
  height: 90vh;
  background-size: cover;
  /*nav{height: 10vh;}としており都合100%になっている。*/
}

■参考
ヒーローヘッダーとは
 ヒーローヘッダーを使った新デザイントレンド＆参考Webサイト、素材まとめ - PhotoshopVIP