teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問JavaScript CSS transform translateX

編集履歴

質問編集履歴

6

訂正

2021/07/03 23:15

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -26,8 +26,8 @@
26
26
 
27
27
 
28
28
  <input type="button" value="Click" onclick="obj.style.transition='all 0.5s ease-in-out';obj.style.transform='translateX(-100%)';">
29
- <div style="width:100%;height:100%">
29
+
30
30
  <div id="obj" style="width:100%;height:100%;background:red;float:left"></div>
31
31
  <div style="width:100%;height:100%;background:blue;float:left"></div>
32
- </div>
32
+
33
33
  ```

5

訂正

2021/07/03 23:15

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -4,23 +4,18 @@
4
4
  うまく動きません
5
5
  position:absoluteは使いたくありません
6
6
 
7
- 下記①のソースを見ていただけますでしょうか
7
+ 下記ソースを見ていただけますでしょうか
8
8
  赤色のボックスをずらしても青色が動くことはありません
9
9
  position:absoluteとすれば青色も動きだします
10
10
 
11
11
  position:absolute以外で動き出す方法はありませんでしょうか
12
12
 
13
- ※追記
14
- 下記②のソースになりますが別途で青色にidを付けて動かそうとしてますが、
15
- これもうまい具合に動いてくれません
16
- すみません、こちら動きましたが、
17
- できれば①のやり方で赤色が移動した分青色を詰めるやり方が知りたいです
13
+ 赤色が移動した分青色を詰めるやり方が知りたいです
18
14
  よろしくお願いいたします
19
15
 
20
16
  ### 該当のソースコード
21
17
 
22
18
  ```ここに言語名を入力
23
- １
24
19
 
25
20
  <style>
26
21
  body,html{
@@ -32,26 +27,7 @@
32
27
 
33
28
  <input type="button" value="Click" onclick="obj.style.transition='all 0.5s ease-in-out';obj.style.transform='translateX(-100%)';">
34
29
  <div style="width:100%;height:100%">
35
- <div id="obj" style="width:90%;height:100%;background:red;float:left"></div>
30
+ <div id="obj" style="width:100%;height:100%;background:red;float:left"></div>
36
- <div style="width:10%;height:100%;background:blue;float:left"></div>
31
+ <div style="width:100%;height:100%;background:blue;float:left"></div>
37
32
  </div>
38
- ```
39
-
40
-
41
- ```ここに言語を入力
42
- ２
43
-
44
- <style>
45
- body,html{
46
- height:100%;
47
- margin:0;
48
- }
49
- </style>
50
-
51
-
52
- <input type="button" value="Click" onclick="obj.style.transition='all 0.5s ease-in-out';obj2.style.transition='all 0.5s ease-in-out';obj.style.transform='translateX(-900%)';obj2.style.transform='translateX(-90%)'">
53
- <div style="width:100%;height:100%">
54
- <div id="obj" style="width:90%;height:100%;background:red;float:left"></div>
55
- <div id="obj2" style="width:10%;height:100%;background:blue;float:left"></div>
56
- </div>
57
33
  ```

4

追記

2021/07/03 23:13

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -10,9 +10,10 @@
10
10
 
11
11
  position:absolute以外で動き出す方法はありませんでしょうか
12
12
 
13
+ ※追記
13
14
  下記②のソースになりますが別途で青色にidを付けて動かそうとしてますが、
14
15
  これもうまい具合に動いてくれません
15
-
16
+ すみません、こちら動きましたが、
16
17
  できれば①のやり方で赤色が移動した分青色を詰めるやり方が知りたいです
17
18
  よろしくお願いいたします
18
19
 
@@ -48,7 +49,7 @@
48
49
  </style>
49
50
 
50
51
 
51
- <input type="button" value="Click" onclick="obj.style.transition='all 0.5s ease-in-out';obj2.style.transition='all 0.5s ease-in-out';obj.style.transform='translateX(-100%)';obj2.style.transform='translateX(-90%)'">
52
+ <input type="button" value="Click" onclick="obj.style.transition='all 0.5s ease-in-out';obj2.style.transition='all 0.5s ease-in-out';obj.style.transform='translateX(-900%)';obj2.style.transform='translateX(-90%)'">
52
53
  <div style="width:100%;height:100%">
53
54
  <div id="obj" style="width:90%;height:100%;background:red;float:left"></div>
54
55
  <div id="obj2" style="width:10%;height:100%;background:blue;float:left"></div>

3

追記

2021/07/03 23:00

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  position:absolute以外で動き出す方法はありませんでしょうか
12
12
 
13
- 下記②のソースになりますが別途で青色を付けて動かそうとしてますが、
13
+ 下記②のソースになりますが別途で青色にidを付けて動かそうとしてますが、
14
14
  これもうまい具合に動いてくれません
15
15
 
16
16
  できれば①のやり方で赤色が移動した分青色を詰めるやり方が知りたいです

2

訂正

2021/07/03 22:56

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -29,7 +29,7 @@
29
29
  </style>
30
30
 
31
31
 
32
- <input type="button" value="Click" onclick="obj.style.transition='all 0.5s ease-in-out';obj2.style.transition='all 0.5s ease-in-out';obj.style.transform='translateX(-100%)';">
32
+ <input type="button" value="Click" onclick="obj.style.transition='all 0.5s ease-in-out';obj.style.transform='translateX(-100%)';">
33
33
  <div style="width:100%;height:100%">
34
34
  <div id="obj" style="width:90%;height:100%;background:red;float:left"></div>
35
35
  <div style="width:10%;height:100%;background:blue;float:left"></div>

1

追記

2021/07/03 22:55

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -29,7 +29,7 @@
29
29
  </style>
30
30
 
31
31
 
32
- <input type="button" value="Click" onclick="obj.style.transition='all 0.5s ease-in-out';obj.style.transform='translateX(-100%)';">
32
+ <input type="button" value="Click" onclick="obj.style.transition='all 0.5s ease-in-out';obj2.style.transition='all 0.5s ease-in-out';obj.style.transform='translateX(-100%)';">
33
33
  <div style="width:100%;height:100%">
34
34
  <div id="obj" style="width:90%;height:100%;background:red;float:left"></div>
35
35
  <div style="width:10%;height:100%;background:blue;float:left"></div>
@@ -48,7 +48,7 @@
48
48
  </style>
49
49
 
50
50
 
51
- <input type="button" value="Click" onclick="obj.style.transition='all 0.5s ease-in-out';obj.style.transform='translateX(-100%)';obj2.style.transform='translateX(-90%)'">
51
+ <input type="button" value="Click" onclick="obj.style.transition='all 0.5s ease-in-out';obj2.style.transition='all 0.5s ease-in-out';obj.style.transform='translateX(-100%)';obj2.style.transform='translateX(-90%)'">
52
52
  <div style="width:100%;height:100%">
53
53
  <div id="obj" style="width:90%;height:100%;background:red;float:left"></div>
54
54
  <div id="obj2" style="width:10%;height:100%;background:blue;float:left"></div>