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

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

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

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

JavaScript

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

HTML

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

Q&A

解決済

2回答

1200閲覧

スライドショーについて

nekomannma

総合スコア15

CSS3

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

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2020/06/23 05:08

今回は、「https://demo-stork.open-cage.com/」のサイト内にあるスライドショーの作成の仕方について、お聞きしたいと思っています。

現在制作段階なのですが、cssで作成しようか、javascriptで作成するべきかも判断が塚に状況です。
とりあえずでcssで進めていますが、bestがあればぜひ参考にさせてください。

一応、現段階での状況を以下に乗せておきます。
こちらの内容は無視していただいてもかまいません。
どうかよろしくお願いいたします。

html

1 <main> 2 <div class="main-top"> 3 <h1>Happy WordPress Blog</h1> 4 <h2>幸せを運ぶWordPressテーマ「ストーク (こうのとり)」</h2> 5 <div class="thema-btn"> 6 <a href="#">テーマ詳細ページへ</a> 7 </div> 8 </div> 9 <nav class="main-nav"> 10 <div class="main-navs"> 11 <a class="fas fa-chevron-left nav-left"></a> 12 <div class="main-nav-contents"> 13 <div class="main-nav-content"> 14 <a href="#"> 15 <h1>カテゴリー00</h1> 16 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240" 17 height="140"> 18 <p>テンプレート:先頭固定表示</p> 19 </a> 20 </div> 21 <div class="main-nav-content"> 22 <a href="#"> 23 <h1>カテゴリー01</h1> 24 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240" 25 height="140"> 26 <p>極端な例</p> 27 </a> 28 </div> 29 <div class="main-nav-content"> 30 <a href="#"> 31 <h1>カテゴリー02</h1> 32 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240" 33 height="140"> 34 <p>パイラルメディア風</p> 35 </a> 36 </div> 37 <div class="main-nav-content"> 38 <a href="#"> 39 <h1>カテゴリ03</h1> 40 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240" 41 height="140"> 42 <p>記事ページのレイアウト</p> 43 </a> 44 </div> 45 <div class="main-nav-content"> 46 <a href="#"> 47 <h1>カテゴリー04</h1> 48 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240" 49 height="140"> 50 <p>ワンカラム固定ページ</p> 51 </a> 52 </div> 53 <div class="main-nav-content"> 54 <a href="#"> 55 <h1>カテゴリー05</h1> 56 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240" 57 height="140"> 58 <p>wordpress標準機能</p> 59 </a> 60 </div> 61 <div class="main-nav-content"> 62 <a href="#"> 63 <h1>カテゴリー06</h1> 64 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240" 65 height="140"> 66 <p>各種サービス埋込表示</p> 67 </a> 68 </div> 69 <div class="main-nav-content"> 70 <a href="#"> 71 <h1>カテゴリー07</h1> 72 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240" 73 height="140"> 74 <p>twitterソーシャルボタン</p> 75 </a> 76 </div> 77 <div class="main-nav-content"> 78 <a href="#"> 79 <h1>カテゴリー08</h1> 80 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTou2A5SmkaQuYX9ZzXso55iHPLaMKH1QgvWtPmP86pIfnFwIJQ&usqp=CAU" width="240" 81 height="140"> 82 <p>ランディングページ</p> 83 </a> 84 </div> 85 </div> 86 <a class="fas fa-chevron-right nav-right"></a> 87 </div> 88 </nav> 89 </main>

css

1.main-navs { 2 display: flex; 3 margin: 0 auto; 4 width: 1240px; 5 align-items: center; 6} 7 8.main-nav-contents { 9 display: flex; 10 width: 1200px; 11 height: 200px; 12 margin: 30px auto; 13 position: relative; 14 overflow: hidden; 15} 16 17.main-nav-content { 18 margin: 5px; 19 display: block; 20 position: absolute; 21 left: 100%; 22 animation: slideAnime 24s ease infinite; 23} 24 25.main-nav-content a { 26 text-decoration: none; 27 color: black; 28} 29 30.main-nav-content h1 { 31 font-size: 8px; 32 background-color: rgba(255, 255, 0, 0.705); 33 display: inline-block; 34 padding: 5px; 35 top: 0; 36 transform: translateX(172px); 37} 38 39.nav-left , .nav-right { 40 font-size: 30px; 41 cursor: pointer; 42} 43 44.main-nav-content:nth-of-type(1) { animation-delay: 0s } 45.main-nav-content:nth-of-type(2) { animation-delay: 3s } 46.main-nav-content:nth-of-type(3) { animation-delay: 6s } 47.main-nav-content:nth-of-type(4) { animation-delay: 9s } 48.main-nav-content:nth-of-type(5) { animation-delay: 12s } 49.main-nav-content:nth-of-type(6) { animation-delay: 15s } 50.main-nav-content:nth-of-type(7) { animation-delay: 18s } 51.main-nav-content:nth-of-type(8) { animation-delay: 21s } 52 53@keyframes slideAnime { 54 0% { left: 100%;} 55 100% { left: -100%;} 56}

補足:いくつかサイトを調べている状況ですが、animationの根本は理解してきているのですが、
間違い箇所がわからない状態で煮詰まっています。

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

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

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

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

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

guest

回答2

0

こんにちは。

カルーセル(画像スライダー)をどのように実装すべきか、というご質問ですよね。
私見ですが、よほど特殊なことをするのではない限り、自作するべきではないと思います。
出来合いのライブラリを使うことをおすすめします。
以下にいくつかピックアップします。

ピュアCSSなカルーセル
Pure CSS Components

定番のJsライブラリ①
Swiper - The Most Modern Mobile Touch Slider

定番のJsライブラリ②
slick - the last carousel you'll ever need

canvasを使うライブラリについては、カルーセルに特化したライブラリを知りませんので、これで作る場合はCreateJSなどで自作するしかないかと思います。
CreateJS でカルーセルを作ろう - ICS MEDIA

投稿2020/06/23 05:36

編集2020/06/23 05:43
Lhankor_Mhy

総合スコア35869

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

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

kei344

2020/06/23 05:39

「定番のJsライブラリ」が2つとも同じなのは強調ですか?
Lhankor_Mhy

2020/06/23 05:42

あらら???? 修正します。
guest

0

ベストアンサー

https://demo-stork.open-cage.com/のスライドショーの場合、slickを使用したスライドショーのため、同様のものにする場合、slickを使用した方がよいと思います。

  • slick

https://kenwheeler.github.io/slick/

投稿2020/06/23 05:41

jackmiwamiwa

総合スコア395

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

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

nekomannma

2020/06/23 06:54

ご指導ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問