【jQuery】画面サイズに高さを自動で合わせる方法【超簡単】

「ヘッダーやメインビジュアルの高さを画面ピッタリ合わせたい」こんなニーズに答えます。

本記事では、サイトにアクセスした際のファーストビューの高さを画面ピッタリに自動で合わせる方法を解説しています。

WEB系プログラミングについて学んでいる方は参考にどうぞ。

まず、ファーストビューの高さを合わせたいというのはどういう状況なんでしょう？

下記をみてみましょう。

よくある構成ですね、画面上部の黒色のところがナビエリア、下の女性の画像がヘッダーエリアです。

よく見てみると、ヘッダーエリアが画面に収まらず右側にスクロールバーが表示されちゃってます。

これ、メインビジュアルが見切れてしまっていて、スクロールしないと全体が見れないという不格好な状態。

つまり、タイトルにある「画面サイズに高さを自動で合わせる方法」の完成イメージは下記になります。

見事に高さがピッタリに、画面右側にあったスクロールバーも消えました。

高さが適切なので背景画像も綺麗に収まっていますね。

今回はこれをjQueryで簡単に実装してみようと思います。

jQueryで要素の高さを自動で調整する方法

jQueryで実装するのでライブラリの読み込みを忘れないようにしてください。

読み込みスクリプト忘れたという方は下記をhead内にコピペすればOKです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

処理の前にマークアップとスタイルを簡単に用意します。

index.html

<nav id="gnavi"></nav>
<header id="mv"></header>

ナビとヘッダーを用意しただけですね、id名は自由に付けてください、もちろんクラス指定に変えてもらっても大丈夫です（変更した場合、処理のセレクタ指定箇所を合わせる必要あり）

このまま使えば、処理もコピペだけですぐに使えるようになります。

style.css

#gnavi {
  background-color: #000;
  height: 100px;
}
#mv {
  height: 700px;
  width: 100%;
}

ナビには高さとわかりやすいように背景色を設定しただけです。

ヘッダーの高さは適当でOKです（処理で可変させるので）、わかりやすいように背景色か背景画像を設定するとわかりやすいかもしれません。

これで下準備は整いました、jQueryの処理をみてみましょう。

jQueryでスタイルを自動で書き換える

論より先に完成コードを公開しますね。

$(function(){
  var nH = $('#gnavi').innerHeight();// ナビの高さを取得

  var wH = $(window).height();// 表示画面の高さを取得

  var hH = wH - nH;// 表示画面とナビエリアの差分を算出

  $('#mv').css('height', hH + 'px');// 算出した差分をヘッダーエリアの高さに指定
});

思ってたよりシンプルといったところ。

これをjsファイルで読み込ませるか、body閉じ手前でスクリプトタグを使って直接記述すれば動きます。

簡単に解説します、処理の手順は以下の通りです。

• ナビエリアの高さを取得(2行目)
• 表示画面の高さを取得(4行目)
• 表示画面とナビエリアの差分を算出(6行目)
• 算出した差分をヘッダーエリアの高さに指定する(8行目)

これだけです、ナビと表示画面の高さを取得し、その差分をヘッダーエリアの高さに指定するのがポイントです。

これならjQuery初心者の方でも簡単に出来ると思います。

ぜひお試しあれ。

おまけ：前述したものをレスポンシブ対応させたい時

つまりブレークポイントに合わせて処理を分岐させたい時は、横幅を取得すればOK、下記のようにしましょう。

レスポンシブ対応バージョン

$(function(){
  var nH = $('#gnavi').innerHeight();

  var wH = $(window).height();

  var wW = $(window).width();// 表示画面の横幅を取得

  var hH = wH - nH;

  if(wW > 768) {
    $('#mv').css('height', hH + 'px');
  }else {
    // ここにレスポンシブ時の処理
  }
});

表示画面の横幅を取得する処理を追加しています(6行目)

先ほどの紹介したコードの8行目を分岐処理に書き換えています(10行目~14行目)

表示されている画面(ウィンドウ)の横幅とブレークポイント(768)を比較し分岐させることで、レスポンシブ対応を可能としています。

ブレークポイントは環境に合わせて変更して頂ければコピペですぐに使えると思います。

終わりに：jQuery便利すぎるってこと

jQueryって便利、本当にそう思います。

今回紹介した方法を使えば、ファーストビューに動画を埋め込んでいる時など、

画面ピッタリで表示させることで見栄えも格段によくなります、見切れているメインビジュアル「だせぇ」の一言ですから。

他にもあります、ファーストビューにスムーススクロールボタンを配置した時とか。

移動先のセクションがすでに一部見えているとカッコ悪いです、そんな時に高さを画面ピッタリにすればユーザー体験も上がるというもの。

こんな感じでいろいろ使えますのでぜひ試してみてください。

ちなみに、私はWPテーマMAXXのカスタマイズで使いました。

このテーマ、ヘッダーに動画埋め込めるんですが表示してみると見切れてたりしてゴミかs、おっとこの辺で。笑

といったような感じでWordPressテーマのカスタマイズにも使えたりします。

覚えておいて損はありませんので、サンプルコードでお試しください。

以上になります。

Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。

不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。