質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

988閲覧

IE11でのslick.jsの矢印表示について

mozuq

総合スコア15

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/06/28 05:25

前提・実現したいこと

slick.jsの左右の矢印について、Chrome最新版とEdgeでは問題なく表示されるのですが、IE11のみ矢印が欠けたように表示されてしまいます。
IE11でも矢印が全て表示されるようにしたいです。
どなたかご教示いただけないでしょうか。

発生している問題・エラーメッセージ

slick.jsの左右の矢印について、Chrome最新版とEdgeでは問題なく表示されるのですが、IE11のみ矢印が欠けたように表示されてしまいます。

イメージ説明

該当のソースコード

html

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta http-equiv=”Pragma” content=”no-cache”> 6<title>テスト中</title> 7<link href="./css/slick-theme.css" rel="stylesheet" type="text/css"> 8<link href="./css/slick.css" rel="stylesheet" type="text/css"> 9<link href="./css/style.css" rel="stylesheet" type="text/css"> 10<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> 11<script type="text/javascript" src="./js/slick.min.js"></script> 12<script type="text/javascript" src="./js/main.js"></script> 13</head> 14 15<body> 16<div id="HEADER"> 17 <h1>テスト中</h1> 18 <p>この文章はダミーです。この文章はダミーです。この文章はダミーです。<br> 19 この文章はダミーです。この文章はダミーです。この文章はダミーです。</p> 20</div> 21 <div class="slider"> 22 <div><a href="#"><img src="img/スライド1.jpg" alt="01"></a></div> 23 <div><a href="#"><img src="img/スライド2.jpg" alt="02"></a></div> 24 <div><a href="#"><img src="img/スライド3.jpg" alt="03"></a></div> 25 26 </div> 27<div id="FOOTER"> 28test test test 29</FOOTER> 30</body> 31</html>

style.css

css

1@import url(https://fonts.googleapis.com/css?family=Lato:400,700); 2@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css); 3html { 4 width: 100%; 5} 6body { 7 background-color: #add8e6; 8 width: 100%; 9 position: relative; 10 padding: 0px; 11 margin: 0px; 12 font-family: Lato, "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; 13 } 14#HEADER { 15 font-weight: bold 16 color:#555555; 17 padding: 10px 0px 0px 20px; 18 background-color: white; 19 height: 150px; 20} 21p { 22 line-height: 1.5; 23 padding: 10px 0px 0px 20px; 24 font-family: YuGothic,'Yu Gothic','メイリオ', Meiryo,sans-serif; 25 font-size: 20px; 26} 27*{ 28 box-sizing: border-box; 29 margin: 0; 30 padding: 0; 31} 32.slider{ 33 margin: 50px auto; 34 width: 80%; 35} 36.slider img{ 37 height: auto; 38 width: 100%; 39} 40/*slick setting*/ 41.slick-prev:before, 42.slick-next:before{ 43 color: #000; 44} 45#FOOTER { 46 margin: auto; 47 background:#333; 48 color:white; 49 font-weight:bold; 50 font-size:85%; 51 line-height:1.5em; 52 text-align: center; 53 padding: 10px 54}

slick-theme.css

css

1@charset 'UTF-8'; 2/* Slider */ 3.slick-loading .slick-list 4{ 5 background: #fff url('./ajax-loader.gif') center center no-repeat; 6} 7 8/* Icons */ 9@font-face 10{ 11 font-family: 'slick'; 12 font-weight: normal; 13 font-style: normal; 14 15/* ↓この設定が間違っていると矢印が正しく表示されない*/ 16 src: url('../fonts/slick.eot'); 17 src: url('../fonts/slick.eot?#iefix') format('embedded-opentype'), url('../fonts/slick.woff') format('woff'), url('../fonts/slick.ttf') format('truetype'), url('../fonts/slick.svg#slick') format('svg'); 18} 19 20/* NEXTボタン・PREVボタン */ 21.slick-prev, 22.slick-next 23{ 24 font-size: 0; 25 line-height: 0; 26 27 position: absolute; 28 top: 50%; 29 30 display: block; 31 32 width: 20px; 33 height: 20px; 34 padding: auto;/* 初期値 0*/ 35 -webkit-transform: translate(0, -50%); 36 -ms-transform: translate(0, -50%); 37 transform: translate(0, -50%); 38 39 cursor: pointer; 40 41 color: transparent; 42 border: none; 43 outline: none; 44 background: transparent; 45} 46.slick-prev:hover, 47.slick-prev:focus, 48.slick-next:hover, 49.slick-next:focus 50{ 51 color: transparent; 52 outline: none; 53 background: transparent; 54} 55.slick-prev:hover:before, 56.slick-prev:focus:before, 57.slick-next:hover:before, 58.slick-next:focus:before 59{ 60 opacity: 1; 61} 62.slick-prev.slick-disabled:before, 63.slick-next.slick-disabled:before 64{ 65 opacity: .25; 66} 67 68.slick-prev:before, 69.slick-next:before 70{ 71 font-family: 'slick'; 72 font-size: 30px; /* コントローラー(矢印)の大きさ 初期値は20 */ 73 line-height: 1; 74 75 opacity: .75; 76 color: black; /* コントローラー(矢印)の色を指定(初期値がwhiteで背景が白だと隠れてしまうので注意!) */ 77 78 -webkit-font-smoothing: antialiased; 79 -moz-osx-font-smoothing: grayscale; 80} 81 82.slick-prev 83{ 84 left: -35px; /* 前へ戻るコントローラ(矢印)ーの左位置を指定 初期値は-25px*/ 85} 86[dir='rtl'] .slick-prev 87{ 88 right: -25px; 89 left: auto; 90} 91.slick-prev:before 92{ 93 content: '←'; 94} 95[dir='rtl'] .slick-prev:before 96{ 97 content: '→'; 98} 99 100.slick-next 101{ 102 right: -25px; /* 次へ進むコントローラー(矢印)の右位置を指定 初期値は-25px*/ 103} 104[dir='rtl'] .slick-next 105{ 106 right: auto; 107 left: -25px; 108} 109.slick-next:before 110{ 111 content: '→'; 112} 113[dir='rtl'] .slick-next:before 114{ 115 content: '←'; 116} 117 118/* Dots */ 119.slick-dotted.slick-slider 120{ 121 margin-bottom: 70px; /*ドット下マージンを指定 初期値は30px*/ 122} 123 124.slick-dots 125{ 126 position: absolute; 127 bottom: -35px; /*ドットの位置を指定 初期値は-25px*/ 128 129 display: block; 130 131 width: 100%; 132 padding: 0; 133 margin: 0; 134 135 list-style: none; 136 137 text-align: center; 138} 139.slick-dots li 140{ 141 position: relative; 142 143 display: inline-block; 144 145 width: 20px; 146 height: 20px; 147 margin: 0 5px; 148 padding: 0; 149 150 cursor: pointer; 151} 152.slick-dots li button 153{ 154 font-size: 0; 155 line-height: 0; 156 157 display: block; 158 159 width: 20px; 160 height: 20px; 161 padding: 5px; 162 163 cursor: pointer; 164 165 color: transparent; 166 border: 0; 167 outline: none; 168 background: transparent; 169} 170.slick-dots li button:hover, 171.slick-dots li button:focus 172{ 173 outline: none; 174} 175.slick-dots li button:hover:before, 176.slick-dots li button:focus:before 177{ 178 opacity: 1; 179} 180.slick-dots li button:before 181{ 182 font-family: 'slick'; 183 font-size: 15px; /* ドットの大きさ 初期値は10px*/ 184 line-height: 20px; 185 186 position: absolute; 187 top: 0; 188 left: 0; 189 190 width: 20px; 191 height: 20px; 192 193 content: '•'; 194 text-align: center; 195 196 opacity: .25; 197 color: black; 198 199 -webkit-font-smoothing: antialiased; 200 -moz-osx-font-smoothing: grayscale; 201} 202.slick-dots li.slick-active button:before 203{ 204 opacity: .75; 205 color: black; 206} 207

javascript

1jQuery(function($){ 2 $('.slider').each(function(){ 3 $(this).slick({ 4 autoplay:true, 5 autoplaySpeed:5000, 6 dots:true, 7 }); 8 }); 9});

試したこと

slick-theme.cssの中身の値を変更してみたりましたが、IE11のみ矢印の表示が直りませんでした。

補足情報(FW/ツールのバージョンなど)

slick.cssとslick.min.jsはダウンロードしたものから変更等していません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

明示的にbackground-imageのサイズを指定しましょう。
background-size: width height;

投稿2018/07/01 04:21

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問