HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのonresizeイベント属性とは？使い方とサンプルコードを解説

HTMLのonresizeイベント属性は、ユーザーがブラウザウィンドウのサイズを変更したタイミングで発火するイベント属性です。ウィンドウのリサイズに合わせてレイアウトやデザインを動的に切り替えたい場合に活用できます。

構文

onresize属性の基本的な構文は以下のとおりです。

<tagname onresize="script"></tagname>

属性値には、リサイズ時に実行したいJavaScriptのコードや関数名を指定します。onresize属性は主に<body>要素に指定して使用されるのが一般的です。

onresizeイベント属性の使用例

ここでは、ブラウザウィンドウのサイズが変更されると、ページの背景グラデーションが切り替わるサンプルを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        padding: 20px;
    }
</style>
</head>
<body onresize="resizeFn()">
<h1>HTML onresize Event Attribute Demo</h1>
<p>Now resize the browser window</p>
<script>
    function resizeFn() {
        document.body.style.background = 'linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat';
    }
</script>
</body>
</html>

実行結果

このコードをブラウザで開くと、初期状態ではオレンジ系のグラデーション背景が表示されます。

HTMLのonresizeイベント属性とは？使い方とサンプルコードを解説

その後、ブラウザウィンドウのサイズを変更してみてください。onresizeイベントが発火し、resizeFn()関数が実行されて、背景が青系のグラデーションに切り替わります。

HTMLのonresizeイベント属性とは？使い方とサンプルコードを解説

まとめ

onresizeイベント属性を使えば、ウィンドウサイズの変更を検知してJavaScriptを実行できます。レスポンシブ対応の補助的な処理や、動的なUI切り替えなどに便利な属性です。なお、リサイズイベントは連続的に何度も発火するため、実際の開発では負荷軽減のためにsetTimeoutなどを使ったスロットリング（間引き処理）を組み合わせるのがおすすめです。

  1. HTML ondragendイベント属性の使い方を徹底解説

    ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q

  2. HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説

    HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード