teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問HTMLモジュールをレスポンシブ対応したい

編集履歴

質問編集履歴

1

大幅修正

2021/12/14 10:23

投稿

nitori-kun
nitori-kun

スコア62

test CHANGED
File without changes
test CHANGED
@@ -4,29 +4,17 @@
4
4
 
5
5
 
6
6
 
7
- 以下の画像のようなイメージです。
8
-
9
- ![イメージ説明](c8ce852e22913410b21ea1c2a1087733.png)
7
+ ![PC版](ca7dece8f89841d75263ff860f46888a.png)
8
+
10
-
9
+ ![![スマホ版](a085b95dc5964a72cab258fa1779caf7.png)](b88f0def9cda45f74eaa2c73e9a8acbe.png)
11
-
12
-
10
+
11
+
12
+
13
- しかし、wordpressのresponsive editingがHTMLモジュールに対応していないのかわかりませんが、PC版では綺麗にできていません。
13
+ しかし、wordpressのresponsive editingがHTMLモジュールに対応していないのかわかりませんが、PC版では綺麗にできていません。スマホ版を基準にして作成しました。pC版の方を１枚目の画像の点線のようにもう少し大きくしたいです。
14
-
15
-
16
-
17
- 吹き出しの高さをもう少し長くしたいです。現在のコードでは、吹き出しの高さをpxで指定しているので、これを％で指定しmax_heightまたはmin_haightと組み合わせれば、スマホでもPCでも見やすい大きさに変えられるのではと思いました。
14
+
18
-
19
-
20
-
15
+
16
+
21
- 具体的には、.balloon .chattingのCSS内でheightを％で指定し、その親要素の高さを指定するために.baloon内にheightを指定しました。しかし、何も変わりませんでした。
17
+ 具体的には、スマホ版の見た目はなるべく変えずに、１枚目の画像のようにPC版の吹き出しを大きくし、それに合わせて文字の大きさも大きくしたいです。
22
-
23
-
24
-
25
- 以下のサイトを参照していますが、どこを変更すればいいでしょうか？(おそらく親要素の指定の仕方が問題？)
26
-
27
- https://saruwakakun.com/html-css/basic/width-height
28
-
29
- https://saruwakakun.com/html-css/basic/max-min-width
30
18
 
31
19
 
32
20
 
@@ -34,14 +22,10 @@
34
22
 
35
23
 
36
24
 
37
-
38
-
39
-
40
-
41
-
42
-
43
25
  ```
44
26
 
27
+
28
+
45
29
  <!DOCTYPE html>
46
30
 
47
31
 
@@ -62,12 +46,16 @@
62
46
 
63
47
 
64
48
 
65
- .balloon {/*親要素の高さの指定をいれる。*/
49
+ .balloon {
66
-
50
+
67
- max-width: 1000px;
51
+ min-width: 80%;
68
52
 
69
53
  width: 100%;
70
54
 
55
+ /*height: 500px;*//*.baloonのheightが指定されていないと、.chattingのheightは指定できない*/
56
+
57
+ /*margin-left: 100px;PC版では中心よせしたいが、スマホ版ではこのままでいい。どうする？*/
58
+
71
59
  margin: 1.5em auto;
72
60
 
73
61
  overflow: hidden;
@@ -90,7 +78,11 @@
90
78
 
91
79
  margin: 0 10px 0 10px;
92
80
 
81
+ /*以下２つでFaceiconの大きさをResponsive editingする*/
82
+
83
+ width: 25%;
84
+
93
- width: 150px;
85
+ max-width: 150px;
94
86
 
95
87
  flex-shrink: 0;
96
88
 
@@ -104,7 +96,7 @@
104
96
 
105
97
  height: auto;
106
98
 
107
- border: solid 3px #d7ebfe;
99
+ border: solid 3px #F0F0F0;
108
100
 
109
101
  border-radius: 50%;
110
102
 
@@ -112,11 +104,15 @@
112
104
 
113
105
 
114
106
 
115
- .balloon .chatting {/*この部分に高さ指定を%で追加*/
107
+ .balloon .chatting {
116
108
 
117
109
  display: inline-block;
118
110
 
119
- max-width: 800px;
111
+ max-width: 400px;
112
+
113
+ width: 72%;
114
+
115
+ /*height: 100%;*/
120
116
 
121
117
  }
122
118
 
@@ -128,12 +124,16 @@
128
124
 
129
125
  margin: 5px 20px 0 20px;
130
126
 
131
- padding: 60px 50px;
127
+ /*margin: 3em auto;*/
128
+
129
+ padding: 1em 13px;/*縦方向のpaddingを、文字の大きさ依存にしてみた*/
132
130
 
133
131
  border-radius: 12px;
134
132
 
135
133
  background: #d7ebfe;
136
134
 
135
+ /*height: 135px;*//*paddingをデバイスによって変更したいのか？・*/
136
+
137
137
  }
138
138
 
139
139
 
@@ -158,7 +158,7 @@
158
158
 
159
159
  left: -24px;
160
160
 
161
- border-right: 12px solid #d7ebfe;
161
+ border-right: 12px solid #F0F0F0;
162
162
 
163
163
  }
164
164
 
@@ -166,7 +166,7 @@
166
166
 
167
167
  right: -24px;
168
168
 
169
- border-left: 12px solid #d7ebfe;
169
+ border-left: 12px solid #F0F0F0;
170
170
 
171
171
  }
172
172
 
@@ -176,19 +176,19 @@
176
176
 
177
177
  padding: 0;
178
178
 
179
+ font-size: 1vw;/*vwを用いれば、デバイスごとの大きさに変わるらしい*/
180
+
179
181
  }
180
182
 
181
183
 
182
184
 
183
185
  .says span {
184
186
 
185
- color: blue;
187
+ color:#73683b;
186
-
188
+
187
- font-size: 5px;
189
+ font-size: 10px;/*ここもvwで指定？*/
188
-
190
+
189
- }
191
+ }
190
-
191
-
192
192
 
193
193
  </style>
194
194
 
@@ -202,11 +202,39 @@
202
202
 
203
203
  <!--吹き出しはじまり-->
204
204
 
205
+ <div class="balloon left">
206
+
207
+ <div class="faceicon">
208
+
209
+ <img src="ここは写真のURL">
210
+
211
+ </div>
212
+
213
+ <div class="chatting">
214
+
215
+ <div class="says">
216
+
217
+ <p><span>ああああああああああああああああ</span></p>
218
+
219
+ <p>あああああああああああああああ</p>
220
+
221
+ <p>あああああああああああ</p>
222
+
223
+ <p>あああああああああああああああ</p>
224
+
225
+ <p>ああああああああああ</p>
226
+
227
+ </div>
228
+
229
+ </div>
230
+
231
+ </div>
232
+
205
233
  <div class="balloon right">
206
234
 
207
235
  <div class="faceicon">
208
236
 
209
- <img src="http://placehold.jp/90x90.png">
237
+ <img src="ここは写真のURL">
210
238
 
211
239
  </div>
212
240
 
@@ -214,11 +242,9 @@
214
242
 
215
243
  <div class="says">
216
244
 
217
- <p><span>ここだけ色と大きさを変えたい</span></p><!--20211125 変更箇所-->
245
+ <p><span>ああああああああ</span></p>
218
-
246
+
219
- <p>★文章を入れる★★文章を入れる★★文章を入れる★★文章を入れる★</p>
247
+ <p>ああああああああああああああああああああ</p>
220
-
221
- <p>★文章を入れる★★文章を入れる★★文章を入れる★★文章を入れる★</p>
222
248
 
223
249
  </div>
224
250
 
@@ -230,7 +256,7 @@
230
256
 
231
257
  <div class="faceicon">
232
258
 
233
- <img src="http://placehold.jp/80x80.png">
259
+ <img src="ここは写真のURL">
234
260
 
235
261
  </div>
236
262
 
@@ -238,7 +264,11 @@
238
264
 
239
265
  <div class="says">
240
266
 
267
+ <p>ああああああああああああああ</p>
268
+
241
- <p>★文章を入れる★★文章を入れる★★文章を入れる★★文章を入れる★</p>
269
+ <p>あああああああああああああああああああああああああ</p>
270
+
271
+ <p>ああああああああああああああああああああああああああああああああああああ</p>
242
272
 
243
273
  </div>
244
274
 
@@ -246,7 +276,27 @@
246
276
 
247
277
  </div>
248
278
 
249
-
279
+ <div class="balloon right">
280
+
281
+ <div class="faceicon">
282
+
283
+ <img src="ここは写真のURL">
284
+
285
+ </div>
286
+
287
+ <div class="chatting">
288
+
289
+ <div class="says">
290
+
291
+ <p>あああああああああああああああああああああああああああああああああああああああああああああああ</p>
292
+
293
+ <p>ああああああああああああああああああああああああ</p>
294
+
295
+ </div>
296
+
297
+ </div>
298
+
299
+ </div>
250
300
 
251
301
 
252
302