JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.addEventListenerでヒーローエリアのサイズを収まりきるように可変

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.addEventListener

JavaScriptの.addEventListenerでヒーローエリアのサイズを収まりきるように可変

JavaScriptの.addEventListenerでヒーローエリアのサイズを収まりきるように可変

最新のスマートフォンでも解像度・縦横比率が少しずつ変化しているように、デスクトップの解像度も少しずつ上がっていくかもしれません。

Webページのヒーローエリアは、ユーザーが最初に見る情報なので、離脱されないためにもこのサイズを適切に理解してデザインしたいところです。

この記事では、そんなヒーローエリアをJavaScriptを使って、ヒーローエリアをファーストビューにピッタリ収まるよう可変させます。

.addEventListener

JavaScriptの .addEventListener は、指定した要素のイベント毎に呼び出される関数を設定するメソッドです。

document.getElementById('element').addEventListener('click', () => {
// ここに処理内容
});
かかかず
かかかず

めちゃめちゃ便利なメソッドです。

この記事では「ページのロード時」「ウィンドウのサイズが変わった時(リサイズ)」でイベントが発火するように記述しています。

サイズを可変するサンプル

早速サンプルです。

擬似的にヒーローエリアを作っていますが、要素の height が可変して縦のウィンドウサイズと同じサイズになります。

サンプルのロゴ
かかかず
かかかず

サンプルの背景には動画を置いて、その上にロゴを配置しています。

サンプルのように、ページの中段付近でリサイズしてもあまり意味がありませんが、ページのヒーローエリアに全幅で置くと、リサイズで高さが合うのでいい感じにハマります。

実装の手順と方法

手順と方法

コードの解説の前に、実装の手順と方法について解説します。

HTMLを記述

まずはじめに、HTMLで設置したい表示したい場所へコードを記述します。

<div id="FVimg">
<video src="https://dubdesign.net/wp-content/uploads/2020/05/production-ID_4065924-online-video-cutter.com_.mp4" autoplay muted loop></video>
<img src="https://dubdesign.net/wp-content/uploads/2022/06/samplelogo.svg" alt="サンプルのロゴ" class="FVUnder">
</div>
JavaScriptを記述

次に、JavaScriptでSwiperのオプションを記述します。

コードは <body>〜</body>で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

window.addEventListener("load", () => {
    const fv = document.getElementById("FVimg");
    const wh = window.innerHeight;
    fv.style.height = wh + "px";
    console.log(fv)
}, false);

window.addEventListener("resize", () => {
    const fv = document.getElementById("FVimg");
    const wh = window.innerHeight;
    fv.style.height = wh + "px";
}, false);
CSSを記述

最後にCSSを記述して、見た目を整えます。

#FVimg {
    position: relative;
}
#FVimg video {
    width: 100%;
    object-fit: cover;
    height: 100%;
}
#FVimg:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    z-index: 1;
}
img.FVUnder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 300px;
    z-index: 1;
}

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。

HTML

HTMLは「FVimg」のid名を持つ div タグを親にして、mp4の動画と画像ファイルを中に入れます。

動画の video タグには「autoplay muted loop」の属性を記述して、自動再生をさせます。

<div id="FVimg">
<video src="https://dubdesign.net/wp-content/uploads/2020/05/production-ID_4065924-online-video-cutter.com_.mp4" autoplay muted loop></video>
<img src="https://dubdesign.net/wp-content/uploads/2022/06/samplelogo.svg" alt="サンプルのロゴ" class="FVUnder">
</div>

JavaScript

JavaScriptは、.addEventListener の「ロードした時」「ウィンドウサイズが変わった時(リサイズ)」2つのイベントで発火して、id名「FVimg」の div タグの要素の高さがその時のウィンドウサイズと同じになります。

window.addEventListener("load", () => {
    const fv = document.getElementById("FVimg");
    const wh = window.innerHeight;
    fv.style.height = wh + "px";
    console.log(fv)
}, false);

window.addEventListener("resize", () => {
    const fv = document.getElementById("FVimg");
    const wh = window.innerHeight;
    fv.style.height = wh + "px";
}, false);

ウィンドウの高さは、window.innerHeight プロパティで取得して、div タグを style.height で高さを可変させます。

CSS

CSSは、可変サイズに対応するよう video タグには object-fit: cover; で高さが合うようにします。

#FVimg {
    position: relative;
}
#FVimg video {
    width: 100%;
    object-fit: cover;
    height: 100%;
}
#FVimg:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    z-index: 1;
}
img.FVUnder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 300px;
    z-index: 1;
}
かかかず
かかかず

設置した動画の白味が強いので、before の擬似要素で少しフィルターをかけています。

さいごに

ヒーローエリアは、ユーザーが真っ先に視認するエリアで、視覚と直感で商品やサービスのイメージをそこで感じとります。

ので、一部ウィンドウに収まらない時にはイメージや情報が異なるので、この記事を参考にして可変にするなど対応してみてください。