cssで吹き出しを作りたい

前提・実現したいこと

CSSを使用して下向きの吹き出しを作りたいです。
調べながら作っていたのですが、うまくいきません。問題は以下の2点です。

発生している問題・エラーメッセージ

.rectangle部分でleft:50%としているのに、

実際Chromeで見ると、やや右に寄っている。
leftが50%ならばrightも50%となって中心に寄るのではないのでしょうか？

吹き出しの三角形部分が表示されない。

三角形部分のコードを以下のように書いた理由を説明すると、
(1)after
四角形の下に置いてはみ出させるためにbeforeではなくafterにした。
(2)bottom
afterの指定があることを考え、四角形のすぐ下から始めるために0。
(3)right
親要素のrectangleの真ん中から三角形を出したいため。
(4)border, border-top
上の三角形のみに色を付ける。それ以外は透明に。

何か認識に間違いがある箇所があれば教えていただきたいです。

該当のソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>ヘッダー</title>
<style>
body{
margin:0;
padding:0;
width:100%;
height:100%;
}
/*ここからはヘッダーのためのコード*/
.all{
position:fixed;
width:100%;
height:120px;
border-radius:10%
}

.backColor{
background-color:#fff;
box-shadow: 0 0 3px;
padding: 10px 10px 10px;
height: 120px;
width:100%;
}

.line{
border: 5px solid #F15356;
height:100px;
width:100%;
border-radius:10%
}
/*ここまでヘッダーのためのコード*/

/*吹き出しの四角部分*/
.rectangle{
position:relative;
display:inline-block;
background-color:#F15356;
color:white;
padding:10px;
border-radius:3px;
top:200px;
left:50%;
}

/*吹き出しの三角形部分*/
.restangle:after{
content="";
position:absolute;
width:0;
height:0;
bottom:0px;
right:50%
border: 20px solid transparent;
border-top: 20px solid #F15356;
}

*,*:before, *:after{
box-sizing:border-box;
}

</style>
</head>
<body>
<div class="all">
	<div class="backColor">
		<div class="line">
		</div>
	</div>
</div>
<p class="rectangle">こんにちは</p>
</body>
</html>

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

回答2件

ベストアンサー

CSS
1/*吹き出しの三角形部分*/
2/*.restangle:after{ re「s」tangleになっている */
3.rectangle:after{
4/*content=""; 「=」じゃない。*/
5content:"";
6position:absolute;
7width:0;
8height:0;
9/*bottom:0px; 相対位置なので。*/
10top:100%;
11right:calc(50% - 20px);/*「;」が無い＆borderの幅を引き忘れている */
12border: 20px solid transparent;
13border-top: 20px solid #F15356;
14}
15```**動くサンプル：**[https://jsfiddle.net/qkemc8vg/](https://jsfiddle.net/qkemc8vg/)

投稿2018/06/05 15:34

kei344

総合スコア69400

Tazusa

2018/06/05 15:56

ありがとうございます。calcなどは知らず、大変参考になりました。追加で質問が2つあるのですが、 1. 三角形部分でbottom:0;が相対位置だからおかしいというところがよく理解できません。 bottom:0;で実行すると、長方形の上から三角形が始まってしまったのですが、これは関係あるのでしょうか。 2.四角形も三角形もやはり右よりに配置されているのですが、これはなんとか解決する方法はないのでしょうか。 text-align:center;もやってみたのですが解決できませんでした。初心者で申し訳ありませんが、よろしくお願いします。

Tazusa

2018/06/05 16:00

bottomについて、 absoluteを指定すると親要素の中での位置指定になるということでしたので、 bottom 0 (下端から0)という意味で書いたのですが…

teruri

2018/06/05 16:06

bottomについては、 bottom: 0; の意味は、下端から上に向かって0という意味なので、 Tazusaさんのやりたいようにするためには bottom: -20px; としないといけないんですよね～。 top: 100%; は上端から下に向かって100%ということになります。

kei344

2018/06/06 00:23

To: Tazusaさん【CSSのpositionを総まとめ！absoluteやfixedの使い方は？】 https://saruwakakun.com/html-css/basic/relative-absolute-fixed#section2 【CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ】 https://www.granfairs.com/blog/staff/centering-by-css To: teruriさん補足ありがとうございます。

Tazusa

2018/06/06 08:32

terumiさん、kei344さん、ありがとうございます。 bottomについて理解できました。

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

1
.rectangle部分でleft:50%としているのに、
実際Chromeで見ると、やや右に寄っている。
leftが50%ならばrightも50%となって中心に寄るのではないのでしょうか？
2
吹き出しの三角形部分が表示されない。
三角形部分のコードを以下のように書いた理由を説明すると、
(1)after
四角形の下に置いてはみ出させるためにbeforeではなくafterにした。
(2)bottom
afterの指定があることを考え、四角形のすぐ下から始めるために0。
(3)right
親要素のrectangleの真ん中から三角形を出したいため。
(4)border, border-top
上の三角形のみに色を付ける。それ以外は透明に。

とのことですので、それぞれ回答しますね。

1については

css
1left: calc(50% - ボタンの横幅の半分)

としてください。ボタンの横幅の半分は今回50pxですかね？

leftの値を0にしてみるとわかりやすいかと。
そこからChromeのデベロッパーツールなどで数値を動かしてみてください。
0だと1番左に寄っちゃいますよね。
てことは、要素の左側の長さがleftの値ということです。

2については

/吹き出しの三角形部分/
.restangle:after{　←restangleになってます。
content="";　←=ではなく:です。
position:absolute;
width:0;
height:0;
bottom:0px;　←top:100%にしましょう。これも1と同様、どこにあるのかデベロッパーツールでやってみると感覚が理解できます。
right:50%　←最後のセミコロンが抜けてるのと、幅の調整が必要です。これも1と同様ですね。
border: 20px solid transparent;
border-top: 20px solid #F15356;
}

css
1/*吹き出しの三角形部分*/
2.rectangle:after{
3  content:"";
4  position:absolute;
5  width:0;
6  height:0;
7  top:100%;
8  right:calc(50% - 20px);
9  border: 20px solid transparent;
10  border-top: 20px solid #F15356;
11}
12

こんな感じかな。

あとは、適切にインデント入れたりすると理解が捗ります。
あと、エディタの機能（vscodeとかsublimeの）で、記法の間違いのチェックができると、不要なミスが少なくなります。

投稿2018/06/05 16:04

編集2018/06/05 17:01

teruri

総合スコア220

Tazusa

2018/06/06 08:40 編集

回答ありがとうございます。 bottomについては理解できたのですが、まだ中央寄せについてはわからないことがあります。 rectangleにて、ボタンの横幅が必要ですが、その算出は、 (フォントのデフォルト16px) * 5文字 / 2 + 片方のpadding で宜しいでしょうか? そうだとすると、もう一つ"2018年6月6日です。"と書いた四角形で、paddingが上下左右40pxだと、16 * 9文字 / 2 + 40 =112pxがマイナスされると思います。しかし、実際calc(50% - 112px)だと右寄りになっています。この考え方が間違っているのでしょうか？

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

あなたの回答