今回は、コーディングの強い味方、jQueryの便利な使い方を見ていきます。
jQueryの環境構築は思っているものとさせて頂きます。

resize

resizeはjQueryのメソッドです。
役目としては、ウィンドウのサイズが変わった時に、そのサイズを取得するというものです。
何のことだか、という感じですよね。

使い方は、

hello.html


<script>

jQuery("window").resize(function(){

//widthやheightの値を得る処理
    var h = $('window').height();
    var w = $('window').width();

//上記の変数を代入して、htmlコードやcssコードと連動させる
　　

});

</script>

という感じです。
resize()の中身は関数です。
また、取得対象は常に「window」になります。

例えば、position:fixedのleftとtopを調整し、画面の真ん中にモーダルを配置したい時、transformなどを利用すると思いますが、jQueryのresizeでも簡単にできちゃいます。

モーダルのwidthとheightを取得して、windowのwidthとheightからそれらを引き、２で割るとちょうど真ん中に配置されます。

画面がリサイズされるのに連動して、常に真ん中の位置をモーダルがキープできるので便利です。

ぜひ、使ってみてくださいね。