【完全初心者】HTML5 枠線付き吹き出し

理想図

失敗図

ドットインストールにて、htmlのみで枠線付き吹き出しを作るというレッスンがあったので、
動画を見ながらプログラムを書いていたのですが、
動画内のコードとほぼ同じコードなのになぜか理想図のようなものが作ることができず、
検索しようにもうまく言葉がまとまらなかったので、文章で質問できるここに投稿した次第です。

ブラウザ:google chrome

エディター:Atom

コード

HTML5
1<!DOCTYPE html>
2<head>
3  <meta charset="utf-8">
4  <title>only balloon sample</title>
5  <style>
6    body  {
7      background-color: black;
8      padding: 0 10px 40px;
9      }
10    h2  {
11      font-size: 20px
12    }
13    .balloon1-2 {
14      width: 300px;
15      height: 180px;
16      position: relative;
17      border: 2px double lightblue;
18    }
19    .balloon1-2:before  {
20      position: absolute;
21      width: 0;
22      height: 0;
23      content: '';
24      border-width: 20px;
25      border-style: solid;
26      border-color: skyblue black black black;
27      right: 40px;
28      bottom: -40px;
29    }
30    .balloon1-2:after {
31      position: absolute;
32      width: 0;
33      height: 0;
34      content: '';
35      border-width: 20px;
36      border-style: solid;
37      border-color:  red black black black;
38      right: 40px;
39      bottom: -39px;
40    }
41  </style>
42</head>
43<body>
44  <h2><font color="skyblue">balloon1-2</font></h2>
45  <div class="balloon1-2"></div>
46</body>
47</html>

1px上にずらしたafter擬似要素がbefore擬似要素に重なったボックスと同じ枠線の吹き出しがつくりたいです。
(わかりやすいようにafter擬似要素の色を赤にしています。)
なぜかbefore擬似要素が無効？になってしまいます。
どうしたら理想図のようなものに直せるのか、教えていただけないでしょうか。

kei344

2016/10/08 04:25

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

8-0_nyan5

2016/10/08 04:29

回答ではないですが、理想図と失敗図がちゃんとアップできてないようですよ。それと、<style>～</style>は<head></head>の中に書いた方がいいと思いますが。どんなバルーンなのかわかりませんが、とりあえずバルーンになってますよ。

stsemp

2016/10/08 04:48

kei344さん>>修正しました。次から気を付けます。

stsemp

2016/10/08 04:50

8-0_nyan5さん>> ありがとうございます。<style>タグは<head>タグ内に移動しました。

toutou

2016/10/08 04:59

おそらくドットインストールだと思われますので、有名なところなのでここで名前を出しても大丈夫だと思いますよ。どこと同じのを書いてそうなったのかがわかると、何を勘違いしてるかわかり、的確なアドバイスがもらえるかもしれません。

stsemp

2016/10/08 05:26

ありがとうございます。明確にしておきました。

行動規範の内容に同意します

回答2件

ベストアンサー

やり方はkei344さんが書いてるので、なぜかの部分を。
▼を重ねてずらして▼のボーダー部分を作ってるようですが、▼部分以外の箇所を透過してあげないとダメです。
質問のhtmlでbody { background-color: #fff }とすると分かりますが、実体は■(border)。
これをずらしていたので、結局後ろのskyblueが隠されたままだったということです。

.balloon1-2:afterのbottomを-15px～0にして見てみるとよく分かると思います。

投稿2016/10/08 05:22

gin

総合スコア2722

stsemp

2016/10/08 05:40

ご協力ありがとうございました。before疑似要素のborder-colorをつぶす部分以外透明にすることで解決できました。

行動規範の内容に同意します

CSS
1.balloon1-2::before {
2    border-color: skyblue rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
3    border-style: solid;
4    border-width: 20px;
5    bottom: -40px;
6    content: "";
7    height: 0;
8    position: absolute;
9    right: 40px;
10    width: 0;
11}
12.balloon1-2::after {
13    border-color: white rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
14    border-style: solid;
15    border-width: 20px;
16    bottom: -38px;
17    content: "";
18    height: 0;
19    position: absolute;
20    right: 40px;
21    width: 0;
22}
23.balloon1-2 {
24    background-color: white;
25    border: 2px double lightblue;
26    height: 180px;
27    position: relative;
28    width: 300px;
29}

HTML
1<h2>balloon1-2</h2>
2<div class="balloon1-2"></div>
3```**動くサンプル：**[https://jsfiddle.net/0qapyt2o/](https://jsfiddle.net/0qapyt2o/)
4
5---
6
7font 要素は廃止されたので、使用しないほうが良いです。また、参考書に書かれているのであればそれがかなり古い資料の可能性があります。
8
9【font 要素 - HTML | MDN】
10[https://developer.mozilla.org/ja/docs/Web/HTML/Element/font](https://developer.mozilla.org/ja/docs/Web/HTML/Element/font)