質問編集履歴

1

再現の為のcssの追加

2020/09/27 06:34

投稿

youser
youser

スコア1

test CHANGED
File without changes
test CHANGED
@@ -56,7 +56,7 @@
56
56
 
57
57
  **【HTML】**
58
58
 
59
- <div class="paragraph">
59
+ ```<div class="paragraph">
60
60
 
61
61
  <div class="sentence">
62
62
 
@@ -72,6 +72,10 @@
72
72
 
73
73
  </p></div>
74
74
 
75
+ ```
76
+
77
+
78
+
75
79
 
76
80
 
77
81
  ※今回は.sentence p 内だけの設定です。
@@ -86,6 +90,36 @@
86
90
 
87
91
  **【 CSS 】**
88
92
 
93
+ ```ここに言語を入力
94
+
95
+ /* 吹き出しまたは台詞 */
96
+
97
+ .sentence
98
+
99
+ {display:flex;
100
+
101
+ position:relative;
102
+
103
+ margin-top:-15px}
104
+
105
+
106
+
107
+ /* 名前欄 */
108
+
109
+ .sentence .CharaName{
110
+
111
+ width:4em;
112
+
113
+ padding:1.6em 0.5em 0.5em 0.5em;
114
+
115
+ text-align: right;
116
+
117
+ }
118
+
119
+
120
+
121
+
122
+
89
123
  /* 台詞・説明欄内 */
90
124
 
91
125
  .sentence p{
@@ -108,6 +142,84 @@
108
142
 
109
143
 
110
144
 
145
+
146
+
147
+ /*最初の行、改行取り消し*/
148
+
149
+ .sentence p:first-line
150
+
151
+ {line-height: 0px;}
152
+
153
+
154
+
155
+ /*フォントサイズ調整*/
156
+
157
+ rt{transform: scale(0.78);}
158
+
159
+
160
+
161
+ ```
162
+
163
+
164
+
165
+ 吹き出しのレイアウト
166
+
167
+ ```ここに言語を入力
168
+
169
+ .sentence .l1{
170
+
171
+ border:solid 1px;
172
+
173
+ }
174
+
175
+
176
+
177
+ .sentence .l1:before,
178
+
179
+ .sentence .l1:after{
180
+
181
+ content: ""; position: absolute;
182
+
183
+ }
184
+
185
+
186
+
187
+ .sentence .l1:before {
188
+
189
+ top: 22px; left: -13px;
190
+
191
+ margin-top: -12px;
192
+
193
+ border: 5px solid transparent;
194
+
195
+ border-right: 10px solid #FFF;
196
+
197
+ z-index: 2;
198
+
199
+ }
200
+
201
+
202
+
203
+ .sentence .l1:after {
204
+
205
+ top: 23px; left: -15px;
206
+
207
+ margin-top: -13px;
208
+
209
+ border: 5px solid transparent;
210
+
211
+ border-right: 10px solid #555;
212
+
213
+ }
214
+
215
+ ```
216
+
217
+
218
+
219
+
220
+
221
+
222
+
111
223
  ### 試したこと
112
224
 
113
225