HOMEJavaScript【JavaScript】ブラウザの高さを取得して要素のheightに設定する【JavaScript】ブラウザの高さを取得して要素のheightに設定する2021.07.23JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、ブラウザの高さを取得して要素のheightに設定する方法をご紹介しています。JavaScriptでブラウザの高さを要素のhightに設定したいんだけど、良い方法ないかな?上記の疑問にお答えします。本記事ではjQueryを使わない方法で実装しています。jQueryを使用した方法につきましては、下記の記事を参考にしていただければ幸いです。【jQuery】ブラウザの高さを取得して要素のheightに設定するでは、解説していきます。ブラウザの高さを取得して要素のheightに設定するブラウザの高さを取得して、取得した値を特定の要素のheightに設定する場合、処理の流れは下記のようになります。ブラウザの高さを取得する取得したブラウザの高さの値を設定する要素を取得する取得した要素にブラウザの高さの値を設定する上記の処理をロード、リサイズのイベント時に実行する詳しく見ていきましょう。HTML本記事の解説では下記のHTMLを使用します。取得する要素はキービジュアルを想定しています。id="keyvisual"></div>ブラウザの高さを取得するブラウザ(ウィンドウ)の高さは下記の構文で取得することができます。window.innerHeight;innerHeightブラウザの内周(コンテンツが表示されている部分)の高さを取得する構文です。外周(ブラウザ自体のツールバーやメニュー等)を含めた高さを取得したい場合はouterHeightを使用します。本記事ではinnerHeightで進めていきます。ブラウザの高さを設定する要素を取得する今回はidがkeyvisualとなっている要素を取得します。document.getElementById('keyvisual');classやタグ等で取得されたい場合は、下記記事の冒頭で各要素の取得方法をご紹介していますので、ご参考にして頂ければと思います。【JavaScript】要素にclassを追加・削除する【classList】ここまででブラウザのコンテンツ部分の高さと、取得したブラウザの高さを設定する要素を取得することができました。続いてロード、リサイズ時に実行するためのスクリプトを記述していきます。ロード、リサイズのイベントに登録するスクリプトはエンジニアによって書き方は様々だと思いますが、参考までにいくつかサンプルをご紹介させていただきます。JS1ロード、リサイズのイベントにそれぞれ同様の処理内容を記述する方法です。行数は増えますが、JavaScriptがわからない方でもなんとなく処理内容が追えるような書き方だと思います。false);JS2同じ処理内容を関数にまとめて、関数を指定してイベントに登録する方法です。JavaScriptのサンプルスクリプトを検索していると下記のような書き方が多く見受けられます。一般的に使用される方法かと思います。false);JS3イベントタイプを配列にしてループする方法になります。イベントタイプが増えた際は配列に値を追加するだけで済むため、楽ですが、ループしているのでパフォーマンスは落ちるかと思います。});});本記事でご紹介したすべてのコードを記述すると下記のデモのような画面が完成します。CODEPEN」をクリックしていただくと、CodePenのサイトでデモの内容を全画面で確認することができます。実際にロードやリサイズ等を試していただければと思います。最後に今回はキービジュアルの要素をブラウザの高さいっぱいに表示することを想定して、記事にまとめてみました。キービジュアルはWEBサイトの印象そのもの。キービジュアルをいっぱいに表示することでメッセージを視覚的に伝えることができるため、最近では多くのサイトで採用されています。今後ウェブ制作をする中で、キービジュアルを目立たせたい場合に使用してみてはいかがでしょうか。以上、JavaScriptでブラウザの高さを取得して要素のheightに設定する方法のご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。