【怖くないJavaScript + jQuery】ウィンドウサイズに合わせてメイン画像のサイズを変えたい

マークアップ

facebook
twitter

毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。
かゆい所に手が届くような、ニッチなjsをどんどん作っていきたいと思います。

「今回はウィンドウサイズに合わせてメイン画像のサイズを変えるjs」を作ります。
ファーストビューは維持したいんだけどメイン画像はウィンドウサイズに合わせて大きく取りたいと要望があった時には最適です。ウィンドウをリサイズした時の処理も入れて行きます。スマホにもちょっとだけ配慮します。

仕組みとしては、全体のウインドウのheightを取得して、上記のheaderと要素Aの高さを引き算した高さをメインビジュアル部にCSSとして適用すればOKです。
headerと要素Aの高さは指定しなくても動作はしますですが、しておいた方が安心です。

デモはこちら
 ZIPでダウンロード

1 Step1：まず下準備
2 Step2:次にHTMLの準備
3 Step4:jsを書き込む

Step1：まず下準備

まず必要なファイルを読み込みます。
headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は mainHeight.js とします）を読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="mainHeight.js" charset="utf-8"></script>

1 2	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script> <script type="text/javascript" src="mainHeight.js" charset="utf-8"></script>

Step2:次にHTMLの準備

今回は、メインビジュアルのIDだけ設定して頂ければ自由に組んで構いません。id=”mainVisual“を付けています。

<body>
<div id="header"><p>Header</p></div>
<div id="mainVisual"><h1>キャッチコピー。中身は自由に書けます。<br>背景はcoverに</h1></div>
<div id="sectionA"><p>要素A：ウィンドウサイズを広げたり縮めたりしてみてください。</p></div>
<div id="sectionB">他の要素</div>
<div id="footer">footer</div>
</body>

<body>

<div id="header"><p>Header</p></div>

<div id="mainVisual"><h1>キャッチコピー。中身は自由に書けます。<br>背景はcoverに</h1></div>

<div id="sectionA"><p>要素A：ウィンドウサイズを広げたり縮めたりしてみてください。</p></div>

<div id="footer">footer</div>

</body>

Step4:jsを書き込む

読みこんだjsファイル、 mainHeight.js に処理を書いていきます。

$(function(){

	//*********************************
	//初期設定
	
	var minus = 230　//Header+要素AのHeight値（要素B、要素Cと追加していきたい分だけ高さを足してください。）
	var mainID = 'mainVisual'　//高さを動的にするdivのID名
	
	//*********************************
	
	function heightSetting(){
		windowH = $(window).height();
		mainH = windowH - minus;
		
		$('#'+mainID).height(mainH+'px');
	}
	
	heightSetting();

	$(window).resize(function() {
		heightSetting();
	});
	
});

$(function(){

//*********************************

//初期設定

var minus = 230　//Header+要素AのHeight値（要素B、要素Cと追加していきたい分だけ高さを足してください。）

var mainID = 'mainVisual'　//高さを動的にするdivのID名

//*********************************

function heightSetting(){

windowH = $(window).height();

mainH = windowH - minus;

$('#'+mainID).height(mainH+'px');

}

heightSetting();

$(window).resize(function() {

heightSetting();

});

説明を詳しく書くとこう。

$(function(){

	//*********************************
	//初期設定
	
	var minus = 230　//Header+要素AのHeight値（要素B、要素Cと追加していきたい分だけ高さを足してください。）
	var mainID = 'mainVisual'　//高さを動的にするdivのID名
	
	//*********************************
	
	//heightSettingという処理を作成。処理の中身はheightを計算してCSSを設定するというもの。この処理を[★画面を読み込んだ時]と、[★ウインドウをリサイズした時]に叩いて走らせる。
	function heightSetting(){
		windowH = $(window).height(); //windowの高さを取得
		mainH = windowH - minus; //windowの高さから「minus」を引き算、mainHに代入
		
		$('#'+mainID).height(mainH+'px'); //メインビジュアルのHeightを設定
	}
	
	//[★画面を読みこんだ時]　上記処理を走らせる
	heightSetting();

    //[★ウインドウをリサイズした時]　上記処理を走らせる（今回は連続処理の回避は省略）
	$(window).resize(function() {
		heightSetting();
	});
	
});