こんにちは！先日、旧友にフラミンゴに似ているねと言われ、何とも言えない気分になったともよーんです。
さて今回は、ヘッダー・フッターを除いたコンテンツ部分の幅と高さを計算させる方法をご紹介します。

まず、計算に必要な材料を揃えます。
必要なものは以下の値です。

-----------------------
・ウィンドウの幅・高さ
・ヘッダーの幅・高さ
・フッターの幅・高さ
-----------------------


それではひとつひとつ見ていきましょう。

ウィンドウの幅と高さ：
$(window).width();
$(window).height();
※ノンプログラマーによる冗長だけどわかりやすいjQueryリキッドレイアウト① 参照

ヘッダーの幅と高さ:
$("#header").outerWidth(true)
$("#header").outerHeight(true)

フッターの幅と高さ:
$("#footer").outerWidth(true)
$("#footer").outerHidth(true)

.outerWidth(true)で、マージン・パディングを含めた幅と高さを割り出します。
※ノンプログラマーによる冗長だけどわかりやすいjQueryリキッドレイアウト①おまけ 参照


次に、コンテンツの幅と高さを計算させて、それを変数として宣言します。
計算は、「Math.floor(計算式)」。変数宣言は、「var 変数名 = 値」。
計算と変数宣言は一気に行います。

var contentsWidth = Math.floor($(window).width() - $("#header").outerWidth(true) - $("#footer").outerWidth(true));
var contentsHeight = Math.floor($(window).height() - $("#header").outerHeight(true) - $("#footer").outerHeight(true));

これで下ごしらえは完了。次回はいよいよ関数を作ります。


ところで、変数名や関数名って、半角英数字で数字から始まるのさえ避ければ、あとは好きに付けてOKなんです。
いつもとんでもない名前をつけたい衝動を抑えて無難な名前にしていますが、
いつか　function projectX()　とか　var Fujiyama()　とか大げさでバカみたいなネーミングしてやりたいなと思っています。でも他の人にみられたら恥ずかしいので、きっとやらないのだと思います。はい、どうでもいいですね。


ではでは、また次回！