HTML CSS 吹き出しを作ろう

画像として読み込みするのではなく、CSSで吹き出しを作る方法。
自分で作る時に迷わないようにするためのメモ。
右のようなのを作る<img width="136" alt="20191023_Qiita01.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/13a7232c-ce95-2c5c-fa13-04c14715c55c.jpeg">

##まずはhtml

```fukidashi.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>吹き出し</title>
    <link rel="stylesheet" href="css/fukidashi.css">
  </head>
<body>
  <div class="text-center">
    <div class="fukidashi">
      <p>
        吹き出し
      </p>
    </div>
  </div>
</body>
</html>
```

##次はcss

```fukidashi.css
body {
	margin: 0;
}
.text-center {
	text-align: center;
	margin: 20px;
}
.fukidashi {
	background: #00bfff;
	position: relative;
	display: inline-block;
	width: 100px;
	height: 100px;
	padding: 0;
	max-width: 100%;
	box-sizing: border-box;
	border-radius: 50%;
	color: #ffffff;
}
.fukidashi p {
	margin: 0;
	position: absolute;
	top: 40px;
	left: 20px;
}
.fukidashi::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto;
	border-style: solid;
	border-width: 16px 8px 0 8px;
	border-color: #00bfff transparent transparent transparent;
}
```

##●の丸みを決めているところは？
●の部分は

```
	border-radius: 50%;
```
で出来るのがすぐ分かった。

値を変えてみると

```
	border-radius: 25%;
```
右のようになる<img width="103" alt="20191023_Qiita02.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/bbddfbab-9bed-42e2-c65a-fe514e3318a5.jpeg">
「%」ではなく「px」でも指定出来る

```
	border-radius: 10px;
```
<img width="114" alt="20191023_Qiita03.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/f21e6ff2-57cd-19e0-d1a2-4a3f0af7a018.jpeg">

##▼のところってどうなってるの！？
▼の部分をどうやって作っているか最初分からなかったので、それぞれのプロパティを見ていく。

###content
▼の部分は**疑似要素**で作られているのでcontentプロパティが必須

```
	content: "";
```
プロパティ値に何もなければ空で良い

###▼の位置を決める(position,left,right,bottom,display)

```
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	display: block;
```
<img width="105" alt="20191023_Qiita04.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/4896bd79-3d43-5b1c-8ca1-6d0c91b70795.jpeg">
分かりやすくするために赤くしてありますが、↑の記述だと▼はここの位置

positionをコメントにすると

```
	/* position: absolute; */
	left: 0;
	right: 0;
	bottom: -10px;
	display: block;
```
<img width="105" alt="20191023_Qiita05.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/ac4e5539-47d6-9a2e-3628-eed5bf8bb890.jpeg">このようになり、left,right,bottomの数字を変えても変化はありません

###ボックスモデル(width,height,margin)

```
	width: 0;
	height: 0;
	margin: 0 auto;
```
一番分からなかったのはここから…
「幅も高さも0なのに▼になってる！？」って

###▼を作っているプロパティは？
実はボーダーで▼になっているように見せていたんですね
分かりやすくするために以下のような記述にしてみました


```
	border-style: solid;
	border-width: 20px 20px 20px 20px;
	border-color: #ff0000 #2600ff #00ff37 #d72add;
```
<img width="111" alt="20191023_Qiita06.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/ac83e23e-2e7a-2aec-2076-4db517a48113.jpeg">
全て同じ線幅だとこういう風になっています
つまり▼にするには
**「border-width」で幅の調整をして**
**「border-color」で上・右・下・左うち３つを透明(transparent)**
という風にすれば良い

##▼を任意の位置に持っていく
###右側

```
.fukidashi::after {
	content: "";
	position: absolute;
	left: 90px;
	right: 0;
	bottom: 30px;
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto;
	border-style: solid;
	border-width: 20px 0px 20px 20px;
	border-color: transparent transparent transparent #d72add;
}
```
<img width="117" alt="20191023_Qiita07.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/a9154318-e5d4-ec19-6e82-2000442f1f0f.jpeg">


###上

```
.fukidashi::after {
	/* 疑似要素を使うときは「content」必ず書く！ */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 90px;
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto;
	border-style: solid;
	border-width: 0px 20px 20px 20px;
	border-color: transparent transparent #00ff37 transparent;
}
```
<img width="99" alt="20191023_Qiita08.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/a8bf5cd1-5c15-a530-0df9-d7308480aa12.jpeg">

###左側

```
.fukidashi::after {
	/* 疑似要素を使うときは「content」必ず書く！ */
	content: "";
	position: absolute;
	left: -90px;
	right: 0;
	bottom: 30px;
	display: block;
	width: 0;
	height: 0;
	margin: 0 auto;
	border-style: solid;
	border-width: 20px 20px 20px 0px;
	border-color: transparent #2600ff transparent transparent;
}
```
<img width="104" alt="20191023_Qiita09.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/1cb637fb-a01b-10cf-e331-12a1a7e12c6d.jpeg">

効率的なやり方があったらご教授願いますm(__)m