2022.1.9｜コーディング

CSSで吹き出しをつくる方法

CSSで吹き出しをつくる方法

吹き出しをつくる場合は、HTMLとCSSのみで設定することができます。
CSSで設定する場合は、「border」プロパティと「after」プロパティを使うことで吹き出しをつくることができます。
今回は、CSSで吹き出しをつくる方法を解説します。

本記事の内容

CSSで吹き出しをつくる方法

吹き出しをつくる場合は、四角形を配置し「border」プロパティや「after」プロパティで三角形を配置します。
吹き出し部分の三角形は上向き、下向き、左向き、右向きと自由に配置できます。

1.左右上下の吹き出し

「border」プロパティを使って吹き出しを設定します。

htmlコード
<div class="***">
ボタン
</div>

上向き、下向き、左向き、右向きを「border」プロパティで設定します。

例
上向き
cssコード（上向き）
.box1 {
  position: relative;
  width: 200px;
  color:#FFF;
  text-align: center;
  margin:0 auto 5% auto;
  padding:20px;
  background: #6cdeff;
}
.box1:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #6cdeff;
}
例
下向き
cssコード（下向き）
.box2 {
  position: relative;
  width: 200px;
  color:#FFF;
  text-align: center;
  margin:0 auto 5% auto;
  padding:20px;
  background: #6cdeff;
}
.box2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #6cdeff;
}
例
左向き
cssコード（左向き）
.box3 {
  position: relative;
  width: 200px;
  color:#FFF;
  text-align: center;
  margin:0 auto 5% auto;
  padding:20px;
  background: #6cdeff;
}
.box3:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #6cdeff;
}
例
右向き
cssコード（右向き）
.box4 {
  position: relative;
  width: 200px;
  color:#FFF;
  text-align: center;
  margin:0 auto 5% auto;
  padding:20px;
  background: #6cdeff;
}
.box4:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #6cdeff;
}

2.角丸の吹き出し

「border」プロパティを使って吹き出しを設定します。
「border-radius」プロパティを使って角を丸くします。

例
上向き
cssコード（上向き）
.box5 {
  position: relative;
  width: 200px;
  text-align: center;
  color:#FFF;
  margin:0 auto 5% auto;
  padding: 20px;
  background: #6cdeff;
  border-radius: 10px;
}
.box5:before {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #6cdeff;
}
例
下向き
cssコード（下向き）
.box6 {
  position: relative;
  width: 200px;
  text-align: center;
  color:#FFF;
  margin:0 auto 5% auto;
  padding: 20px;
  background: #6cdeff;
  border-radius: 10px;
}
.box6:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #6cdeff;
}
例
左向き
cssコード（左向き）
.box7 {
  position: relative;
  width: 200px;
  text-align: center;
  color:#FFF;
  margin:0 auto 5% auto;
  padding: 20px;
  background: #6cdeff;
  border-radius: 10px;
}
.box7:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #6cdeff;
}
例
右向き
cssコード（右向き）
.box8 {
  position: relative;
  width: 200px;
  text-align: center;
  color:#FFF;
  margin:0 auto 5% auto;
  padding: 20px;
  background: #6cdeff;
  border-radius: 10px;
}
.box8:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #6cdeff;
}

3.円形の吹き出し

「border」プロパティを使って吹き出しを設定します。
「border-radius」プロパティを「50%」に設定して円型をつくります。

例
上向き
cssコード（上向き）
.box9 {
  position: relative;
  width: 100px;
  height: 100px;
  line-height: 90px;
  text-align: center;
  color:#FFF;
  margin:0 auto 5% auto;
  padding: 20px;
  background: #6cdeff;
  border-radius: 50%;
}
.box9:before {
  content: '';
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #6cdeff;
}
例
下向き
cssコード（下向き）
.box10 {
  position: relative;
  width: 100px;
  height: 100px;
  line-height: 90px;
  text-align: center;
  color:#FFF;
  margin:0 auto 5% auto;
  padding: 20px;
  background: #6cdeff;
  border-radius: 50%;
}
.box10:before {
  content: "";
  position: absolute;
  top: 98%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #6cdeff;
}
例
左向き
cssコード（左向き）
.box11 {
  position: relative;
  width: 100px;
  height: 100px;
  line-height: 90px;
  text-align: center;
  color:#FFF;
  margin:0 auto 5% auto;
  padding: 20px;
  background: #6cdeff;
  border-radius: 50%;
}
.box11:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -25px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #6cdeff;
}
例
右向き
cssコード（右向き）
.box12 {
  position: relative;
  width: 100px;
  height: 100px;
  line-height: 90px;
  text-align: center;
  color:#FFF;
  margin:0 auto 5% auto;
  padding: 20px;
  background: #6cdeff;
  border-radius: 50%;
}
.box12:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 98%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #6cdeff;
}

4.考え事の吹き出し

「border」プロパティと「after」プロパティを使って考え事の吹き出しを設定します。

例
左向き
cssコード（左向き）
.box13 {
  position: relative;
  width: 200px;
  color: #FFF;
  margin: 0 auto 5% auto;
  padding: 15px;
  background: #6cdeff;
  border-radius: 30px;
  width: 200px;
}
.box13:before {  
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #6cdeff;
  border-radius: 50%;
}
.box13:after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 20px;
  bottom: 3px;
  background: #6cdeff;
  border-radius: 50%;
}
例
右向き
cssコード（右向き）
.box14 {
  position: relative;
  width: 200px;
  color: #FFF;
  margin: 0 auto 5% auto;
  padding: 15px;
  background: #6cdeff;
  border-radius: 30px;
  width: 200px;
}
.box14:before {  
  content: "";
  position: absolute;
  right: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #6cdeff;
  border-radius: 50%;
}
.box14:after {
  content: "";
  position: absolute;
  right: -24px;
  width: 20px;
  height: 20px;
  bottom: 3px;
  background: #6cdeff;
  border-radius: 50%;
}

まとめ

今までは画像でしか出来なかったこともCSSで出来るようになって便利ですね。
「border」プロパティと「after」プロパティの使い方は他にも沢山あるので覚えていくと色んな所で利用できますね。

«
»

関連記事