teratail
回答率
85.46%
質問するログイン新規登録
トップレスポンシブWebデザインに関する質問CSSレスポンシブデザインについて

編集履歴

質問編集履歴

6

直し

2023/12/11 08:56

投稿

Huminnebi
Huminnebi

スコア2

test CHANGED
@@ -1 +1 @@
1
- CSSレスポンシブデザインができない
1
+ CSSレスポンシブデザインについて
test CHANGED
@@ -7,136 +7,3 @@
7
7
 
8
8
  初心者で検索やチャットGPTに頼りきりなのでコードを理解しきれていない点があります。
9
9
  たくさん質問して申し訳ないですが、お答えいただけるとありがたいです。
10
-
11
- —————html———————-
12
- <link rel="stylesheet" type="text/css" href="timer/index.css">
13
- <div class="table">
14
- <div class="circle" id="game">
15
- <a href="../game/">
16
- <p id="circleText">ミニゲーム</p>
17
- </a>
18
- </div>
19
-
20
- <!--ここの行に学習時間が代入されます--!>
21
- <div class="square5" id="time">time</div>
22
-
23
- <div class="square1">
24
- <p id="squareText">家</p>
25
- </div>
26
- <div class="square2">
27
- <p id="squareText">通学中</p>
28
- </div>
29
- <div class="square3" id="start">
30
- <p id="squareText">スタート</p>
31
- </div>
32
- <div class="square4" id="stop">
33
- <p id="squareText">ストップ</p>
34
- </div>
35
- </div>
36
-
37
-
38
- ——————css—————————————————-
39
-
40
- /* ミニゲーム */
41
- .circle {
42
- width: 17vw;
43
- height: 11vw;
44
- background-color: #82afa1;
45
- border-radius: 50%;
46
- margin-left: 75vw;
47
- transform: translate(-50%, -330%);
48
- border: 0.5px solid #5b776e; /* 縁取りの色と太さを指定 */
49
- }
50
-
51
- #circleText {
52
- font-size: 3vw;
53
- font-weight: bold;
54
- margin-top: 2vw;
55
- }
56
-
57
- /* 家 */
58
- .square1 {
59
- width: 32vw;
60
- height: 13vw;
61
- background-color: #4d8067e0;
62
- border-radius: 10px; /* 角を丸める */
63
- position: absolute;
64
- top: 30%; /* 上端を画面の中央に配置 */
65
- left: 50%; /* 左端を画面の中央に配置 */
66
- transform: translate(-105%, -220%); /* 中央に配置 */
67
- border: 1px solid #305040e0;
68
- }
69
-
70
- .square1 p {
71
- font-size: 7.5vw;
72
- text-align: center;
73
- }
74
-
75
- /* 通学中 */
76
- .square2 {
77
- width: 32vw;
78
- height: 13vw;
79
- background-color: #4d8067e0;
80
- border-radius: 10px; /* 角を丸める */
81
- position: absolute;
82
- top: 30%;
83
- left: 50%;
84
- transform: translate(-4%, -220%);
85
- border: 1px solid #305040e0;
86
- }
87
-
88
- .square2 p {
89
- font-size: 7.5vw;
90
- text-align: center;
91
- }
92
-
93
- /* スタート */
94
- .square3 {
95
- width: 32vw;
96
- height: 16vw;
97
- background-color: #4d8067e0;
98
- border-radius: 10px; /* 角を丸める */
99
- position: absolute;
100
- top: 30%;
101
- left: 50%;
102
- transform: translate(-105%, 50%);
103
- border: 1px solid #305040e0;
104
- }
105
-
106
- .square3 p {
107
- font-size: 6.5vw;
108
- text-align: center;
109
- margin: 10px;
110
- }
111
-
112
- /* ストップ */
113
- .square4 {
114
- width: 32vw;
115
- height: 16vw;
116
- background-color: #4d8067e0;
117
- border-radius: 10px;
118
- position: absolute;
119
- top: 30%;
120
- left: 50%;
121
- transform: translate(-4%, 50%);
122
- border: 1px solid #305040e0;
123
- }
124
-
125
- .square4 p {
126
- font-size: 6.5vw;
127
- text-align: center;
128
- margin: 10px;
129
- }
130
-
131
- /* タイマー */
132
- .square5 {
133
- width: 80vw;
134
- height: 20vw;
135
- background-color: #1c382ae0;
136
- position: absolute;
137
- top: 50%;
138
- left: 50%;
139
- transform: translate(-50%, -70%);
140
- border-radius: 0;
141
- border: 2px solid #14271de0;
142
- }
レスポンシブWebデザインHTMLCSS

5

Syuusei

2023/12/11 08:46

投稿

Huminnebi
Huminnebi

スコア2

test CHANGED
File without changes
test CHANGED
@@ -8,6 +8,7 @@
8
8
  初心者で検索やチャットGPTに頼りきりなのでコードを理解しきれていない点があります。
9
9
  たくさん質問して申し訳ないですが、お答えいただけるとありがたいです。
10
10
 
11
+ —————html———————-
11
12
  <link rel="stylesheet" type="text/css" href="timer/index.css">
12
13
  <div class="table">
13
14
  <div class="circle" id="game">
@@ -34,7 +35,7 @@
34
35
  </div>
35
36
 
36
37
 
37
- ———————————————————————-
38
+ ——————css—————————————————-
38
39
 
39
40
  /* ミニゲーム */
40
41
  .circle {
レスポンシブWebデザインHTMLCSS

4

Miyazaki

2023/12/11 08:45

投稿

Huminnebi
Huminnebi

スコア2

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
  </a>
17
17
  </div>
18
18
 
19
- <!--ここの行に学習時間が代入されます-->
19
+ <!--ここの行に学習時間が代入されます--!>
20
20
  <div class="square5" id="time">time</div>
21
21
 
22
22
  <div class="square1">
@@ -34,6 +34,7 @@
34
34
  </div>
35
35
 
36
36
 
37
+ ———————————————————————-
37
38
 
38
39
  /* ミニゲーム */
39
40
  .circle {
レスポンシブWebデザインHTMLCSS

3

Html

2023/12/11 08:39

投稿

Huminnebi
Huminnebi

スコア2

test CHANGED
File without changes
test CHANGED
@@ -7,6 +7,32 @@
7
7
 
8
8
  初心者で検索やチャットGPTに頼りきりなのでコードを理解しきれていない点があります。
9
9
  たくさん質問して申し訳ないですが、お答えいただけるとありがたいです。
10
+
11
+ <link rel="stylesheet" type="text/css" href="timer/index.css">
12
+ <div class="table">
13
+ <div class="circle" id="game">
14
+ <a href="../game/">
15
+ <p id="circleText">ミニゲーム</p>
16
+ </a>
17
+ </div>
18
+
19
+ <!--ここの行に学習時間が代入されます-->
20
+ <div class="square5" id="time">time</div>
21
+
22
+ <div class="square1">
23
+ <p id="squareText">家</p>
24
+ </div>
25
+ <div class="square2">
26
+ <p id="squareText">通学中</p>
27
+ </div>
28
+ <div class="square3" id="start">
29
+ <p id="squareText">スタート</p>
30
+ </div>
31
+ <div class="square4" id="stop">
32
+ <p id="squareText">ストップ</p>
33
+ </div>
34
+ </div>
35
+
10
36
 
11
37
 
12
38
  /* ミニゲーム */
レスポンシブWebデザインHTMLCSS

2

CSS

2023/12/11 08:39

投稿

Huminnebi
Huminnebi

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,5 @@
1
1
  アプリの画面を作っています
2
2
  pxではなくvwや％を使っていて、メディアクエリの記述もしています。
3
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-12-11/d5513784-6f94-49f5-aa5c-3294fc1ebf89.png)
4
3
 
5
4
  ①transformの所の指定が100％超えることにも問題がありますか
6
5
  ②marginの使いすぎもよくないと聞きましたが大丈夫でしょうか
@@ -8,3 +7,108 @@
8
7
 
9
8
  初心者で検索やチャットGPTに頼りきりなのでコードを理解しきれていない点があります。
10
9
  たくさん質問して申し訳ないですが、お答えいただけるとありがたいです。
10
+
11
+
12
+ /* ミニゲーム */
13
+ .circle {
14
+ width: 17vw;
15
+ height: 11vw;
16
+ background-color: #82afa1;
17
+ border-radius: 50%;
18
+ margin-left: 75vw;
19
+ transform: translate(-50%, -330%);
20
+ border: 0.5px solid #5b776e; /* 縁取りの色と太さを指定 */
21
+ }
22
+
23
+ #circleText {
24
+ font-size: 3vw;
25
+ font-weight: bold;
26
+ margin-top: 2vw;
27
+ }
28
+
29
+ /* 家 */
30
+ .square1 {
31
+ width: 32vw;
32
+ height: 13vw;
33
+ background-color: #4d8067e0;
34
+ border-radius: 10px; /* 角を丸める */
35
+ position: absolute;
36
+ top: 30%; /* 上端を画面の中央に配置 */
37
+ left: 50%; /* 左端を画面の中央に配置 */
38
+ transform: translate(-105%, -220%); /* 中央に配置 */
39
+ border: 1px solid #305040e0;
40
+ }
41
+
42
+ .square1 p {
43
+ font-size: 7.5vw;
44
+ text-align: center;
45
+ }
46
+
47
+ /* 通学中 */
48
+ .square2 {
49
+ width: 32vw;
50
+ height: 13vw;
51
+ background-color: #4d8067e0;
52
+ border-radius: 10px; /* 角を丸める */
53
+ position: absolute;
54
+ top: 30%;
55
+ left: 50%;
56
+ transform: translate(-4%, -220%);
57
+ border: 1px solid #305040e0;
58
+ }
59
+
60
+ .square2 p {
61
+ font-size: 7.5vw;
62
+ text-align: center;
63
+ }
64
+
65
+ /* スタート */
66
+ .square3 {
67
+ width: 32vw;
68
+ height: 16vw;
69
+ background-color: #4d8067e0;
70
+ border-radius: 10px; /* 角を丸める */
71
+ position: absolute;
72
+ top: 30%;
73
+ left: 50%;
74
+ transform: translate(-105%, 50%);
75
+ border: 1px solid #305040e0;
76
+ }
77
+
78
+ .square3 p {
79
+ font-size: 6.5vw;
80
+ text-align: center;
81
+ margin: 10px;
82
+ }
83
+
84
+ /* ストップ */
85
+ .square4 {
86
+ width: 32vw;
87
+ height: 16vw;
88
+ background-color: #4d8067e0;
89
+ border-radius: 10px;
90
+ position: absolute;
91
+ top: 30%;
92
+ left: 50%;
93
+ transform: translate(-4%, 50%);
94
+ border: 1px solid #305040e0;
95
+ }
96
+
97
+ .square4 p {
98
+ font-size: 6.5vw;
99
+ text-align: center;
100
+ margin: 10px;
101
+ }
102
+
103
+ /* タイマー */
104
+ .square5 {
105
+ width: 80vw;
106
+ height: 20vw;
107
+ background-color: #1c382ae0;
108
+ position: absolute;
109
+ top: 50%;
110
+ left: 50%;
111
+ transform: translate(-50%, -70%);
112
+ border-radius: 0;
113
+ border: 2px solid #14271de0;
114
+ }
レスポンシブWebデザインHTMLCSS

1

コードの掲

2023/12/11 08:16

投稿

Huminnebi
Huminnebi

スコア2

test CHANGED
@@ -1 +1 @@
1
- CSSレスポンシブデザインについて
1
+ CSSレスポンシブデザインができない
test CHANGED
@@ -1,10 +1,10 @@
1
- HTML/CSS のレスポンシブデザインについてです。
2
- HTML/CSS自体学び始めて３ヶ月目でpaizaとProgateで触ったくらいです。
3
- 今はwebアプリの画面を作っていますが、レスポンシブデザインができません。
1
+ アプリの画面を作っています
4
- ※pxではなく%やvwを使って位置を決めています
2
+ pxではなくvwや％を使っていて、メディアクエリの記述もしています。
3
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-12-11/d5513784-6f94-49f5-aa5c-3294fc1ebf89.png)
5
4
 
6
- あまり定着・理解していない状態でアプリの画面制作を初めてしまいました。
5
+ ①transformの所の指定が100％超えることにも問題がありますか
7
- 正直未だにfooterとか理解できてないです。
6
+ ②marginの使いすぎもよくないと聞きましたが大丈夫でしょうか
8
- CSSを調べてもwebサイトの作り方しか出ないので、あまりアプリ画面のイメージが沸かないというのもあります。
7
+ ③アプリ画面とwebサイトを作るHTML/CSSに違いを感じていますが、そこまで差はないですか
9
8
 
9
+ 初心者で検索やチャットGPTに頼りきりなのでコードを理解しきれていない点があります。
10
- 意識すべき点やおすすめの勉強できるモノありましたらお教えいただけるとありがたいです。
10
+ たくさん質問して申し訳ないですが、お答えいただけるとありがたいです。
レスポンシブWebデザインHTMLCSS