レスポンシブWEBデザイン コーディングTIPS その2

htmlの要素の記述箇所をデバイス（ウィンドウ）幅で変更したい。

media queries(CSS3)では、フロート(float)やポジション(position)、ディスプレイ(display)等を調整することでブレークポイントに応じて、表示を変更させますが、html上の要素の記述位置は変更できません。

html上の要素の記述位置を変更しなければ、対応が難しい場合に、javascript(今回はjquery)を使用することで簡単に対応できることがあります。

たとえば、下記サンプルページ左カラム（side）の『Information』の表示ですが、デバイス（ウィンドウ）幅を狭くしたときに、htmlでは左カラム（side）内に記述してあるため、左カラム（side）がメインカラムの下にきたときに当然ながら、『Information』も追随してしまいます。

sample01 

ここで『Information』の表示位置を左カラム（side）に追随させずに、javascript(jQuery)で、html上の要素の記述位置を変更(※1)することで変えてみたいと思います。

※1 実際にhtml上での要素の記述が書き換わるのではなく、javascriptによりブラウザ上で変更されます。

jQueryを読み込む。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

jQueryを動かす。

<script>
$(function(){
//ここにコード
});
</script>

jQueryでデバイス（ウィンドウ）幅を取得する。

$(window).width();

jQueryでデバイス（ウィンドウ）幅別の処理をする。（ブレークポイント768pxの場合）

var _width = $(window).width();
if(_width <= 768){
	//デバイス（ウィンドウ）幅が768px以下の時の処理
}else{
	//『デバイス（ウィンドウ）幅が768px以下』以外のときの時の処理
}

jQueryでhtml上の要素の記述位置を変更する。

今回はjQueryのinsertBefore(content)※を用い、要素を指定した他の要素の前に挿入する。

//『Information』を『main』記事の前に挿入する。
$('#box_info01').insertBefore('#box_main01 .box_article01');
//『Information』を元の位置に挿入する。
$('#box_info01').insertBefore('#h3_side01');

※jQueryではinsertBefore(content)以外にもinsertAfter(content)、before(content)、after(content)やclone()などさまざまなAPIが用意されています。

ここまでの処理を下記にまとめてみました。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(function(){
	var _width = $(window).width();//デバイス（ウィンドウ）幅を取得
	if(_width <= 768){
		//デバイス（ウィンドウ）幅が768px以下の時の処理
		//『Information』を『main』記事の前に挿入する。
		$('#box_info01').insertBefore('#box_main01 .box_article01');
	}else{
		//『デバイス（ウィンドウ）幅が768px以下』以外のときの時の処理
		//『Information』を元の位置に挿入する。
		$('#box_info01').insertBefore('#h3_side01');
	}
});
</script>

※上記のままですと、ウィンドウサイズを変更しても、リロードしなければ、処理が反映されません。
jQueryのbind(type, [data], fn)を使用してウィンドウサイズが変更された場合の処理が必要です。

例）$(window).bind("load resize", init);

上記の例ではウィンドウ『$(window)』がload（読み込み）とresize（ウィンドウサイズ変更）されたときに関数『init』を実行します。

さらにまとめると下記のコードとなります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(function(){
	$(window).bind("load resize", init);//ウィンドウが『読込み』もしくは『ウィンドウサイズ変更』された時、関数『init』を実行
	function init(){//下記の処理を関数『init』として定義する
		var _width = $(window).width();//デバイス（ウィンドウ）幅を取得
		if(_width <= 768){
			//デバイス（ウィンドウ）幅が768px以下の時の処理
			//『Information』を『main』記事の前に挿入する。
			$('#box_info01').insertBefore('#box_main01 .box_article01');
		}else{
			//『デバイス（ウィンドウ）幅が768px以下』以外のときの時の処理
			//『Information』を元の位置に挿入する。
			$('#box_info01').insertBefore('#h3_side01');
		}
	}//init
});
</script>

上記のjQueryをsample02に追記しました。

sample02 

アニメーション効果つけたい。

sample01ではデバイス（ウィンドウ）幅が320px以下になった時にグローバルメニューが非表示となり『MENU』(#gnav)にホバーすることで表示させていますが、jQueryを使用して、これにアニメーション効果（スライドダウン、スライドアップ）を付与したいと思います。

jQueryでマウスホバーの動きをシミュレートします。

$('#gnav').hover(
	function(){
		//『MENU』(#gnav)にホバーしてる時の処理
	},
	function(){
		//『MENU』(#gnav)にホバーがはずれた時の処理
	}
);

jQueryで表示にアニメーション効果をつける。

今回はjQueryのslideDown()とslideUp()を使用してみます。

//表示するときにスライドダウンさせる。
$('#gnav').children('ul').slideDown();
//非表示するときにスライドアップさせる。
$('#gnav').children('ul').slideUp();

上記を組み合わせます。

$('#gnav').hover(
	function(){
		//『MENU』(#gnav)にホバーしてる時の処理
		//表示するときにスライドダウンさせる。
		$(this).children('ul').slideDown();
	},
	function(){
		//『MENU』(#gnav)にホバーがはずれた時の処理
		//非表示するときにスライドアップさせる。
		$(this).children('ul').slideUp();
	}
);

さらにjQueryでデバイス（ウィンドウ）幅別の処理を組み合わせます。（ブレークポイント320pxの場合）

if(_width <= 320){
	//デバイス（ウィンドウ）幅が320px以下の時の処理
	$('#gnav').children('ul').css({'display':'none'});//初期は非表示に。
	$('#gnav').hover(
		function(){
			//『MENU』(#gnav)にホバーしてる時の処理
			//表示するときにスライドダウンさせる。
			$(this).children('ul').slideDown();
		},
		function(){
			//『MENU』(#gnav)にホバーがはずれた時の処理
			//非表示するときにスライドアップさせる。
			$(this).children('ul').slideUp();
		}
	);
}else{
	//『デバイス（ウィンドウ）幅が320px以下』以外のときの時の処理
	$('#gnav').children('ul').css({'display':'block'});//常に表示させておく。
}

sample02 

cssとjavascript(jQuery)を併用する際の注意点

htmlでコーディングする前にクライアントからの仕様や要望を確認し、デザインについても、各ブレークポイント毎の案が無い場合や、不明確なときは必ず確認を取ることを進めます。
不用意に初めから、javascriptを使用してコーディングをしてしまいますと、あとから仕様やデザインが変更された時に対応が難しくなることが少なくありません。
基本的にはcssとhtmlで作成し、javascriptの使用は必要最低限にしたほうが、ブラウザや各種デバイス対応が少なくてすみます。

次回はレスポンシブWEBデザインで使えるツールをご紹介いたします。