質問編集履歴
1
大幅修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,25 +1,17 @@
|
|
|
1
1
|
WordpressでHTMLモジュールを用いることによって、会話形式を実装しました。
|
|
2
2
|
(参考文献: https://saruwakakun.com/html-css/reference/speech-bubble)
|
|
3
3
|
|
|
4
|
-
以下の画像のようなイメージです。
|
|
5
|
-
|
|
5
|
+
](b88f0def9cda45f74eaa2c73e9a8acbe.png)
|
|
6
6
|
|
|
7
|
-
しかし、wordpressのresponsive editingがHTMLモジュールに対応していないのかわかりませんが、PC版では綺麗にできていません。
|
|
7
|
+
しかし、wordpressのresponsive editingがHTMLモジュールに対応していないのかわかりませんが、PC版では綺麗にできていません。スマホ版を基準にして作成しました。pC版の方を１枚目の画像の点線のようにもう少し大きくしたいです。
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
具体的には、スマホ版の見た目はなるべく変えずに、１枚目の画像のようにPC版の吹き出しを大きくし、それに合わせて文字の大きさも大きくしたいです。
|
|
10
10
|
|
|
11
|
-
具体的には、.balloon .chattingのCSS内でheightを％で指定し、その親要素の高さを指定するために.baloon内にheightを指定しました。しかし、何も変わりませんでした。
|
|
12
|
-
|
|
13
|
-
以下のサイトを参照していますが、どこを変更すればいいでしょうか？(おそらく親要素の指定の仕方が問題？)
|
|
14
|
-
https://saruwakakun.com/html-css/basic/width-height
|
|
15
|
-
https://saruwakakun.com/html-css/basic/max-min-width
|
|
16
|
-
|
|
17
11
|
どうぞよろしくお願いいたします。
|
|
18
12
|
|
|
13
|
+
```
|
|
19
14
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
```
|
|
23
15
|
<!DOCTYPE html>
|
|
24
16
|
|
|
25
17
|
<html lang="en">
|
|
@@ -30,9 +22,11 @@
|
|
|
30
22
|
|
|
31
23
|
<style>
|
|
32
24
|
|
|
33
|
-
.balloon {
|
|
25
|
+
.balloon {
|
|
34
|
-
|
|
26
|
+
min-width: 80%;
|
|
35
27
|
width: 100%;
|
|
28
|
+
/*height: 500px;*//*.baloonのheightが指定されていないと、.chattingのheightは指定できない*/
|
|
29
|
+
/*margin-left: 100px;PC版では中心よせしたいが、スマホ版ではこのままでいい。どうする？*/
|
|
36
30
|
margin: 1.5em auto;
|
|
37
31
|
overflow: hidden;
|
|
38
32
|
display: flex;
|
|
@@ -44,28 +38,34 @@
|
|
|
44
38
|
|
|
45
39
|
.balloon .faceicon {
|
|
46
40
|
margin: 0 10px 0 10px;
|
|
41
|
+
/*以下２つでFaceiconの大きさをResponsive editingする*/
|
|
42
|
+
width: 25%;
|
|
47
|
-
width: 150px;
|
|
43
|
+
max-width: 150px;
|
|
48
44
|
flex-shrink: 0;
|
|
49
45
|
}
|
|
50
46
|
|
|
51
47
|
.balloon .faceicon img{
|
|
52
48
|
width: 100%;
|
|
53
49
|
height: auto;
|
|
54
|
-
border: solid 3px #
|
|
50
|
+
border: solid 3px #F0F0F0;
|
|
55
51
|
border-radius: 50%;
|
|
56
52
|
}
|
|
57
53
|
|
|
58
|
-
.balloon .chatting {
|
|
54
|
+
.balloon .chatting {
|
|
59
55
|
display: inline-block;
|
|
60
|
-
max-width:
|
|
56
|
+
max-width: 400px;
|
|
57
|
+
width: 72%;
|
|
58
|
+
/*height: 100%;*/
|
|
61
59
|
}
|
|
62
60
|
|
|
63
61
|
.says {
|
|
64
62
|
position: relative;
|
|
65
63
|
margin: 5px 20px 0 20px;
|
|
66
|
-
|
|
64
|
+
/*margin: 3em auto;*/
|
|
65
|
+
padding: 1em 13px;/*縦方向のpaddingを、文字の大きさ依存にしてみた*/
|
|
67
66
|
border-radius: 12px;
|
|
68
67
|
background: #d7ebfe;
|
|
68
|
+
/*height: 135px;*//*paddingをデバイスによって変更したいのか？・*/
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.says:after {
|
|
@@ -78,52 +78,77 @@
|
|
|
78
78
|
|
|
79
79
|
.left .says:after {
|
|
80
80
|
left: -24px;
|
|
81
|
-
border-right: 12px solid #
|
|
81
|
+
border-right: 12px solid #F0F0F0;
|
|
82
82
|
}
|
|
83
83
|
.right .says:after {
|
|
84
84
|
right: -24px;
|
|
85
|
-
border-left: 12px solid #
|
|
85
|
+
border-left: 12px solid #F0F0F0;
|
|
86
86
|
}
|
|
87
87
|
.says p {
|
|
88
88
|
margin: 0;
|
|
89
89
|
padding: 0;
|
|
90
|
+
font-size: 1vw;/*vwを用いれば、デバイスごとの大きさに変わるらしい*/
|
|
90
91
|
}
|
|
91
92
|
|
|
92
93
|
.says span {
|
|
93
|
-
color:
|
|
94
|
+
color:#73683b;
|
|
94
|
-
font-size:
|
|
95
|
+
font-size: 10px;/*ここもvwで指定？*/
|
|
95
96
|
}
|
|
96
|
-
|
|
97
97
|
</style>
|
|
98
98
|
</head>
|
|
99
99
|
|
|
100
100
|
<body>
|
|
101
101
|
|
|
102
102
|
<!--吹き出しはじまり-->
|
|
103
|
+
<div class="balloon left">
|
|
104
|
+
<div class="faceicon">
|
|
105
|
+
<img src="ここは写真のURL">
|
|
106
|
+
</div>
|
|
107
|
+
<div class="chatting">
|
|
108
|
+
<div class="says">
|
|
109
|
+
<p><span>ああああああああああああああああ</span></p>
|
|
110
|
+
<p>あああああああああああああああ</p>
|
|
111
|
+
<p>あああああああああああ</p>
|
|
112
|
+
<p>あああああああああああああああ</p>
|
|
113
|
+
<p>ああああああああああ</p>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
103
117
|
<div class="balloon right">
|
|
104
118
|
<div class="faceicon">
|
|
105
|
-
<img src="
|
|
119
|
+
<img src="ここは写真のURL">
|
|
106
120
|
</div>
|
|
107
121
|
<div class="chatting">
|
|
108
122
|
<div class="says">
|
|
109
|
-
|
|
123
|
+
<p><span>ああああああああ</span></p>
|
|
110
|
-
<p>
|
|
124
|
+
<p>ああああああああああああああああああああ</p>
|
|
111
|
-
<p>★文章を入れる★★文章を入れる★★文章を入れる★★文章を入れる★</p>
|
|
112
125
|
</div>
|
|
113
126
|
</div>
|
|
114
127
|
</div>
|
|
115
128
|
<div class="balloon left">
|
|
116
129
|
<div class="faceicon">
|
|
117
|
-
<img src="
|
|
130
|
+
<img src="ここは写真のURL">
|
|
118
131
|
</div>
|
|
119
132
|
<div class="chatting">
|
|
120
133
|
<div class="says">
|
|
134
|
+
<p>ああああああああああああああ</p>
|
|
121
|
-
|
|
135
|
+
<p>あああああああああああああああああああああああああ</p>
|
|
136
|
+
<p>ああああああああああああああああああああああああああああああああああああ</p>
|
|
122
137
|
</div>
|
|
123
138
|
</div>
|
|
124
139
|
</div>
|
|
140
|
+
<div class="balloon right">
|
|
141
|
+
<div class="faceicon">
|
|
142
|
+
<img src="ここは写真のURL">
|
|
143
|
+
</div>
|
|
144
|
+
<div class="chatting">
|
|
145
|
+
<div class="says">
|
|
146
|
+
<p>あああああああああああああああああああああああああああああああああああああああああああああああ</p>
|
|
147
|
+
<p>ああああああああああああああああああああああああ</p>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
125
151
|
|
|
126
152
|
|
|
127
|
-
|
|
128
153
|
</body>
|
|
129
154
|
```
|