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

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

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

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

HTML5

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

jQuery

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

Q&A

解決済

2回答

3057閲覧

スライドショーの矢印の配置

revoiot

総合スコア188

CSS3

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

HTML5

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

jQuery

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

0グッド

0クリップ

投稿2017/03/28 07:06

編集2017/03/28 10:16

SwiperやほかにもWebsiteに載っているJqueryのプラグインはありますが、スライドショーで不具合が生じたときに、出来れば自分で直したいと考えています。そこで私は、スライドショーについて、本を使い勉強しているところです。

今回は、jQuery最高の教科書という本から引っ張ってきたjQueryのプラグインを利用して、スライドショーを作りたいのですが、ナビの矢印を位置設定を行う際、左右の矢印が一緒に動いてしまい、困っています。

この教科書では、サンプルで大き目の画像を使用しておりましたので、幅高さを適宣変えました。

.slideshow-nav .prev img{
margin-left:-200px;
}
このコードのmarginの値を変えた結果です。

下記にある画像をみていただくとわかると思いますが、左右の矢印が離れることなく、お互い近くにある状態です。この左右の矢印はそれぞれ違う画像に保存されており、htmlでもクラス分けされています。

理想としては、スライドショーの左右に配置したいと考えています。

どうすれば、左右の矢印を同時に動かさず、スライドショーの左右に配置できるでしょうか?

大変恐縮ですが、この問題がわかる方、ご教授いただけると幸いです。

念のため、いかに私のwebsiteのURLを添付させていただきます。
URL

よろしくお願いします。

HTML

<div class="slideshow"> <div class="slideshow-slides"> <a href="#" class="slide"><img src="box img/box slide/slide-1.gif" alt="" width="161px" height="88px"></a> <a href="#" class="slide"><img src="box img/box slide/slide-2.gif" alt="" width="161px" height="88px"></a> <a href="#" class="slide"><img src="box img/box slide/slide-3.gif" alt="" width="161px" height="88px"></a> <a href="#" class="slide"><img src="box img/box slide/slide-4.gif" alt="" width="161px" height="88px"></a> </div> <div class="slideshow-nav"> <a href="#" class="prev"><img src="box img/box slide/arrow-L.gif" alt="" width="36px" height="37px"></a> <a href="#" class="next"><img src="box img/box slide/arrow-R.gif" alt="" width="36px" height="37px"></a> </div> </div>

CSS

.slideshow { height: 88px; min-width: 161px; overflow: hidden; position: relative; } .slideshow-slides { height: 100%; position: absolute; width: 100%; /* left は JavaScript で指定 */ } .slideshow-slides .slide { height: 100%; overflow: hidden; position: absolute; width: 100%; /* left は JavaScript で指定 */ } .slideshow-slides .slide img { left: 50%; margin-left: -80px; position: absolute; } .slideshow-nav .prev img{ margin-left:-200px; }

イメージ説明

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

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

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

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

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

guest

回答2

0

ベストアンサー

css

1.slideshow { 2 /*追加*/ 3 position: relative; 4} 5.slideshow-nav a { 6 /*追加*/ 7 position: absolute; 8 top: 10px; 9} 10.prev { 11 /*追加*/ 12 left: -10px; 13} 14.next { 15 /*追加*/ 16 left: 10px; 17} 18

これで一応ナビゲーションバーは移動しました。
細かい調整はしてください。

webで公開されているものでも勉強は出来ますし
他に使っている人がいる可能性もありますから早く解決する事が出来ます。
時間ばかり過ぎて勿体ないと思いますけどね…。
早く解決出来れば悩んでいた時間を別の事に使えるわけで。

投稿2017/03/28 14:49

編集2017/03/28 15:12
yuki84web

総合スコア1857

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

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

revoiot

2017/03/29 09:48

ご回答いただきありがとうございます。 語弊を招く言い方をしてしまい。大変申し訳ございません。 私は、基本的にwebsiteにあるブログなどを用いて勉強しているのですが、そのブログからjQuery最高の教科書を使えば、スライダーを本質的に理解できると書かれていたため、現在スライダーに関しては、本の情報とwebsiteの情報の両方を使いながら勉強しています。 回答者様のおっしゃる通り、この本を読んで、自分が取り組もうとしているスライダーをブログの記事に説明されている可能性があるとは思うのですが、残念ながら、私が見た限りでは、見当たりませんでした。 しかし、今回の件のように、何度も同じ質問をしてまわぬように、勉強方法の改善や質問の仕方の改善に取り組んでいくつもりです。 大変恐縮ではございますが、最後に1点質問がございます。 今回いただいた回答をレスポンシブデザイン対応で、拡大表示の際、矢印が動かないようにするにはどうすればいいでしょうか?
yuki84web

2017/03/30 04:00

それをやりたいなら幅固定のブロック要素を作り、それに対して相対位置指定すれば良いでしょう。
revoiot

2017/03/30 08:51 編集

ご回答いただき、ありがとうございます。さきほど、回答者様がおっしゃっていただいた通り、相対配置することで改善することができました。 本当はご回答をいただいたお二方にベストアンサーをさし上げたかったのですが、今回コメントを先にいただいたyuki84webさんをベストアンサーとさせていただきます。 ご協力いただきありがとうございました。
guest

0

.nextクラス下のimgの位置をright:とかで指定すればいいと思うのですが、それではうまくいきませんか?

####追記
こうとか? 正しいやり方か自信はありませんが。

CSS

1.slideshow-nav { 2 border: 1px solid yellow; 3 position: relative; /* .prevと.nextの基点 */ 4} 5.slideshow-nav .prev{ 6 border: 1px solid green; 7 position: absolute; 8 top: 0; 9 left: 0; 10} 11.slideshow-nav .next{ 12 border: 1px solid red; 13 position: absolute; 14 top: 0; 15 right: 0; 16}

投稿2017/03/28 10:50

編集2017/03/28 12:09
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

revoiot

2017/03/28 11:21

コメントいただきありがとうございます。 .slideshow .slideshow-nav .next img { right:50px } と指定したのですが、変化は見られませんでした。
revoiot

2017/03/29 09:49 編集

大変親切にご回答ありがとうございます。 色線付きでご回答いただいたおかげで、今後の自分の勉強の仕方の改善につながりました。次に何か躓いたときは、developertoolに加え、要素に色を付けて解決を試みてみようと思います。 非常にわかりやすく説明していただき、大変感謝しております。 大変恐縮ではございますが、最後に1点質問がございます。 私が今製作してるwebsiteはレスポンシブデザイン対応にしたいと考えております。 回答者様のおかげ様で矢印の位置を指定することはできたのですが、拡大表示した際、矢印の位置が離れていってしまいます。今回ナビの親要素にrelative、子要素にabsoluteをしてしただいたと思うのですが、absoluteを指定された要素はrelativeを指定された要素に比べて、空中に浮いているのような状態(あるwebsiteの情報より)であるため、CSSの.slideshow-nav .nextにmargin-left:30pxなどを入れても、いまいち効果がありません。 どのようにすれば、拡大表示した際、矢印の位置を一定の場所に指定することができるでしょうか? コメントいただけると幸いです。 よろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問