JavaScript

ブラウザの幅に応じた要素変更方法：JavaScriptのresizeを活用したレスポンシブ対応ガイド

  /

Web開発において、レスポンシブデザインはもはや標準的な技術です。しかし、CSSのメディアクエリだけでは実現できない動的な要素の切り替えがあります。
この記事では、JavaScriptを使用してブラウザの幅に応じてHTML要素を動的に変更する方法を紹介します。ブラウザ幅（ピクセルサイズ）を判定し、タグ要素を変更する方法です。CSSのメディアクエリを使用する方法では無く、JavaScriptの「.resize()」と「$(window).width()」を使用します。
エンジニアから初心者まで、誰もが役立つ情報を分かりやすく解説していきます。

Contents

はじめに

スマートフォンやタブレットなど、様々なデバイスでWebページを閲覧する現代において、ページのレイアウトを柔軟に変更することは非常に重要です。CSSのメディアクエリも有効ですが、JavaScriptを用いることでより細かく、条件に応じた動的な変更が可能となります。ここでは、特にブラウザの幅に応じて異なる内容を表示させるテクニックに焦点を当てます。

ブラウザ幅によってタグ要素を変えるCSSの記述

まず、基本となるCSSを設定しましょう。ここでは、シンプルなスタイルを適用して、後でJavaScriptを用いた動的な変更が分かりやすくなるようにします。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
}
h1{
  font-size:16px;
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0 30px 0;
}

.txt{
  font-size: 18px;
  text-align: center;
  color: blue;
}
.red{
  color: red;
  font-weight: bold;
  font-size: 30px;
}
</style>

HTMLの準備

次に、JavaScriptで動的に変更される要素を含むHTMLを準備します。ここでは、ブラウザの幅に応じてメッセージが変わるシンプルな例を示します。
ブラウザ幅によって2パターンのhtmlタグ要素出力先（class=”txt”）を用意します。

<h1>ブラウザ幅を縮めてみてください。<br>800px以下になると以下のテキストが変わります。</h1>

<div class="txt"></div>

JavaScriptによる動的な要素の切り替え

ここが肝心です。ブラウザのリサイズイベントを捉え、幅に応じて異なる内容を表示するJavaScriptのコードを記述します。jQueryを利用することで、この処理を簡単に実装できます。
jquery-2.2.0.min.jsファイルを読み込みます。ブラウザwidth（幅）を取得し、ブラウザ幅が801px以上の時と800px以下の時で2パターンhtmlタグを出力する処理です。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function sp() {
  wd = $(window).width();
  if(wd <= 800){
    $(".txt").html("<span class='red'>ブラウザが幅800px以下になりました！</span>");
  }else{
    $(".txt").html("現在ブラウザ幅が801px以上");
  }
}

$(function(){
  sp();
});

$(window).resize(function(){
  sp();
});
</script>

ブラウザ幅（ピクセル）サイズによってタグ要素を変えるデモページ

実際にこのコードがどのように機能するのか、以下のデモページで体験してみてください。リアルタイムでブラウザの幅を変更することで、内容がどのように変わるのかを確認できます。
ブラウザ幅（ピクセル）サイズによってタグ要素を変えるデモ

まとめ

この記事では、JavaScriptを用いてブラウザの幅に応じてコンテンツを動的に変更する方法をご紹介しました。レスポンシブデザインの補完として、または特定の条件下で特別なメッセージを表示させたい場合など、このテクニックは非常に便利です。基本的なコンセプトを理解すれば、さまざまな応用が可能となりますので、是非ともこの知識を活用して、より良いウェブサイトの開発に役立ててください。

　
※流用される場合は自己責任でお願いします。
　headタグ内のGoogleアナリティクスタグは流用しないで下さい。

ブラウザ幅 resize
関連記事