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

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

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

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

Q&A

解決済

1回答

6454閲覧

CSSのみで画像とテキストをスライドショーにしたい

ryota0315

総合スコア25

CSS3

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

0グッド

0クリップ

投稿2017/03/09 22:15

編集2017/03/09 23:15

###前提・実現したいこと
CSSのみでスライドショーを実現させたいのですが、うまく行きません。
画像の上に乗っているテキストも同じようにスライドショーにしたいです。

何がうまくいかない原因なのかを教えていただきたいです。

html

1 <div class="mainPhoto"> 2 <p><span>いのわかる</span>大人<span></span>ヘアサロン</p> 3 <div class="mainshow"> 4 <img src="<?php echo get_template_directory_uri(); ?>/img/main2.jpg" width="960" height="457" alt="" class="slideA"/> 5 <img src="<?php echo get_template_directory_uri(); ?>/img/main_2.jpg" width="960" height="457" alt="" class="slideB"/> 6 </div> 7 </div>

css

1main .mainPhoto{ 2display: block; 3margin: 0 auto; 4width: 100%; 5height: auto; 6max-width: 960px; 7position: relative; 8} 9.mainPhoto p { 10display: inline-block; 11position: absolute; 12top: 20px; 13left: 20px; 14font-family:"Tsukushi A Round Gothic","筑紫A丸ゴシック"; 15font-weight:lighter; 16font-size: 3.6rem; 17text-shadow: 180 0 5px #edf8ff, 190 0 10px #edf8ff, 200 0 15px #edf8ff, 210 0 20px #edf8ff, 220 0 25px #edf8ff, 230 0 30px #edf8ff, 240 0 35px #edf8ff, 250 0 40px #edf8ff, 260 0 45px #edf8ff, 270 0 50px #edf8ff; 28} 29.mainPhoto span { 30font-size: 2.0rem; 31} 32main .mainPhoto{ 33 display: block; 34 margin: 0 auto; 35 width: 100%; 36 height: auto; 37 max-width: 960px; 38 position: relative; 39} 40.mainshow { 41 position:relative; 42} 43.mainshow img { 44 animation-name: album; 45 -webkit-animation-name: album; 46 animation-duration: 10s; 47 -webkit-animation-duration: 10s; 48 animation-iteration-count: infinite; 49 -webkit-animation-iteration-count: infinite; 50 opacity: 0; 51} 52.mainshow .slideA { 53 display: block; 54 margin: 0 auto; 55} 56.mainshow .slideB { 57 position: absolute; 58 top: 0; 59} 60 61@keyframes album { 62 0% { 63 opacity: 0; 64 } 65 66 12.5% { 67 opacity: 1; 68 } 69 70 37.5% { 71 opacity: 1; 72 } 73 50% { 74 opacity: 0; 75 } 76 } 77 78.mainshow img { 79 animation-name: album; 80 animation-duration: 10s; 81 animation-iteration-count: infinite; 82 opacity: 0; 83} 84 85.mainshow .slide2 { 86 animation-delay:5s; 87}

よろしくお願い致します。

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

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

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

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

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

Zuishin

2017/03/09 22:37

手に余るのであればもっと簡単なところから試作を積み重ねて行きましょう。そうすればどの段階でどううまくいかないのかがわかり、問題点を人に尋ねることができます。今のこの質問は単なる丸投げです。
Zuishin

2017/03/09 22:47

あと、余計なお世話だと思いますが、「ホームページをうまく使い切れていないと感じられましたら、2ico-1chi(ニコイチ)にお任せ下さい。 2ico-1chiはホームページ以外にも会社案内、名刺、チラシ、パンフレットなどの印刷物のデザインも行っているホームページプロダクションです」とありますが、初心者マークの質問ずらっと並べてるところで「プロにお任せ下さい」みたいな宣伝しても逆効果では?
ryota0315

2017/03/09 22:58

ご指摘頂きありがとうございます。プロフィールも修正し、個人的に質問もしていきます。
guest

回答1

0

ベストアンサー

こちらの環境では質問者さんのコードが正常に動作しなかったのですが、質問者さんはこのような動作を想像しているのでしょうか?

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .box { 13 position: relative; 14 width: 100%; 15 } 16 17 .box .text { 18 position: absolute; 19 width: 100%; 20 text-align: center; 21 } 22 23 .image img { 24 position: absolute; 25 opacity: 0; 26 -webkit-animation: albumAnimation 6s linear infinite 0s; 27 -moz-animation: albumAnimation 6s linear infinite 0s; 28 -o-animation: albumAnimation 6s linear infinite 0s; 29 -ms-animation: albumAnimation 6s linear infinite 0s; 30 animation: albumAnimation 6s linear infinite 0s; 31 } 32 33 .image > img:nth-child(2) { 34 -webkit-animation-delay: 3s; 35 -moz-animation-delay: 3s; 36 -o-animation-delay: 3s; 37 -ms-animation-delay: 3s; 38 animation-delay: 3s; 39 } 40 41 .text > span { 42 position: relative; 43 top: 100px; 44 color: #000; 45 opacity: 0; 46 -webkit-animation: albumAnimation 6s linear infinite 0s; 47 -moz-animation: albumAnimation 6s linear infinite 0s; 48 -o-animation: albumAnimation 6s linear infinite 0s; 49 -ms-animation: albumAnimation 6s linear infinite 0s; 50 animation: albumAnimation 6s linear infinite 0s; 51 } 52 53 .text > span:nth-child(2) { 54 -webkit-animation-delay: 3s; 55 -moz-animation-delay: 3s; 56 -o-animation-delay: 3s; 57 -ms-animation-delay: 3s; 58 animation-delay: 3s; 59 } 60 61 span.one { 62 position: absolute; 63 z-index: 1; 64 font-size: 50px; 65 } 66 67 span.two { 68 font-size: 50px; 69 } 70 71 @keyframes albumAnimation { 72 0% { 73 opacity: 0; 74 animation-timing-function: ease-in; 75 } 76 12.5% { 77 opacity: 1; 78 animation-timing-function: ease-out; 79 } 80 37.5% { 81 opacity: 1 82 } 83 50% { 84 opacity: 0 85 } 86 100% { 87 opacity: 0 88 } 89 } 90 </style> 91</head> 92<body> 93<div class="box"> 94 <div class="image"> 95 <img src="https://placehold.jp/3d4070/ffffff/960x457.png?text=image1" alt="画像1"> 96 <img src="https://placehold.jp/3d4070/ffffff/960x457.png?text=image2" alt="画像2"> 97 </div> 98 <div class="text"> 99 <span class="one">テキスト1</span> 100 <span class="two">テキスト2</span> 101 </div> 102</div> 103</body> 104</html>

投稿2017/03/10 00:22

s8_chu

総合スコア14731

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

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

ryota0315

2017/03/10 05:17

解決しました! ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問