いよいよWindows7のサポート終了が2020年1月14日に迫ってきました。Windows10に乗り換えるために今年はPCが売れているそうです。
私たちホームページ制作（ウェブサイト制作）業者も、Windows7サポート終了は心待ちにしているところです。
なぜなら、IE（Internet Explorer）とお別れできる可能性が高いからです。
もちろんWindows10にもIEは残りますが、推奨はされていません。Edgeブラウザが標準ブラウザになります。そうなると乗り換えが進む可能性があります。
IEはホームページ制作（ウェブサイト制作）業者にとっては悩みのタネです。
ChromeやFirefoxが対応しているCSSやHTMLに、IEだけ対応していないということが多いのです。
かつては圧倒的なシェアを誇ったIEですが、いまやシェアは13％程度。かつてシェアが高かったゆえに、IEのみ対応するウェブサイトが多かったのも事実です。
たとえば国税納税サイトのe-TAX。今年からようやくIE以外に対応するようになりました。
しかし、いまやChromeが60％と寡占状態です。IEの次にFirefox、Safari、Edgeが8％前後で並びます。
なんだかんだと1割超えで2位のシェアがあると、これを切り捨ててウェブサイト制作（ホームページ制作）はできません。
これがEdgeに移行してくれれば、いよいよIE非対応が許される時代が来るのです。
しかもEdgeも次期バージョンからレンダリングエンジンをChromeと同じ「Chromium」に切り替えるそうで、Edgeで利用できないHTML・CSSのことを忘れることができるのです。
とはいえ、そこまではIE対応を行うのがウェブサイト制作（ホームページ制作）業者には求められそうです。
現在制作中のウェブサイトでも、一つ問題があったので覚え書を残しておきます。
WordPressのOnePress（有償版）というテーマのスライダーにIEでの表示に問題がありました。
たとえば、縦長の画像をスライダーに表示させると、スライダーが横長に表示される場合、ChromeやFirefoxでは画像の上下を切り捨ててくれるます。
ところが、IEでは上下を切り捨てず画像全体を横長に表示しようとするので、縦方向が圧縮された画像が表示されるのです。
解析したところ、このスライダーはOwl CarouselというjQueryプラグインで動いていました。
上下の切り捨て（画像の縦横比率を保ったまま任意のサイズにトリミング）はCSSのobject-fitで実装されているのですが、これがIEに対応していないことが原因でした。
そこで、object-fit-imagesというjQueryプラグインを使います。distフォルダの中にあるofi.min.jsだけを使用します。
任意のディレクトリにofi.min.jsをアップロードします。
header.php（functions.phpで読み込ませてもOK）
<script src="/ofi.min.js"></script>
※ディレクトリは自分の環境に応じて記載してください。
footer.php（/bodyの前に）
<script>
objectFitImages( 'img.ofi' );
</script>
※ofiの部分を書き換えれば任意のクラスを使用できます。
CSS
.ofi {
object-fit: cover;
font-family: 'object-fit: cover;
}
そしてimgタグにofiというclassを追加すれば、IEでもきれいにトリミングされるようになります。
OnePressでは、onepress-plusプラグインのなかにあるsection-partsフォルダのsection-slider.phpの、imgの後にclass=”ofi”を追記するだけです。
