Q&A
「java.slider.js」の中身も質問文に追記していただけませんか？あと、矢印およびスライド画像の画像のサイズ（縦横px）も追記してください。（それがそろえば再現確認できると思われます）
htmlとcssを勉強し始めたばかりの初心者です。
スライダーをコピペで実装してみよう、というブログがあったので試してみたのですが、うまくできません。
作りたいのは、複数枚のスライダー(現状は3枚)で、すべて同じ大きさで横並び、左右の画像が少しだけ見切れていて、左右の画像は透過されている(中央を目立たせる為)ものです。※拾い画ですが添付します。
これのボタンを、中央の画像の上に配置したいのですが、ボタンを画像にしようとしたところ、ボタンとして機能しなくなってしまいました。
色々検索してみましたが、そもそもtheme.cssをいじるものなのか、メインのcssをいじるものなのかもわからず(常識的すぎて皆さん書いていないのかも)、困っています。
themeの内容をひとつひとつコピペして検索かけてみましたが、それもうまく答えが出てこなくて、わかりそうでわからない状態です。
まず先に導入したファイルと、コードを記載の後、経緯と理想を書きます。
追加したファイルは下記の通りです。
・java.slider.js
・jquery-3.5.1.min.js
・slick.min.js
・slick-theme.css
・slick.css
※同じフォルダ内にfontsフォルダあり(slick)
各コードは下記の通りです。
●head
<head> . . <link rel="stylesheet" href="./js/slick-theme.css"> <link rel="stylesheet" href="./js/slick.css"> <link rel="stylesheet" href="stylesheet.css"> . . </head>
●body
<body> . . <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="./js/slick.min.js"></script> <script type="text/javascript" src="./js/java.slider.js"></script> . . </body>
●スライダー部分のHTML
<div class="slider mypattern"> <div><img src="./img/slide1.jpg"></div> <div><img src="./img/slide2.jpg"></div> <div><img src="./img/slide3.jpg"></div> </div>
●スライダー部分のcss(stylesheet.css)
.slider { width: 100%;/*数値をいじっても何も変わらない……どこの部分の指定？*/ margin: 0 auto; } .slick-slide img { width: 100%; height: auto; } .mypattern { width: 100%; } .mypattern .slick-slide { margin: 2px; } .mypattern .slick-slide:not(.slick-center) { -webkit-filter: opacity(80%); -moz-filter: opacity(80%); -o-filter: opacity(80%); -ms-filter: opacity(80%); filter: opacity(80%); transition: 0.2s linear; }
●prev/nextボタンを画像にしたくてコピペ（stylesheet.css）
.slick-prev::before { content: url(./img/slide_prev.png); } .slick-next::before { content: url(./img/slide_next.png); } .slick-prev{ left: 110px;/*なぜか右と左で位置がずれる？*/ z-index: 100; } .slick-next{ right: 160px;/*なぜか右と左で位置がずれる？*/ z-index: 100; }
【経緯】
①画像を適用せずにメインで使用しているstylesheet.cssにスライダー部分のcssをそのままコピペした場合
→ボタンが表示されない
(色を#000→#fffにしたり、leftやrightを50-200pxの範囲内でいじってみたり、z-indexを100にしたりしたが、変化無し)
(それっぽいところにカーソルを持っていくと、カーソルは指の形に変化する上、ボタンとして反応するので、見えていないだけで存在はしている)
(横スクロールが発生し、右側だけ余白ができる※ボタンが右側しか存在していない）
(左右の画像はjava.slider.jsのcenterPaddingで'12%'に設定)
②theme.cssの記述をheadから削除すると、スライドの上下にブラウザの標準形式でボタンが出た。
③theme.cssの記述をheadから削除した状態で、ボタンに画像を適用したところ、スライドの上下に出たブラウザの標準形式のボタンの中に、画像が入り込んでしまった。＜■prev＞のような感じ。
④theme.cssの記述をheadに戻した状態で、ボタンに画像を適用したところ、中央の画像の垂直方向真ん中にボタンにしたい画像がきちんと理想通りに表示されたが、ボタンとして機能しなくなってしまった。
(theme.cssを書き換えたりもしてみたが、どこをいじっても変化がなかった)
【どうしたいか】
④の状態でボタンを機能させたい。
そもそも理解が及んでいないのにコピペでやろうとしているのが原因とはわかっているのですが、これが数行程度の書き換えで解決できるような内容でしたら、解決したいと思っています。
また、これをきっかけにもっとscriptの類を勉強していきたいです。
よろしくお願い致します。
追記
●java.slider.jsの中身
$(document).ready(function() { $('.mypattern').slick({ autoplay: true, autoplaySpeed: 5500, speed: 800, dots: false, arrows: true, centerMode: true, centerPadding: '12%', }); });
●矢印サイズ……74×74px
●スライド画像サイズ……960×504px
※本当は中央の画像を960pxで固定し、左右の画像の見切れ幅をウィンドウサイズによって変化するようにしたかったのですが、どこをいじってもうまくいかず、現状のコードではただ画面に対して左右が12％見えるという設定になっています。
ご返信遅くなり申し訳ございません。
今更で大変失礼ですが、内容追記致しました。
結局、初心者では解決まで至らず、とりあえずこの謎は保留して、全体を形にすることを目指して作業しておりました。
ようやくフッターまでできたところですが、ウィンドウサイズによって大幅にレイアウトが崩れてしまうので、まだまだ課題が山積みです……。
ウィンドウサイズの件が落ち着いたら、またこちらの件を調べてみます。
ご丁寧に何度も、本当にありがとうございます。
回答1件
0
ベストアンサー
content: url(./img/slide_prev.png); contentにURLを入れても画像として表示されません。
幅と高さを適切に設定して、background-imageで表示しましょう。
【background-image - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/background-image
追記：
提示されたコードで状況の再現を試みましたが、特に問題なく動いているように見えます。
他のスタイルやスクリプトの影響および、別箇所などでのHTMLの構文エラーなどが無いかを探してみてください。
投稿2020/05/08 07:34
編集2020/05/14 12:34総合スコア69398
すみません、事情により質問した際とは別のパソコンに一時的に変更したのですが、Googleのセキュリティの問題でログインできなかったため、新規アカウントから先にお返事いたします。
パソコンが変わり、通常のブラウザも変わったことで、わかったことがあったので追記します。
前FireFox→今GoogleChrome
まず、現状のChromeでは、質問時に記載した④の状態で、ボタンはしっかり画像で表示された上、きちんとボタンとして動作していました。
それから、あまりの初心者のため勘違いしていたら申し訳ないのですが、contentをbackground-imageに変更してみたところ、画像が消えて、FireFoxのときには確認できなかったデフォルトのボタン（白い丸に＜マーク）が表示されました。
いずれにしても今の環境では作業しにくい為、週明けにまたいつもの環境に戻った際に、ご回答いただいた内容でFireFoxで色々試したいと思います。また後日ご報告いたします。
参考URLきちんと読みます。ありがとうございます。
To: works_nonameさん
> contentにURL
昔はできなかったことだったので、私の思い込みでした、すみません。
※ 試したらできました⇒ https://jsfiddle.net/fsh42j9L/
何度もすみません、コピペでOKのブログから引っ張ってきたのに、なぜcontent表記だったのかが気になって、色々調べていたら、以下のサイトにあたりました。
https://iwb.jp/css-background-content-url-image/
現状Chromeで確認したから、contentでしっかり表示され、かつ機能したということなのでしょうか。
でも上記URLでは疑似要素になっていればFirefoxでも表示可能だと記載されており、実際、画像は表示されました。
機能しない理由がわかりません……。
To: wworkさん
複数IDを持つことは利用規約で禁止されています。
【利用規約｜teratail（テラテイル）】
https://teratail.com/legal
To: wworkさん
Firefoxも対応しているのでできるようです。（試したら･･･のところですでに確認済みです）
入れ違ってしまいました、すみません。
そして偉そうにURLまではっつけて、お気を悪くされたら申し訳ないです。ごめんなさい。
複数IDについて、そうなのですね。教えていただきありがとうございます。
ではこちらでご返信は最後とさせていただき、すぐアカウント削除いたします。
また週明け、いつもの環境でがんばります。ご丁寧に何度もありがとうございます。
追記へのご返信：
たびたびご丁寧なお返事を、誠にありがとうございます。
動くサンプルのURLへアクセスしたところ確認できず（そもそもコードすら表示されず、ずっとクラウドマークがはねている画面のまま）、別のパソコンで確認したらきちんと動いていました。
もしやと思って制作中のページを別のパソコンで確認したら、そちらもきちんと動作していました。
初歩的なことで大変申し訳ないのですが、もしかしてパソコンが古いせいで動作しない、ということでしょうか……。
ちなみに通常使用しているパソコンはMacの10.6.8で、上記の別のパソコンというのは知人のMac(バージョン不明、10.8以降？)です。
ウイルスのこともありますし、web制作を仕事にしたいなら、買い換えを考えるべきですよね。
こんな原因で申し訳ないです。何度も本当にありがとうございます。
しばらく買い換えは難しいので、別のパソコンで動作確認しつつ、進めていきたいと思います。
大変助かりました。たびたび誠にありがとうございました。
追記へのご返信：追記
何度もすみません。不要とは思いますが、参考のためブラウザバージョンを記載しておきます。
FireFox:48.0.2
GoogleChrome:49.0.2623.112 (64-bit)※こちらはMac10.6.8でも動作確認済
Firefoxは現在76.0.1が最新、Chromeは 81.0.4044.138が最新です。MacはOS単位で大きなアップデートが多く、ソフトウェアはほとんど最新のOSにしか対応しません。固定したソフトしか使わないか、古いマシンに最新のOSを入れるか（場合によって重く遅くなるし古いから切り捨てられることもある）、最新のMacを買い続けるタイプの人にしか、Macは向いていない気がします。
ご返信ありがとうございます。
実はMacは私のものではなく、借り物みたいなものなんです。まさしくおっしゃるとおり、重く遅くなるので最新OSはいれない方が良い、と業者に言われて、このような状態になっています。
自宅ではWindowsを使っていますが、 余計な表示の多い画面デザインがそもそも好きではなかった＆仕事でもMaｃを使っているので、自宅もMaｃにしてしまおうかと思っていた頃でした。
kei344様のご意見で、一気にWindowsに傾きました……。買い換える際には買った後のこともよくよく比較検討して、決めたいと思います。
今後のことまでアドバイスいただき、本当に感謝しきりです。誠にありがとうございます。
あなたの回答
tips
プレビュー
