ポートフォーリオ制作（メディアクエリとJavaScript）

こんにちは、コンスキです。

今回から、JavaScriptに変更を加えて、タブレットで表示するスライダーに動きをつけていきます。

JavaScriptのメディアクエリ
おわりに

JavaScriptのメディアクエリ

正確にはメディアクエリとは呼ばれていないのですが、CSSのメディアクエリの様に、JavaScripでも画面幅によって読み込むコードを変えることができます。

製作中のポートフォーリオサイトでは、パソコン用のデザインからタブレット用のデザインに変わる画面幅のブレイクポイントが999pxです

この場合は、次のようにコードを書きます。

let windowWidth = window.innerWidth;
let tabletBreakPoint = 999;
if(windowWidth > tabletBreakPoint) {
  // ここにパソコンで見てくれた時に読み込むJavaScriptを書きます
} else {
  // ここにタブレットで見てくれた時に読み込むJavaScriptを書きます
}

このコードを「style.css」や「front_page.php」が入っているWordPressのテーマフォルダにある「main.js」に組み込みます。

//	画面幅の範囲を設定 
let windowWidth = window.innerWidth;
console.log(windowWidth);
let tabletBreakPoint = 999;

// 表示されている要素のインデックス
let activeElementIndex = 0;

//画面幅によって分岐
if(windowWidth > tabletBreakPoint) {
	// 要素を取得する
	let imgSlider = document.getElementById('img_slider_item_container');
	let nextButton = document.getElementById('down_arrow');
	let prevButton = document.getElementById('up_arrow');
	let categoryArray = document.getElementsByClassName('blog_category')
	let liSlider = document.getElementById('blog_text_list')	
	//表示しているブログのカテゴリーを強調する関数
	function fontSwitching() {
		Object.keys(categoryArray).forEach(function(key)  {
			console.log(categoryArray[key].classList.remove('emphasize'))
	  })
	  categoryArray[activeElementIndex].classList.add('emphasize');
	}

	// 表示されている画像以外の位置を「top: 70px;」にリセットする関数
	function imgPositionReset() {                      
	  Object.keys(imageArray).filter(function(element) {
			return element != activeElementIndex
	  }).forEach(function(key)  {
    	imageArray[key].style.top = '70px'
	  })
	}


	// １番目のブログ画像の表示と１番目のカテゴリーの強調
	let imageArray = imgSlider.getElementsByTagName('img');
	imageArray[activeElementIndex].style.opacity = '1';
	imageArray[activeElementIndex].style.top = '0';
	categoryArray[activeElementIndex].classList.add('emphasize');

	// １番目のブログタイトルとブログの内容の表示
	let textArray = liSlider.getElementsByTagName('li');
	textArray[activeElementIndex].style.opacity = '1';
	textArray[activeElementIndex].style.top = '0';


	// 次の要素を表示に切り替える関数
	function nextElement(){
	  imageArray[activeElementIndex].style.opacity = '0';
	  textArray[activeElementIndex].style.opacity = '0';
	  setTimeout(function() {
		imageArray[activeElementIndex].style.top = '-70px';
		textArray[activeElementIndex].style.top = '-70px';
		if(activeElementIndex >= imageArray.length - 1){
		  activeElementIndex = 0;
		}else{
		  activeElementIndex++;
		}
		setTimeout(function() {
		  imageArray[activeElementIndex].style.top = '0';
		  textArray[activeElementIndex].style.top = '0';
		  setTimeout(function() {
			imageArray[activeElementIndex].style.opacity = '1';
			textArray[activeElementIndex].style.opacity = '1';
			Object.keys(imageArray).forEach(function(key)  {
			  console.log(imageArray[key].style.top)
			}, 100)
			imgPositionReset();
		  })
		}, 500);
		fontSwitching();
	  }, 100)
	}

	// 前の要素に切り替える関数
	function previousElement(){
	  imageArray[activeElementIndex].style.opacity = '0';
	  textArray[activeElementIndex].style.opacity = '0';
	  setTimeout(function() {
		imageArray[activeElementIndex].style.top = '-70px';
		textArray[activeElementIndex].style.top = '-70px';
		if(activeElementIndex <= 0){
		  activeElementIndex = imageArray.length - 1;
		}else{
		  activeElementIndex--;
		}
		setTimeout(function() {
		  imageArray[activeElementIndex].style.top = '0';
		  textArray[activeElementIndex].style.top = '0';
		  setTimeout(function() {
			imageArray[activeElementIndex].style.opacity = '1';
			textArray[activeElementIndex].style.opacity = '1';
			Object.keys(imageArray).forEach(function(key)  {
			  console.log(imageArray[key].style.top)
			}, 100)
			imgPositionReset();
		  })
		}, 500);
		fontSwitching();
	  }, 100)
	}

	// 下矢印をクリックされたら次の要素に切り替える
	nextButton.addEventListener('click', function() {
	  nextElement();
	  console.log(activeElementIndex)
	  console.log(textArray)
	});
	// 上矢印をクリックされたら前の要素に切り替える
	prevButton.addEventListener('click', function() {
	  previousElement();
	  console.log(activeElementIndex)
	});
} else {
  // ここにタブレット用のJavaScriptを書いていきます。
}