ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

web021 ヒーローヘッダー

ヒーローヘッダー

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

f:id:neko_kick_panch:20170526000544p:plain
f:id:neko_kick_panch:20170526000558p: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