ブラウザの幅(ピクセルサイズ)を判定し、タグ要素を変更する方法をご紹介します。
cssのメディアクエリを使用する方法では無く、JavaScriptの「.resize()」と「$(window).width()」を使用します。
レスポンシブサイトで要素を切り替える時に使えます。
Contents
ブラウザ幅(ピクセルサイズ)によってタグ要素を変えるCSSの記述
※ここは重要では無いので、必要に応じて書き換えてください。
<style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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の記述
※ブラウザ幅によって2パターンのhtmlタグ要素出力先(class=”txt”)を用意します。
<h1>ブラウザ幅を縮めてみてください。<br>800px以下になると以下のテキストが変わります。</h1> <div class="txt"></div>
ブラウザ幅(ピクセルサイズ)によってタグ要素を変えるブラウザリサイズ時のJavaScritp記述
※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>
ブラウザ幅(ピクセル)サイズによってタグ要素を変えるデモページ
ブラウザ幅(ピクセル)サイズによってタグ要素を変えるデモ
※流用される場合は自己責任でお願いします。
ディスプレイ広告