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

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

ただいまの
回答率

88.81%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 462

bussyaah

score 16

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

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

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

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

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

<!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>  
@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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/30 18:48

    ご回答ありがとうございます!

    階層の理解と指定がきちんとできていなかったのですね。
    ありがとうございます。

    しかし、理解はしたのですが、実践してみると上手くいきません。

    エラー画面を新しく添付しましたので、よろしければご確認よろしくお願いいたします。

    キャンセル

  • 2019/04/30 19:28

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

    キャンセル

  • 2019/04/30 20:01

    そういうことだったのですね・・・。

    針の穴に目を通すように(?)確認しないといけないと
    教訓になりました。ありがとうございました!

    キャンセル

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

  • ただいまの回答率 88.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る