こんにちは、2カ月間ほど毎日食べていたヨーグルトをある日ぱたりとやめてしまったともよーんです。
もう一生分食べてしまったとでもいうのでしょうか。

さて、突然ですが、ウィンドウのviewportってモニターのサイズによって違ってきますよね。
でもPCサイトでもリキッドなレイアウトしたい時ってありますよね。

先日、サイドナビのみ固定でGoogleMapが残りのスペースいっぱいいっぱいに広がっている、
というデザインのコーディングをする機会があったのですが、
GoogleMapは明示的に表示領域の高さと幅をcssで指定する必要があり、
どうしたもんかと途方にくれていました。
くじけそうな心にムチを打って色々考えたり調べたりする中で、以下の方法を見つけました。

「ウィンドウの表示サイズを取得して、そこからコンテンツの表示領域を計算させる。」

この詳しい方法を3回に分けてご紹介します。

大きな流れとしては以下の通りです。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

①ウィンドウの幅・高さを取得
↓
②そこから余白分を引いてコンテンツの幅と高さを計算
↓
③cssで指定する関数を作成

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

それではステップ・バイ・ステップで見ていきましょう。
今回はjQueryを使います。
ソースは冗長だと思いますが、ノンプログラマーにはわかりやすいストーリーだった構成になっているかと思います。
いきなりネイティブの略語やスラングいっぱいの英語を聞くより、基礎を学習中の日本人の話す英語のほうがわかりやすいですよね。
そんな感じで伝わればいいなと思います。

さて、話は脱線しましたが、第1回目の今回は①ウィンドウの幅・高さを取得。
いろいろなものの幅・高さを取得してみましょう。
次のように書くとウィンドウの幅・高さを取得できます。
$(window).width();
$(window).height();

また、この方法を使っていろんな要素のサイズを取得できます。
例えば、idがmainの要素の幅と高さは以下のように。
$("#main").width();
$("#main").height();

classがinnerの要素はこんな感じ。
$(".inner").width();
$(".inner").height();

簡単ですよね。そうです、jQueryってcssが分かれば、
ある程度簡単なものは読めてしまうのです。
恐れるなかれ行けばわかるさ、です。

取得した値を変数として宣言したところで、料理でいうところのお買いもの完了。
var windowWidth = $(window).width();
var windowHeight = $(window).height();

参考はjQueryの本家サイトのこちらのページから
http://api.jquery.com/width/
http://api.jquery.com/height/


次回は、②そこから余白分を引いてコンテンツの幅と高さを計算
をご紹介します。