teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

コードが微妙にクラス名が違っていたりしたので修正しました

2020/08/04 02:13

投稿

nomura02
nomura02

スコア133

title CHANGED
@@ -1,1 +1,1 @@
1
- レスポンシブ対応の各要素の幅指定について(修正版)
1
+ レスポンシブ対応の各要素の幅指定について(修正版2)
body CHANGED
@@ -10,7 +10,7 @@
10
10
  ```html
11
11
  <div id="about">
12
12
  <section class="about container">
13
- <a name="look">
13
+ <a name="look">→これは、上のヘッダー部分でlinkを張っていて、そのリンク先です。
14
14
  <div class="box3">
15
15
  <h2 class="h2">About
16
16
  <div>私の自己紹介</div>
@@ -102,12 +102,12 @@
102
102
  }
103
103
  }
104
104
 
105
- .image_woman {
105
+ .image_me {
106
106
  width: 100%;
107
107
  }
108
108
 
109
109
  @media (max-width: 667px) {
110
- .image_woman {
110
+ .image_me {
111
111
  width: 100%;
112
112
  }
113
113
  }

2

私が実装したいことを実装している参考URLを記載しました。

2020/08/04 02:12

投稿

nomura02
nomura02

スコア133

title CHANGED
File without changes
body CHANGED
@@ -3,6 +3,8 @@
3
3
  今、レスポンシブとSass、jQueryをメインに勉強しています。
4
4
 
5
5
  ### やりたいこと:パソコンで徐々に幅を小さくしたときもその動きと連動して徐々に画面に収まってくれるようにしたい。
6
+ https://stand-4u.com/web/javascript/jquery-method.html
7
+ ↑このページのように、幅をPCで動かしたときも、ちゃんとすべての内容物がおさまってくれるようになっている感じ
6
8
 
7
9
  ### 実際のコード
8
10
  ```html

1

Sassで書いていたので、コンパイル後のCSSに記載しなおしました!

2020/08/04 01:01

投稿

nomura02
nomura02

スコア133

title CHANGED
@@ -1,1 +1,1 @@
1
- レスポンシブ対応の各要素の幅指定について
1
+ レスポンシブ対応の各要素の幅指定について(修正版)
body CHANGED
@@ -26,67 +26,89 @@
26
26
 
27
27
  ```CSS
28
28
  .about {
29
- width:1000px;
30
- margin: 0 auto;
31
- margin-bottom: 145px;
29
+ margin-bottom: 145px;
30
+ display: -webkit-box;
31
+ display: -ms-flexbox;
32
- display: flex;
32
+ display: flex;
33
+ -webkit-box-pack: justify;
34
+ -ms-flex-pack: justify;
33
- justify-content: space-between;
35
+ justify-content: space-between;
36
+ -webkit-box-align: center;
37
+ -ms-flex-align: center;
34
- align-items: center;
38
+ align-items: center;
35
- @include sp{
36
- flex-direction: column;
37
- margin-bottom: 130px;
38
- padding: 0 15px;
39
- }
40
39
  }
41
40
 
41
+ @media (max-width: 667px) {
42
+ .about {
43
+ -webkit-box-orient: vertical;
44
+ -webkit-box-direction: normal;
45
+ -ms-flex-direction: column;
46
+ flex-direction: column;
47
+ margin-bottom: 130px;
48
+ padding: 0 15px;
49
+ }
50
+ }
51
+
42
52
  .box3 {
43
- border: solid 1px #707070;
53
+ border: solid 1px #707070;
44
- background-color: #F0F0F0;
54
+ background-color: #F0F0F0;
45
- width: 315px;
55
+ width: 315px;
46
- padding: 40px;
56
+ padding: 40px;
47
- @include sp{
48
- background-color: #fff;
49
- width: auto;
50
- border: none;
51
- padding: 0;
52
- }
57
+ }
53
58
 
59
+ @media (max-width: 667px) {
54
- h2 {
60
+ .box3 {
55
- font-size: 64px;
56
- margin-bottom: 30px;
61
+ background-color: #fff;
62
+ width: auto;
63
+ border: none;
64
+ padding: 0;
65
+ }
66
+ }
57
67
 
58
- @include sp{
68
+ .box3 h2 {
59
- font-size: 38px;
69
+ font-size: 64px;
70
+ margin-bottom: 30px;
60
- }
71
+ }
61
- }
62
72
 
73
+ @media (max-width: 667px) {
63
- h3 {
74
+ .box3 h2 {
64
- font-size: 24px;
75
+ font-size: 38px;
65
- margin-bottom: 30px;
66
- @include sp{
67
- font-size: 20px;
68
- margin-bottom: 20px;
69
- }
76
+ }
70
- }
77
+ }
71
78
 
72
- p {
73
- line-height: 1.8;
74
- @include sp{
79
+ .box3 h3 {
75
- font-size: 12px;
80
+ font-size: 24px;
76
- line-height: 1.5;
77
- margin-bottom: 30px;
81
+ margin-bottom: 30px;
78
- }
79
- }
80
82
  }
81
83
 
84
+ @media (max-width: 667px) {
82
- .image_me {
85
+ .box3 h3 {
83
- width: 100%;
86
+ font-size: 20px;
84
- @include sp{
85
- width: 100%;
87
+ margin-bottom: 20px;
86
- }
88
+ }
87
89
  }
88
90
 
91
+ .box3 p {
92
+ line-height: 1.8;
89
93
  }
94
+
95
+ @media (max-width: 667px) {
96
+ .box3 p {
97
+ font-size: 12px;
98
+ line-height: 1.5;
99
+ margin-bottom: 30px;
100
+ }
101
+ }
102
+
103
+ .image_woman {
104
+ width: 100%;
105
+ }
106
+
107
+ @media (max-width: 667px) {
108
+ .image_woman {
109
+ width: 100%;
110
+ }
111
+ }
90
112
  ```
91
113
 
92
114
  ### 困ってること
@@ -100,67 +122,91 @@
100
122
 
101
123
  ```CSS
102
124
  .about {
103
- width: auto;
125
+ width: auto;
104
- margin: 0 auto;
126
+ margin: 0 auto;
105
- margin-bottom: 145px;
127
+ margin-bottom: 145px;
128
+ display: -webkit-box;
129
+ display: -ms-flexbox;
106
- display: flex;
130
+ display: flex;
131
+ -ms-flex-pack: distribute;
107
- justify-content: space-around;
132
+ justify-content: space-around;
108
- padding: 0 5%;
133
+ padding: 0 5%;
134
+ -webkit-box-align: center;
135
+ -ms-flex-align: center;
109
- align-items: center;
136
+ align-items: center;
110
- @include sp{
111
- flex-direction: column;
112
- margin-bottom: 130px;
113
- padding: 0 15px;
114
- }
115
137
  }
116
138
 
139
+ @media (max-width: 667px) {
140
+ .about {
141
+ -webkit-box-orient: vertical;
142
+ -webkit-box-direction: normal;
143
+ -ms-flex-direction: column;
144
+ flex-direction: column;
145
+ margin-bottom: 130px;
146
+ padding: 0 15px;
147
+ }
148
+ }
149
+
117
150
  .box3 {
118
- border: solid 1px #707070;
151
+ border: solid 1px #707070;
119
- background-color: #F0F0F0;
152
+ background-color: #F0F0F0;
120
- width: 50%;
153
+ width: 50%;
121
- padding: 40px;
154
+ padding: 40px;
122
- @include sp{
123
- background-color: #fff;
124
- width: auto;
125
- border: none;
126
- padding: 0;
127
- }
155
+ }
128
156
 
157
+ @media (max-width: 667px) {
129
- h2 {
158
+ .box3 {
130
- font-size: 64px;
131
- margin-bottom: 30px;
159
+ background-color: #fff;
160
+ width: auto;
161
+ border: none;
162
+ padding: 0;
163
+ }
164
+ }
132
165
 
133
- @include sp{
166
+ .box3 h2 {
134
- font-size: 38px;
167
+ font-size: 64px;
168
+ margin-bottom: 30px;
135
- }
169
+ }
136
- }
137
170
 
171
+ @media (max-width: 667px) {
138
- h3 {
172
+ .box3 h2 {
139
- font-size: 24px;
173
+ font-size: 38px;
140
- margin-bottom: 30px;
141
- @include sp{
142
- font-size: 20px;
143
- margin-bottom: 20px;
144
- }
174
+ }
145
- }
175
+ }
146
176
 
147
- p {
148
- line-height: 1.8;
149
- @include sp{
177
+ .box3 h3 {
150
- font-size: 12px;
178
+ font-size: 24px;
151
- line-height: 1.5;
152
- margin-bottom: 30px;
179
+ margin-bottom: 30px;
153
- }
154
- }
155
180
  }
156
181
 
182
+ @media (max-width: 667px) {
183
+ .box3 h3 {
184
+ font-size: 20px;
185
+ margin-bottom: 20px;
186
+ }
187
+ }
188
+
189
+ .box3 p {
190
+ line-height: 1.8;
191
+ }
192
+
193
+ @media (max-width: 667px) {
194
+ .box3 p {
195
+ font-size: 12px;
196
+ line-height: 1.5;
197
+ margin-bottom: 30px;
198
+ }
199
+ }
200
+
157
- .image_me {
201
+ .image_woman {
202
+ width: 100%;
203
+ }
204
+
205
+ @media (max-width: 667px) {
206
+ .image_woman {
158
207
  width: 100%;
159
- @include sp{
160
- width: 100%;
161
- }
208
+ }
162
209
  }
163
-
164
210
  ```
165
211
 
166
212
  何かうまい方法はありませんでしょうか。