常連

自己紹介

お世話になります。

flexboxで横並びのボックスを作成中なのですが、
IE11だけ要素がはみ出てしまいます。

左側のbox１は横幅を固定したままで、右側のbox2だけをレスポンシブで可変型にしたいのですがうまくいきません。
GoogleChrome、Firefox、Edgeでは特に問題なく表示されています。

どこが悪かったのか、分かる方がいらっしゃいましたら教えて頂ければ幸いです。

![イメージ説明](6a06feb4702bd6bfcd9ec77ab04a2234.jpeg)

```HTML
<div class="wrapper">
<div class="box1">
固定幅
</div>

<div class="box2">
可変幅
</div>
</div>
```
```CSS
.wrapper {
    display: flex;
    width: 100%;
}
.box1 {
    flex-grow: 0; /* 画面幅によらずwidthで固定 */
    flex-shrink: 0; /* 画面幅によらずwidthで固定 */
    width: 250px;
    margin-right: 4%;
}
.box2 {
    width: auto;
}
```

flexboxでIE11だけ要素がはみ出てしまいます

### 前提・実現したいこと

jQueryでスクロール時に横や下から要素がフワッと表示されるようにしたくて、delightersというスクリプトを使用し実装しました。
アニメーション自体は成功しましたが、スクロールするたびに実行されるので処理が一度だけ実行されるようにしたいです。

### 該当のソースコード

```HTML
<div data-delighter class="delighter left">
	<h3>タイトル</h3>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
```

```CSS
/* 基本のスタイル */
.left.delighter {
	transition: all 1s ease-out;
	transform: translateX(-100%);
	opacity: 0;
}

/* スタート時のスタイル */
.left.delighter.started {
	transform: translate(-5%, 0%);
	opacity: 1;
}

/* エンド時のスタイル */
.left.delighter.started.ended {
	transform: translate(0%, 0%);
}
```

```JavaScript
var Delighters = new (function() {
	var self = this,
			dels = this.dels = [],

			// default options
			options = {
				attribute: 	'data-delighter',
				classNames: ['delighter', 'started', 'ended'],
				start: 			0.75, // default start threshold
				end: 				0.75, // default end threshold
				autoInit: 	true 	// initialize when DOMContentLoaded
			};

	document.addEventListener("DOMContentLoaded", function() {
		if (options.autoInit) init();
	});

	function config(opts) {
		for (var name in opts) options[name] = opts[name];
	}
	
	function init() {		
		document.addEventListener('scroll', scroll)
		var els = document.querySelectorAll('[' + options.attribute + ']');

		for (var i=0; i<els.length; i++) {
			var el 			= els[i],
					def 		= el.getAttribute(options.attribute, 2),
					pairs 	= def.split(';'),
					del 		= {};
					del.start = options.start;
					del.end = options.end;
			
			for (var j=0; j<pairs.length; j++) {
				var pair 	= pairs[j].split(':'),
						name 	= pair[0],
						val 	= isNaN(pair[1] * 1)? pair[1] : pair[1] * 1;
				if (name) del[name] = (val === undefined)? true : val;
			}

			del.el = el;
			del.id = dels.length;
			dels.push(del);
			el.classList.add(options.classNames[0])
			if (del.debug) el.style.outline = 'solid red 4px';
		}
		scroll();
	}

	function scroll() {
		var viewportHeight = window.innerHeight;
		for (var i=0; i<dels.length; i++) {
			var del = dels[i],
					box = del.el.getBoundingClientRect(),
					factorStart = box.top / viewportHeight,
					factorEnd = box.bottom / viewportHeight;

			if (del.debug) {
				if (factorStart >= 0 && factorStart <= 1) {
					if (!del.startLine) {
						del.startLine = document.createElement('div')
						document.body.appendChild(del.startLine);
						del.startLine.style = 'position:fixed;height:0;width:100%;border-bottom:dotted red 2px;top:' + (del.start * 100) + 'vh';
					}
				}
				if (((factorEnd < del.end) || (factorStart > 1)) && del.startLine) {
					del.startLine.parentNode.removeChild(del.startLine);
					delete del.startLine;
				}
			}
			if (factorStart < del.start && !del.started) {
				del.started = true;
				del.el.classList.add(options.classNames[1])
			}
			else if (factorStart > del.start && del.started) {
				del.started = false;
				del.el.classList.remove(options.classNames[1])
			}
			if (factorEnd < del.end && !del.ended) {
				del.ended = true;
				del.el.classList.add(options.classNames[2])
			}
			else if (factorEnd > del.end && del.ended) {
				del.ended = false;
				del.el.classList.remove(options.classNames[2])
			}
		}
	}

	self.init = init;
	self.config = config;
})();
```

### 試したこと

optionsのautoInitをfalseにしてみましたが、表示されなくなってしまいました。

スクロール時のアニメーションを一度だけ実行したい

表題の通りです。

以下のような場合に、物件情報のうち、tokyo のタクソノミーがついているものの件数を取得する方法を教えてください。

・物件情報（カスタム投稿タイプ）
・area(カスタムタクソノミー)
 ・tokyo(ターム)
 ・osaka(ターム)
 ・nagoya(ターム)

初歩的な質問で申し訳ありませんが、よろしくお願いします。

WordPress カスタムタクソノミーで絞り込んだカスタム投稿タイプの件数を取得する方法

###前提・実現したいこと
swiper.jsを使って以下ウィンドウ幅でカルーセル表示を切り替えたいです。
・769px以上 → 横スライダー
・768px以下 → 縦スライダー

swiper.js：公式サイト
[http://idangero.us/swiper/#.V_sUWSGLSUk](http://idangero.us/swiper/#.V_sUWSGLSUk)

###発生している問題・エラーメッセージ
swiper.jsのオプション「breakpoints」で表示画像数の切り替え等はできるのですが、
縦・横スライダーの切り替えをするには、どうソースを書いていいか分からない状況です。

###該当のソースコード
```ここに言語を入力
var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    slidesPerView: 5,
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 60,
    watchSlidesVisibility: true,
    breakpoints: {
      768: {
        direction: 'vertical',
        slidesPerView: 3,
        spaceBetween: 10
      }
    }
});
```

###補足情報(言語/FW/ツール等のバージョンなど)
swiper.js：API情報
[http://idangero.us/swiper/api/](http://idangero.us/swiper/api/)

swiper.jsでウィンドウ幅によって処理を切り替えたい

メインビジュアルを分割し、ホバーで左右から画像がスライドしてくるようなホバーアクションを作成したいと
考えております。

【背景1（画像1をホバーで左から中央へスライド）】→【画像1】【画像2】←【背景2（画像2をホバーで右から中央へスライド）】

下記の通りの記述をし、スライドはするのですが、右斜め上からスライドされる、画像が範囲よりも大きくなりスライドする
などの挙動がおかしい状態でうまく作動しません。

画像のwidth:100%;を解除するとスライドはうまく作動するのですが、レスポンシブに対応する必要があり、頭を悩ませております。
初歩的な質問でしたら申し訳ありませんが、ご教示しただけたら幸いです。
どうぞよろしくお願いいたします。

```html

<div class="mainvisual">
	<div class="visual-inner">
		<div class="hoge01-area">
		<a href="#"><img src="img/画像1" alt=""></a>
		</div>
		<div class="hoge02-area">
		<a href="#"><img src="img/画像2" alt=""></a>
		</div>
	</div>

	<div class="bg-hoge">
	<a href="#"><img src="img/背景1" alt=""></a>
	</div>

	<div class="bg-hoge">
	<a href="#"><img src="img/背景2" alt=""></a>
	</div>
</div>


```

```scss
.mainvisual{
	position: relative;
	line-height: 0;

	.visual-inner{
		position: relative;
		z-index: 1000;
		display: flex;
		justify-content: center;
		flex-wrap:wrap;

		.hove01-area,.hoge01-area a,
		.hoge02-area,.hoge02-area a,{
			width: 50%;
			img{
				width:100%;
			}
		}
	}

	.bg-hoge01{
		position: absolute;
		top: 0;
		left:0;
		z-index:999;
		a img{
			width: 100%;
		}
	}

	.bg-hoge02{
		position: absolute;
		top: 0;
		left:0;
		z-index:999;
		a img{
			width: 100%;
		}
	}
}

```

```js$('.hoge01-area').on('mouseover', function () {
	$('.bg-hoge01').stop().animate({
		left: 0
	});
	$('.visual-inner').stop().animate({
		left: '2000px'
	});
	$('.bg-hoge02').stop().animate({
		left: '2000px'
	});
});
$('.bg-hoge01').on('mouseout', function () {
	$('.bg-hoge01').stop().animate({
		left: '-2000px'
	});
	$('.visual-inner').stop().animate({
		left: '0'
	});
})
$('.hoge02-area').on('mouseover', function () {
	$('.bg-hoge02').stop().animate({
		left: 0
	});
	$('.visual-inner').stop().animate({
		left: '-2000px'
	});
	$('.bg-hoge01').stop().animate({
		left: '-2000px'
	});
});
$('.bg-hoge02').on('mouseout', function () {
	$('.bg-hoge02').stop().animate({
		left: '2000px'
	});
	$('.visual-inner').stop().animate({
		left: '0'
	});
})
});

```