2017.06.04

ヒーローイメージの高さを固定で表示する方法

フルスクリーンサイズのセクションを作成する場合、これまではjsを使いブラウザの高さを計測してフルスクリーンを演出する手法を用いていました。
IE9以降の対応でOKな場合はCSS1行分で実装できます。

.hero { 
  height: 100vh; 
}

vhはveiwportheightの略で1ブラウザの高さ1％を1vhとしています。

下記は実装向けにヘッダーメニューとヒーローイメージの組み合わせのHTML+CSS例です。

<header id="header">
  <h1>hero image full screen</h1>
  <nav>
    <ul>
      <li>nav1</li>
      <li>nav2</li>
      <li>nav3</li>
    </ul>
  </nav>
</header>
<section id="hero">
  <p>FULL SCREEN</p>
</section>

#header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 60px;
  background: #fff;
}
#header h1 {
  float: left;
}
#header ul li{
  float: left;
}
#hero {
  width: 100%;
  height: 100vh;
  background: url(img/hero-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
#hero p {
  position: absolute;
  top: 50%;
  left: 50%;
}