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

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ブラウザのほとんどに搭載されています。

HTML

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

CSS

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

Q&A

解決済

2回答

2192閲覧

スライドショーで流れている画像をクリックするとモーダルウィンドウが開かれるようにしたいです。

DrsriN

総合スコア11

CSS3

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

HTML5

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

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/01/29 01:53

編集2021/02/01 06:58

実現したいこと

スライドショーに拡大機能を付けたいです。

やったこと

スライド機能はcssのみで実装させました。
拡大機能はcssにtransform: scale();を打ち込み、jsのeventlistener(click)で
画像をクリックした時に画像が拡大されるような処理をしようとしました。

html

1<div class="slide" id="makeImg"> 2 <img src="img/app.png" alt="" onclick="zoom('img/app.png')" class="zoom"/> 3 <img src="img/bus.png" alt="" onclick="zoom('img/bus.png')" class="zoom"/> 4 <img src="img/casy.png" alt="" onclick="zoom('img/casy.png')" class="zoom"/> 5 <img src="img/rec.png" alt="" onclick="zoom('img/rec.png')" class="zoom"/> 6</div>

css

1.slide { 2 height: 50%; 3 margin: auto; 4 position: absolute; 5 top: 0; 6 bottom: 0; 7 left: 25%; 8} 9.slide img { 10 display: block; 11 position: absolute; 12 width: inherit; 13 height: inherit; 14 cursor: pointer; 15 opacity: 0; 16 animation: slideAnime 16s ease infinite; 17 box-shadow: 18 0 1.9px 2.5px rgba(0, 0, 0, 0.057), 19 0 5px 6.1px rgba(0, 0, 0, 0.076), 20 0 10.1px 11.4px rgba(0, 0, 0, 0.086), 21 0 19.2px 19.8px rgba(0, 0, 0, 0.092), 22 0 38.4px 34.8px rgba(0, 0, 0, 0.1), 23 0 101px 74px rgba(0, 0, 0, 0.13); 24 } 25.slide img:nth-of-type(1) { animation-delay: 0s } 26.slide img:nth-of-type(2) { animation-delay: 4s } 27.slide img:nth-of-type(3) { animation-delay: 8s } 28.slide img:nth-of-type(4) { animation-delay: 12s } 29@keyframes slideAnime{ 30 0% { opacity: 0 } 31 3% { opacity: 1 } 32 22% { opacity: 1 } 33 25% { opacity: 0 } 34 100% { opacity: 0 } 35} 36@keyframes zoom{ 37 0%{ transform: scale(0,0);} 38 100%{ transform: scale(1.5,1.5);} 39}

js

1document.querySelector(".slide").addEventListener("click" , function(){ 2 document.querySelector(".zoom").style.animation='1.5s ease zoom' 3})

現状

画像スライドは実装出来ましたが、クリックしても拡大はされません。

---------------------------追記---------------------------
イメージ説明
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓スライドショーのように切り替わります↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
イメージ説明

↓↓↓↓↓↓↓↓↓↓↓画像をクリックすると....↓↓↓↓↓↓
イメージ説明

---------------------------追記2(スクロールをcssからjsライブラリのswiperに変更いたしました。)---------------------------

html

1<!-- scrollpaper --> 2 <div id="sp-box" ontouchstart=""> 3 <img src="img/s-c-p.png" alt=""> 4 5 <div class="swiper-container"> 6 <div class="swiper-wrapper"> 7 <div class="swiper-slide"><img src="img/bus.png" alt="Swiper01"></div> 8 <div class="swiper-slide"><img src="img/casy.png" alt="Swiper02"></div> 9 <div class="swiper-slide"><img src="img/app.png" alt="Swiper03"></div> 10 <div class="swiper-slide"><img src="img/rec.png" alt="Swiper04"></div> 11 </div> 12 <div class="swiper-button-prev"></div> 13 <div class="swiper-button-next"></div> 14 </div> 15 </div>

css

1/* sp-box */ 2#sp-box{ 3 height: 40%; 4 text-align: center; 5 position: relative; 6 top: 20%; 7 animation: fluffy 3s ease 1s infinite alternate; 8} 9#sp-box img{ 10 object-fit: cover; 11 height: 100%; 12} 13.swiper-container{ 14 width: 40vh; 15 height: 50%; 16 margin: auto; 17 position: absolute; 18 bottom: 75%; 19 left: 5%; 20} 21.swiper-button-next::after, .swiper-button-prev::after { 22 content: none !important; 23}

javascript

1var swiper = new Swiper('.swiper-container', { 2 navigation: { 3 nextEl: '.swiper-button-next', 4 prevEl: '.swiper-button-prev', 5 }, 6 loop: true, 7 effect: 'fade', 8 autoplay: { 9 delay: 5000, 10 disableOnInteraction: true 11 }, 12 });

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

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

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

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

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

Lhankor_Mhy

2021/01/29 02:54

とりあえず、目についたところは、 ・`1,5s`→`1.5s` ・`.zoom`がない などですが、そもそも根本的に、animationを上書きしたらスライドしなくなるんじゃないかな、と思いました。
DrsriN

2021/01/29 03:53

コメントありがとうございます! ・`1,5s`→`1.5s`>>>こちら修正いたしました! ・`.zoom`がない>>>.zoomはcssに何か書くべきこととかありますでしょうか? なるほど、確かにcssでanimationでスライドさせているので、jsで上書きしてしまうとzoomっに上書きされてスライドしなくなりますね。 これってidやclassが別の物でも言えることなのでしょうか?
Lhankor_Mhy

2021/01/29 04:29

> .zoomはcssに何か書くべきこととかありますでしょうか? HTMLに.zoomに当たる要素がないですよね?
DrsriN

2021/01/29 05:12

ほんとですね... 試しにそのまま付けてみましたが意味ないようです。
Lhankor_Mhy

2021/01/29 05:15

そうでしょうね。 この質問は、どういう回答をすればいいのでしょうか。 「こんな感じにすればいいんじゃない?」という回答でいいでしょうか。
DrsriN

2021/01/29 05:20

そうですね。 現在の私が書いたコードに足りないところ、 もしくはもっといい方法があるとしたら教えていただきたいです。
guest

回答2

0

自己解決

swiper.jsとjQueryのライブラリを複合して制作することができました!

html

1<!-- scrollpaper --> 2 <div id="sp-box" ontouchstart=""> 3 <img src="img/s-c-p.png" alt=""> 4 5 <div class="swiper-container"> 6 <div class="swiper-wrapper"> 7 8 <!---------------------------- コンテンツ1 ----------------------------> 9 <div class="swiper-slide"> 10 <div class="slide-content"> 11 <a class="js-modal-open1" href=""> 12 <img src="img/bus.png" alt="Swiper01"> 13 </a> 14 </div> 15 </div> 16 <!---------------------------- コンテンツ2 ----------------------------> 17 <div class="swiper-slide"> 18 <div class="slide-content"> 19 <a class="js-modal-open2" href=""> 20 <img src="img/app.png" alt="Swiper02"> 21 </a> 22 </div> 23 </div> 24 <!---------------------------- コンテンツ3 ----------------------------> 25 <div class="swiper-slide"> 26 <div class="slide-content"> 27 <a class="js-modal-open3" href=""> 28 <img src="img/casy.png" alt="Swiper03"> 29 </a> 30 </div> 31 </div> 32 <!---------------------------- コンテンツ4 ----------------------------> 33 <div class="swiper-slide"> 34 <div class="slide-content"> 35 <a class="js-modal-open4" href=""> 36 <img src="img/rec.png" alt="Swiper04"> 37 </a> 38 </div> 39 </div> 40 41 </div> 42 </div> 43 </div> 44 45 <!---------------------------- コンテンツ1-modal ----------------------------> 46 <div class="modal js-modal1"> 47 <div class="modal__bg js-modal-close1"></div> 48 <div class="modal__content"> 49 <img src="img/bus.png" alt="Swiper01"> 50 <a class="js-modal-close1" href="">閉じる</a> 51 </div><!--modal__inner--> 52 </div><!--modal--> 53 <!---------------------------- コンテンツ2-modal ----------------------------> 54 <div class="modal js-modal2"> 55 <div class="modal__bg js-modal-close2"></div> 56 <div class="modal__content"> 57 <img src="img/app.png" alt="Swiper02"> 58 <a class="js-modal-close2" href="">閉じる</a> 59 </div><!--modal__inner--> 60 </div><!--modal--> 61 <!---------------------------- コンテンツ3-modal ----------------------------> 62 <div class="modal js-modal3"> 63 <div class="modal__bg js-modal-close3"></div> 64 <div class="modal__content"> 65 <img src="img/casy.png" alt="Swiper03"> 66 <a class="js-modal-close3" href="">閉じる</a> 67 </div><!--modal__inner--> 68 </div><!--modal--> 69 <!---------------------------- コンテンツ4-modal ----------------------------> 70 <div class="modal js-modal4"> 71 <div class="modal__bg js-modal-close4"></div> 72 <div class="modal__content"> 73 <img src="img/rec.png" alt="Swiper04"> 74 <a class="js-modal-close4" href="">閉じる</a> 75 </div><!--modal__inner--> 76 </div><!--modal-->

css

1/* sp-box */ 2#sp-box{ 3 height: 40%; 4 text-align: center; 5 position: relative; 6 top: 20%; 7 animation: fluffy 3s ease 1s infinite alternate; 8} 9#sp-box img{ 10 object-fit: cover; 11 height: 100%; 12} 13.swiper-container{ 14 width: 40vh; 15 height: 50%; 16 margin: auto; 17 position: absolute; 18 bottom: 75%; 19 left: 5%; 20} 21.swiper-button-next::after, .swiper-button-prev::after { 22 content: none !important; 23} 24.swiper-slide img{ 25 width: 70%; 26} 27.slide-content{ 28 margin: 0 auto; 29 padding: 40px; 30 31 box-sizing: border-box; 32 margin: 0; 33 padding: 0; 34} 35.modal{ 36 display: none; 37 height: 100vh; 38 position: fixed; 39 top: 0; 40 width: 100%; 41 42 box-sizing: border-box; 43 margin: 0; 44 padding: 0; 45} 46.modal__content img{ 47 height: 80vh; 48} 49.modal__bg{ 50 background: rgba(0,0,0,0.8); 51 opacity: 0.5; 52 height: 100vh; 53 position: absolute; 54 width: 100%; 55 56 box-sizing: border-box; 57 margin: 0; 58 padding: 0; 59} 60.modal__content{ 61 left: 50%; 62 padding: 40px; 63 position: absolute; 64 top: 50%; 65 transform: translate(-50%,-50%); 66 width: 60%; 67 68 box-sizing: border-box; 69 margin: 0; 70 padding: 0; 71} 72.modal__content a{ 73 color: #fff; 74 position: absolute; 75 right: -9%; 76}

javascript

1$(function(){ 2 $('.js-modal-open1').on('click',function(){ 3 $('.js-modal1').fadeIn(); 4 return false; 5 }); 6 $('.js-modal-close1').on('click',function(){ 7 $('.js-modal1').fadeOut(); 8 return false; 9 }); 10}); 11 12$(function(){ 13 $('.js-modal-open2').on('click',function(){ 14 $('.js-modal2').fadeIn(); 15 return false; 16 }); 17 $('.js-modal-close2').on('click',function(){ 18 $('.js-modal2').fadeOut(); 19 return false; 20}); 21}); 22 23$(function(){ 24 $('.js-modal-open3').on('click',function(){ 25 $('.js-modal3').fadeIn(); 26 return false; 27 }); 28 $('.js-modal-close3').on('click',function(){ 29 $('.js-modal3').fadeOut(); 30 return false; 31 }); 32}); 33 34$(function(){ 35 $('.js-modal-open4').on('click',function(){ 36 $('.js-modal4').fadeIn(); 37 return false; 38 }); 39 $('.js-modal-close4').on('click',function(){ 40 $('.js-modal4').fadeOut(); 41 return false; 42 }); 43});

投稿2021/02/02 02:29

DrsriN

総合スコア11

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

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

0

transition でアニメーションをつければいいと思います。
transition - CSS: カスケーディングスタイルシート | MDN

投稿2021/01/29 05:30

Lhankor_Mhy

総合スコア35865

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

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

Lhankor_Mhy

2021/01/29 05:57

話が違う……つまり、モーダルウィンドウみたいなものが欲しかったのですね。
DrsriN

2021/01/29 06:03

すみません。。。 モーダルウィンドウというのですね。言葉を知りませんでした。 申し訳ないです。 スライドの画像をクリックしたらモーダルウィンドウが開かれるようにしたいです。
DrsriN

2021/01/29 06:30

ライブラリを使う...>>> もうここ二日検索してはライブラリを試してみてはいるのですが、 スライドショー+モーダルウィンドウを実現できるのはまだ見つけれてません。 slick.jsは下にサムネイルがついてしまうのと、ボタンを押さないとスライドしないのが難点でした。 または、dialog...>>> なるほど、ありがとうございます。 まだ試していないので試してみます!
Lhankor_Mhy

2021/01/29 06:39

ライブラリを使いこなすことができないから自製で、というのは「高尾山に登れなかったから富士山に行く」みたいな話だと思いますが、その方針で回答すればいいですか?
DrsriN

2021/01/29 06:46

すごくわかりやすい例えです。 ですが、やりたいこと【スライドショーさせている画像をクリックするとモーダルウィンドウが開く(画像の拡大)】というのを実現できるライブラリーがありません。。。 あれば使いたいのですが,,,
DrsriN

2021/02/01 02:27

返信遅くなり大変申し訳ありません???? 1つずつ試してみたのですが、私の力不足で スライドが何故だか起動しなかったり、画像がどこか行ってしまったりで実装することができません。 フェードインフェードアウトするスライドショー、その画像をクリックするとモーダルウィンドウか何か画像を拡大させる機能、難しいです。。。
Lhankor_Mhy

2021/02/01 03:15

コードを見ないと何とも言えませんが、「スライドが何故だか起動しなかったり」とのことですから、とりあえずスライダーのライブラリを利用できるようになることを、短期的な目標にしてはどうですか?
DrsriN

2021/02/01 04:37

そうですね、そうしてみます!
DrsriN

2021/02/01 06:54

swiperを実行することができました! ここからモーダルウィンドウをつけてみようと思います。
Lhankor_Mhy

2021/02/01 07:00

がんばってください。
DrsriN

2021/02/02 06:20

たくさんのアドバイスありがとうございました!
Lhankor_Mhy

2021/02/02 06:23

ご解決されて何よりです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問