質問編集履歴
2
情報を明確に
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
ドットインストールにて、htmlのみで枠線付き吹き出しを作るというレッスンがあったので、
|
|
14
14
|
|
|
15
15
|
動画を見ながらプログラムを書いていたのですが、
|
|
16
16
|
|
1
文法の修正、コードをコードブロックで囲んだ
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
理想図
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
失敗図
|
|
8
8
|
|
|
9
|
-
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
|
|
31
31
|
コード
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
```HTML5
|
|
34
34
|
|
|
35
35
|
<!DOCTYPE html>
|
|
36
36
|
|
|
@@ -39,10 +39,6 @@
|
|
|
39
39
|
<meta charset="utf-8">
|
|
40
40
|
|
|
41
41
|
<title>only balloon sample</title>
|
|
42
|
-
|
|
43
|
-
</head>
|
|
44
|
-
|
|
45
|
-
<body>
|
|
46
42
|
|
|
47
43
|
<style>
|
|
48
44
|
|
|
@@ -118,6 +114,10 @@
|
|
|
118
114
|
|
|
119
115
|
</style>
|
|
120
116
|
|
|
117
|
+
</head>
|
|
118
|
+
|
|
119
|
+
<body>
|
|
120
|
+
|
|
121
121
|
<h2><font color="skyblue">balloon1-2</font></h2>
|
|
122
122
|
|
|
123
123
|
<div class="balloon1-2"></div>
|
|
@@ -126,6 +126,12 @@
|
|
|
126
126
|
|
|
127
127
|
</html>
|
|
128
128
|
|
|
129
|
+
```
|
|
129
130
|
|
|
131
|
+
1px上にずらしたafter擬似要素がbefore擬似要素に重なったボックスと同じ枠線の吹き出しがつくりたいです。
|
|
130
132
|
|
|
133
|
+
(わかりやすいようにafter擬似要素の色を赤にしています。)
|
|
134
|
+
|
|
135
|
+
なぜかbefore擬似要素が無効？になってしまいます。
|
|
136
|
+
|
|
131
|
-
|
|
137
|
+
どうしたら理想図のようなものに直せるのか、教えていただけないでしょうか。
|