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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

1585閲覧

CSSアニメーションスライダーを使って、スライド画像3分割の状態をブラウザ幅を変えても均等にしたい【コードあり】

roronoazoro

総合スコア113

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/02/18 12:02

以下の続きの質問になります。

JavaScriptでスライダー作成、自動スライドと、画像を3枚表示

どのブラウザ幅でも「理想の状態」の画像のようにしたいのですが、現状のコードであるcssアニメーションの修正(margin-leftのあたり)でも実現可能でしょうか。

理想の状態(どの画面幅でもこのようにしたい)
イメージ説明

囲みのwidthを100%
イメージ説明

画面幅を変えた場合
イメージ説明

アニメーションのmargin指定のみで、3分割均等(画像の1枚目)のようにすることはできますでしょうか。

css

10% { 2 /* margin-left: -200px; */ 3 margin-left: 33%; 4 } 5 6 100% { 7 /* margin-left: -600px; */ 8 margin-left: -60%; 9 }

全体のコード

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div * { box-sizing: border-box; } div { width: 800px; /* width: 100%; */ height: 200px; overflow: hidden; margin: 0 auto; border: 2px solid orange; } ul { white-space: nowrap; list-style: none; padding: 0; margin: 0; } ul li { display: inline-block; width: 400px; /* min-width: calc(100% / 3); */ /* min-width: 33.333%; */ height: 200px; margin: 0; padding: 0; } li:first-of-type { animation-name: expansion; animation-duration: 1s; animation-timing-function: linear; animation-delay: 3s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; animation-play-state: running; } @keyframes expansion { 0% { margin-left: -200px; } 100% { margin-left: -600px; } } </style> </head> <body> <div> <ul> <li class="slide-list-item"><img src="https://placehold.jp/400x200.png?text={1}" alt=""></li> <li class="slide-list-item"><img src="http://placehold.jp/cc9999/993333/400x200.png?text={2}"" alt=""></li> <li class=" slide-list-item"><img src="https://placehold.jp/400x200.png?text={3}" alt=""></li> <li class="slide-list-item"><img src="http://placehold.jp/cc9999/993333/400x200.png?text={4}"" alt=""></li> </ul> </div> <script src=" ./teratail.js"></script> </body>

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんにちは。

全部パーセンテージで書きなおしては?

css

1 div { 2 width: 100%; 3 /*width: 800px;*/ 4 /* width: 100%; */ 5 /*height: 200px;*/ 6 overflow: hidden; 7 margin: 0 auto; 8 border: 2px solid orange; 9 } 10 11/* 略 */ 12 13 ul li { 14 display: inline-block; 15 width: 50%; 16 /*width: 400px;*/ 17 /* min-width: calc(100% / 3); */ 18 /* min-width: 33.333%; */ 19 /*height: 200px;*/ 20 margin: 0; 21 padding: 0; 22 } 23 24 25/* 略 */ 26 27 28 img { 29 width: 100%; 30 } 31 32 @keyframes expansion { 33 34 0% { 35 margin-left: -25%; 36 /*margin-left: -200px;*/ 37 } 38 39 100% { 40 margin-left: -75%; 41 /*margin-left: -600px;*/ 42 } 43 }

投稿2021/02/19 06:03

Lhankor_Mhy

総合スコア35865

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

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

roronoazoro

2021/02/22 00:33

すみません、ご返信おくれました。 ご回答ありがとうございます! 教えていただいたパーセントの記述でやりたかったことが実現できました。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問