恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

ファーストビュー画像・要素をウィンドウの高さに合わせる方法【JavaScript・CSS】

投稿日:2018-10-23 更新日:

今回は、ファーストビューの画像(要素)をウィンドウの高さににピッタリ合わせる方法を紹介します。

まずはデモページをご覧ください。

とてもよく使われるレイアウトですね。ファーストビューにインパクトのある画像を使用したい・見せたい画像がある時に効果的です。

それでは実装方法を解説していきます。

ファーストビューの画像をウィンドウの高さに合わせるコード

結構簡単なコードで実装できます。

HTML

<div class="main-visual" id="js-main-visual"></div>

スタイル用にclassを、JavaScript用にidを記述するだけです。

CSS

.main-visual {
  background-image: url(./img/main-visual.jpg);
  background-size: cover;
  height: 100vh;
}

background-sizeをカバーにしておけば、どの比率になっても隙間ができません。

100vhは、ウィンドウの高さに対して100%という意味です。

height: 100vhを指定すれば、要素がウィンドウサイズピッタリになります。

これでほぼ完成なのですが、スマホだとアドレスバーや下部メニューがあるためピッタリになりません。

この問題は、JavaScriptを使って解決します。

JavaScript

function imageJustSize() {
  var mainVisual = document.getElementById('js-main-visual');
  var winH = window.innerHeight;
  mainVisual.style.height = winH + 'px';
}

imageJustSize();

window.addEventListener('resize', imageJustSize);

window.Heightを使えば、ウィンドウの内側のサイズを取得することができます。

サイズは数値なので、pxを付けてあげる必要があります。

window.addEventListener('resize', imageJustSize);

この部分は、ウィンドウがリサイズされたり、スマホの横向きに切り替えた時のための記述です。

意外と簡単に実装できたのではないでしょうか。

もう一度デモを載せておきます。

ウィンドウのサイズを変えても、画像の高さはウィンドウの高さピッタリになっています。

よく使うテクニックなので、覚えておきましょう!

この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TAC

TAC

Webデザイナー、フロントエンドエンジニア。 Webデザイン、HTML/CSS、JavaScript、PHP、SEOが専門です。