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

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

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

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

HTML5

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

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

Q&A

1回答

731閲覧

CSSだけで実装したスライダーの初期表示位置を真ん中にしたい

wolf2

総合スコア19

CSS3

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

HTML5

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

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

0グッド

0クリップ

投稿2022/05/28 06:12

表題の通りCSS3 HTML5だけを仕様して、SPでアクセスした場合のみ
表示されるスライダーを実装しており、ひとまずスライダーの
大枠は完成したのですが初期表示位置を一番左側の画像の位置から変えられず困っています。

こちらの件詳しい方がいらっしゃいましたらアイデアをお貸し頂けないでしょうか。
CSS3のみで実装できれば嬉しいですが、難しい場合js jqueryを利用しても大丈夫です。
ただ、運用コスト実装コストの面からプラグインの利用はしない方針です。

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

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8</head> 9<body> 10 <div class="carousel"> 11 <ul class="carousel-area"> 12 <li class="carousel-list"><img class="carousel-img" src="img/img-shop01.jpeg" alt=""></li> 13 <li class="carousel-list"><img class="carousel-img" src="img/img-shop02.jpeg" alt=""></li> 14 <li class="carousel-list"><img class="carousel-img" src="img/img-shop03.jpeg" alt=""></li> 15 <li class="carousel-list"><img class="carousel-img" src="img/img-shop04.jpeg" alt=""></li> 16 </ul> 17 </div> 18</body> 19</html> 20 21<style> 22 23 @media screen and (max-width: 600px) { 24 * { 25 margin: 0; 26 padding: 0; 27 box-sizing: border-box; 28 list-style: none; 29 } 30 .carousel { 31 width: 600px; 32 height: calc(600px * 0.5625); 33 margin: 0 auto; 34 } 35 .carousel-area { 36 width: 3150px; 37 height: 100%; 38 display: flex; 39 } 40 .carousel-list { 41 width: 600px; 42  height: calc(600px * 0.5625); 43 margin-right: 30px; 44 } 45 .carousel-img { 46 width: 100%; 47 height: 100%; 48 } 49 .carousel { 50 width: 300px; 51 height: calc(300px * 0.5625); 52 margin: 0; 53 } 54 .carousel-area { 55 width: 1000px; 56 } 57 .carousel-list { 58 width: 300px; 59 height: calc(300px * 0.5625); 60 margin-right: 0; 61 } 62 } 63</style>

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

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

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

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

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

Lhankor_Mhy

2022/05/30 02:41

ご提示のコードを試してみましたが、画像が横並びになるだけで、カルーセルとして機能しませんでした。 おそらく、ご提示の部分には原因はなさそうに思います。 ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。 問題再現の手順をもう少し詳しく書いていただけますか?
guest

回答1

0

開発ブラウザがEdgeであれば「開発者ツール」の「要素」、Chromeであれば「デベロッパーツール」の「Elements」でページ内の各要素のスタイル適用状況確認一時的なスタイル変更が可能ですが、確認されていますか?

投稿2022/06/01 04:19

kinkin334

総合スコア62

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問