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

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

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

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

HTML5

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

JavaScript

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

Q&A

解決済

1回答

204閲覧

ホームページにスライドショーを実装したのですが、<prev>, <next>ボタンが見えません。

bussyaah

総合スコア16

CSS3

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

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2019/04/30 05:38

編集2019/04/30 09:46

こんにちは!
お世話になります。

Javascriptの本を読んでプログラミングしてみましたが、
矢印が見えなくて困っています。

あることはあるんです。
F12キーを押して確かにグレイアウトされて存在していますし、
見えないけれども押すこともできます。

・.pngが小さすぎて上に画像が被さっているのではないかと思い200pxと大きくしてみても、見えません。
・背景画像がジャマをしているのではと思い、消してみましたが、これも効果なし。
・そもそも矢印の.pngが小さすぎるのでは?と思い、アイコンを代わりに入れてみても見えません。

どうぞ、お力添えのほど、よろしくお願いいたします。

【 HTML 】

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>エラーページ</title> <link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body id="lecture"> <header> <nav> <ul class="global-nav"> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="about.html">Introduction</a></li> <li class="current"><a href="lecture.html">Lecture</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div class="main-wrapper"> <section> <div class="slide"> <div class="image_box"> <img id="main_image" src="images/computer-2.jpg" alt="PRESENTATION"> </div> <div class="toolbar"> <div class="nav"> <div id="prev"></div> <div id="next"></div> </div> </div> </div> </section> </div> <footer> <small>Copyright © bussyaah All rights reserved.</small> </footer> <script> var images = ['images/computer-2.jpg', 'images/study.jpg']; var current = 0; var changeImage = function(num) { if(current + num >= 0 && current + num < images.length) { current += num; document.getElementById('main_image').src = images[current]; } }; document.getElementById('prev').onclick = function() { changeImage(-1); }; document.getElementById('next').onclick = function() { changeImage(1); }; </script> </body> </html>
```【 CSS 】 @charset "utf-8"; body { margin: 0; padding: 0; color: #ffffff; font-size: 15px; line-height: 2; font-family: 'Helvetica Neue','Helvetica','Avenir','Arial','Hiragino Sans','ヒラギノ角ゴシック','Yu Gothic','メイリオ','MS Pゴシック','MS PGothic'; } img{ vertical-align: bottom; } header{ width: 960px; height: 100px; margin: 0 auto; } .global-nav{ float: right; margin-top: 60px; } .global-nav li{ float: left; margin: 0 20px; font-size: 20px; list-style: none; font-family: 'Bitter', serif; } .gloval-nav li a{ color: #ffffff; } */ #wrap{ clear: both; margin-top: 50px; padding: 20px 0; } .content{ width: 960px; margin: 0 auto; } footer{ text-align: center; color: #ffffff; padding: 20px 0; background-color: transparent; } footer small{ font-size: 12px; } #index .content{ margin-top: 150px; } #lecture{ background-image: url(../images/lecture.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; } #lecture-example{ background-image: url(../images/lecture.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; } #contact{ background-image: url(../images/keyboard.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; } .main-center{ width: 940px; margin: 0 auto; } h1{font-family: 'Bitter', serif; font-size: 36px; border-bottom: 1px solid #cccccc; } h2{font-family: 'Bitter', serif; font-size: 24px; } h3{font-family: 'Bitter', serif; font-size: 20px; } .icon:before{ content: ""; padding-right: 10px; border-left: 7px solid #F0E130; } #about .profile-txt{ width: 540px; float: left; } #about .profile-txt span{ font-weight: bold; } #about .profile-image{ float: left; } .clearfix:after{ content:""; display:block; clear: both; } section{ margin-bottom: 35px; } #about .career th{ width: 150px; padding: 12px 0; } #about .career td{ width: 660px; } table{ border-spacing: 0; border-collapse: collapse; } #index #wrap{ background-color: transparent; margin-top: 0; padding: 0; } a img:hover{ opacity: 0.8; } .section{ margin-right: 50px; } #contact .access table{ width: 460px; height:220px; float: left; background-color: #333333; padding: 20px 50px; opacity: 0.8; } #contact .access th, #contact .access td { text-align: left; vertical-align: top; line-height: 2.5; } #contact .access td{ padding-left: 30px; } #contact .access iframe{ width: 460px; float: right; } #contact .form{ background-color: #333333; padding: 20px 50px; } #contact .form dl dt{ width:165px; padding: 10px 0; float: left; clear: both; } #contact .form dl dd{ padding: 10px 0; } #contact .form .name{ width: 240px; height: 30px; } #contact .form .email{ width: 240px; height: 30px; } #contact .form .tel{ width: 240px; height: 30px; } #contact .form .type{ width: 240px; height: 30px; } #contact .form .message{ width: 660px; height: 150px; } #contact .form button{ background-color: #F0E130; color: #333333; font-size: 20px; font-family: 'MS Mincho'; font-weight: 600; width: 120px; display: block; text-align: center; line-height: 50px; margin-top: 20px; border-radius: 5px; border: 3px solid #F0E130; margin-left:165px; } #contact .form button:hover{ background-color: #333333; color: #F0E130; border: 3px solid #F0E130; cursor: pointer } #contact .form .required:after{ content: "*"; color: #ff0000; } #contact .form .attention{ margin: 20px 0 0 165px; } .current{ border-bottom: 4px solid #F0E130; } #about .btn{ margin: 8px 0 20px 0; } img{ max-width: 100% } .toolbar{ overflow: hidden; text-align: center; } .nav{ display: inline-block; } #prev{ float: left; width: 100px; height: 100px; background: url(images/next.png) no-repeat; } #next{ float: right; width: 100px; height: 100px; background: url(images/prev.png) no-repeat; } .slide{ margin: 50px auto; border: 1px solid #F0E130; width: 960px; height: 600px; background-color: #333333; } #lecture .section{ margin-top: 100px; }

使用画像
背景画像
prev.png
next.png
スライド1:images/computer-2.jpg
スライド2:images/study.jpg

【追加画像:エラーの詳細画面です】
error.png

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

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

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

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

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

guest

回答1

0

ベストアンサー

url(images/next.png)ではなくurl(../images/next.png)に
画像のパスを修正すれば表示されます。

投稿2019/04/30 06:51

yasutomi

総合スコア2937

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

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

bussyaah

2019/04/30 09:48

ご回答ありがとうございます! 階層の理解と指定がきちんとできていなかったのですね。 ありがとうございます。 しかし、理解はしたのですが、実践してみると上手くいきません。 エラー画面を新しく添付しましたので、よろしければご確認よろしくお願いいたします。
yasutomi

2019/04/30 10:28

url(..images/next.png) ではなく url(../images/next.png) です。
bussyaah

2019/04/30 11:01

そういうことだったのですね・・・。 針の穴に目を通すように(?)確認しないといけないと 教訓になりました。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問