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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1690閲覧

html, CSSでスライドショー。三枚目以降が表示されない

Kabocha_

総合スコア10

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/05/24 10:21

htmlとCSSを使ってスライドショーを完成させたいのですが、なぜか一枚目二枚目が流れた後の写真が表示されません。

一枚目と二枚目のコーディングと変わらずやったつもりだったのですが、三枚目のroad.JPGと4枚目のweb4.jpegの二つがうまく表示されず何も出てきません。

該当のソースコード

html

1<html> 2 3<head> 4 <meta charset = "UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet"> 7 8 <link rel="stylesheet" href="./scss/style.css"> 9 <title>NAVIGATION</title> 10</head> 11 12 13<body> 14 <slider> 15 <slide><p>Slide 1</p></slide> 16 <slide><p>Slide 2</p></slide> 17 <slide><p>Slide 3</p></slide> 18 <slide><p>Slide 4</p></slide> 19 20 </slider> 21 22</body>

該当のソースコード

CSS

1{ 2 margin: 0px; 3 padding: 0px; 4 box-sizing: border-box; 5} 6 7body{ 8 background: #37B3A8; 9} 10 11 12h{ 13 font-family: 'Nanum Gothic', sans-serif; 14 background-color: #37B3A8; 15 color: aliceblue; 16 text-align: center; 17} 18div { 19 max-width: 50%; 20 margin: 0 auto; 21} 22 23 24slider{ 25 display: block; 26 width: 100%; 27 height: 100%; 28 background-color: black; 29 animation: slide 12s infinite; 30 overflow: hidden; 31 position: absolute; 32} 33 34slider > * { 35 position: absolute; 36 display: block; 37 width: 100%; 38 height: 100%; 39 background: #1f1f1f; 40 animation: slide 12s infinite; 41 overflow: hidden; 42} 43 44slide:nth-child(1){ 45 left: 0%; 46 animation-delay: -1s; 47 background-image: url(/image/name.JPG); 48 background-size: cover; 49 background-position: center; 50} 51 52slide:nth-child(2){ 53 animation-delay: 2s; 54 background-image: url(/image/rainbow.JPG); 55 background-size: cover; 56 background-position: center; 57 left: 100%; 58} 59 60slide:nth-child(3){ 61 left: 0%; 62 animation-delay: 5s; 63 background-image: url(/image/road.JPG); 64 background-size: cover; 65 background-position: center; 66 left: 100% 67} 68 69slide:nth-child(4){ 70 left: 0%; 71 animation-delay: 8s; 72 background-size: cover; 73 background-image: url(/image/web4.jpeg); 74 background-position: center; 75 left:100%; 76} 77 78slide p { 79 font-family: Comfortaa; 80 font-size: 35px; 81 text-align: center; 82 display: inline-block; 83 width: 100%; 84 margin-top: 340px; 85 color: #fff; 86} 87 88@keyframes slide { 89 0% { left: 100%; width: 100%; } 90 5% { left: 0%; } 91 25% { left: 0%; } 92 30% { left: -100%; width: 100%; } 93 31% { left: -100%; width: 0%; } 94 100% { left: 100%; width: 0%; } 95} 96

補足情報

実際は、ナビゲーションバーもついているのですがその部分のhtmlとcssの部分は長いので省いています。
初めての質問なので至らない点が多々あるかもしれないですが、よろしくお願いします。

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

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

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

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

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

guest

回答2

0

CSSを正しく記述すれば表示されます。

CSS

1{ 2 margin: 0px; 3 padding: 0px; 4 box-sizing: border-box; 5}

投稿2019/05/24 10:30

yasutomi

総合スコア2937

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

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

Kabocha_

2019/05/25 12:11

ご回答有難うございました。
guest

0

自己解決

sliderのCSS部分に不必要な秒数が含まれていました。

'```css
slider{
display: block;
width: 100%;
height: 100%;
background-color: black;
animation: slide 12s infinite;
overflow: hidden;
position: absolute;
}

これで無事全ての写真が表示されるようになりました。

投稿2019/05/25 12:14

Kabocha_

総合スコア10

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

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

yasutomi

2019/05/25 12:18

コードが正しくないため修正をお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問