「jQueryを使って、windowの横幅サイズに応じてタグを追加したり内容を変更したりする。」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
ウインドウの幅に応じてタグを追加したり内容を変更したりする方法について考えていきます。12月10日記事
~
~
目次
#contents
~
~
----
~
*横幅で表示内容を変えたい
PC画面ではたくさんの情報を表示したいのに対し、スマートフォンではそんなに情報を表示したくない時があります。
そんなとき、状況応じて色々と処理を変えていく場合を考えていきます。
~
~
*参考になりそうなnicepaper記事
+[[HTMLタグをデバイスごとに、javascriptとjQueryで振り分け]]
+[[jQueryとCSSでメニューなどのスクロールしたらついてくるエリアを作る2]]
~
~
*ウインドウの幅を取得
ウインドウ幅を取得するメソッドは$(window).width();で取得できます。それを変数に入れて、その変数をif文で判定して、タグやphpの処理内容を変えていきたいと思います。
~
~
*コード
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
//$(window).resize(function() {//これだと変更した時にしか表示されないので、loadしたときにも表示されるように以下のように変更する。
$(window).on('load resize', function() {
var win_width = $(window).width();
//console.log(win_width);
if (win_width >= 600) {
$('#WidthArea').html('<span>600px以上ですよ。<?php echo 6; ?></span>');
} else if (win_width >= 400) {
$('#WidthArea').html('<span>400px以上600pxより小さいですよ。<?php echo 4;?></span>');
} else {
$('#WidthArea').html('<span>400pxより小さいですよ。<?php echo 3;?></span>');
}
});
});
</script>
<title>jQueryで画面サイズの幅毎にタグを表示や非表示</title>
</head>
<body>
<div>
<p>ここは横幅がどんな風でも表示</p>
</div>
<div id="WidthArea"></div><!--ここだけ幅に応じて変えていきたい。 -->
<div>
<p>ここも横幅がどんな風でも表示</p>
</div>
</body>
</html>
~
~
*解説
onメソッドを使って、ロード(load)したときと、横幅を変更したとき（resize）の関数(function)を実行させます。
※この記事と関係はないですが、スクロールしたときは(scroll)と書きます。
まず、横幅を取得し、win_widthという変数に代入し、その値に応じてif文を書いていきます。
~
~
以上
