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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

Q&A

解決済

2回答

19348閲覧

slickスライドショーのボタンについて

revoiot

総合スコア188

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

0グッド

0クリップ

投稿2017/04/01 03:50

編集2017/04/01 04:03

slickというjQueryプラグインを使って、レスポンシブデザインでスマホ対応のスライダーをwebsiteに実装したいのですが、矢印の色が白いままで、変更することができません。

「slick 矢印 出ない」、「slick 矢印 色」とchromeで検索することで、たくさんの関連記事が出てきたのですが、ほとんどの記事では、
.slick-prev:before,
.slick-next:before {
color: black;
}

のコードで、defaultが白になっているから、他の色に変えるようにありました。
今回、私はwhiteを黒に変えるため、上記のコードを作成しました。
しかし、変化はありませんでした。
しかし、background-color:blackを打つと、ボタンの周りが見え、ボタンの存在を確認することはできました。

下記の画像を見てもらうとわかると思いますが、擬似要素を利用したブロック要素がボタンの位置があることがわかると思います。次に、私はbutton.slick-prev.slick-arrow::beforeをcssに書き、color:black;を指定しました。しかし、その場所に何の色も現れることもなく、何の変化もありませんでした。

どこに、色を指定すれば、ボタンが表示されるのでしょうか?

念のため、私のURLをここに記載させていただきます。URL

この問題がお分かりになる方大変恐縮ではございますが、ご教授頂けると幸いです。

よろしくお願いします。

イメージ説明

HTML

<ul class="thumb-item"> <li><a href="#"><img src="box img/box mainpic/main-pic.gif" width="100%" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-1.gif" width="100%" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-2.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-3.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-4.gif" alt=""></a></li> </ul> <!-- ↓サムネイル --> <ul class="thumb-item-nav"> <li><a href="#"><img src="box img/box mainpic/main-pic.gif" width="100%" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-1.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-2.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-3.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-4.gif" alt=""></a></li> </ul> コード

CSS

/*左右の矢印の色を変える*/ .slick-prev:before, .slick-next:before { color: black; } /*左右の矢印の位置を変える*/ .slick-next { right: 20px; color: #51aa37; } .slick-prev { left: 25px; color: #51aa37; } /*スライド数のドットの色を変える*/ .slick-dots li.slick-active button:before, .slick-dots li button:before { color: #51aa37; } /*スライド画像の横幅可変*/ img { max-width: 100%; height: auto; } コード

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

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

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

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

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

guest

回答2

0

ベストアンサー

HTML

1<link rel="stylesheet" type="text/css" media="screen and (max-width: 767px)" href="box-sp.css" /> 2 3<link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" /> 4<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" />

とあり、詳細度が同じなので後から書かれた方が優先されているのでは。

投稿2017/04/01 04:55

Lhankor_Mhy

総合スコア35860

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

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

revoiot

2017/04/01 15:39

ご回答ありがとうございます。回答していただいた通り、「cssの書き込みの際の詳細度」について、調べると、「詳細度が同じものがあると、下に位置にするものが優先される」とありました。 大変助かりました。ありがとうございます。
guest

0

提示されたコードだけでは再現のしようが無いですが
slick公式のサンプルでは.slick-prev:before, .slick-next:beforeのcolor指定で変化します。
他のCSSが干渉しているのでは?

投稿2017/04/01 03:56

yuki84web

総合スコア1857

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

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

yuki84web

2017/04/01 11:16

.slick-prev:before, .slick-next:before で変わりましたが… Lhankor_Mhyさんも書いてますが、同じ指定が複数のcssファイルにある場合、後に読み込むcss優先ですよ。
revoiot

2017/04/01 15:40

ご親切にコメントありがとうございます。さきほど、無事解決する事ができました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問