2022.1.10｜コーディング

CSSでマンガの様なふわふわした吹き出しをつくる方法

CSSでマンガの様なふわふわした吹き出しをつくる方法

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

本記事の内容

CSSでマンガの様なふわふわした吹き出しをつくる方法

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

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

1.ふわふわした吹き出し

「border」プロパティと「after」プロパティの横幅、縦幅の設定で大きさは変更できます。

例
左下向き
cssコード（左下向き）
.box1 {
  position: relative;
  margin: 0 auto 5% auto;
  padding: 0 15px;
  width: auto;
  width: 200px;
  height: 50px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #6cdeff;
  z-index: 0;
}
.box1:before {
  content: "";
  position: absolute;
  bottom: -17px; left: 15px;
  margin-left: 0;
  display: block;
  width: 15px;
  height: 15px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: 0;
}
.box1:after {
  content: "";
  position: absolute;
  bottom: -25px; left: 25px;
  margin-left: 0;
  display: block;
  width: 8px;
  height: 8px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: 0;
}
例
右下向き
cssコード（右下向き）
.box2 {
  position: relative;
  margin: 0 auto 5% auto;
  padding: 0 15px;
  width: auto;
  width: 200px;
  height: 50px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #6cdeff;
  z-index: 0;
}
.box2:before {
  content: "";
  position: absolute;
  bottom: -17px; right: 15px;
  margin-right: 0;
  display: block;
  width: 15px;
  height: 15px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: 0;
}
.box2:after {
  content: "";
  position: absolute;
  bottom: -25px; right: 25px;
  margin-right: 0;
  display: block;
  width: 8px;
  height: 8px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: 0;
}
例
右下向き
cssコード（左上向き）
.box3 {
  position: relative;
  margin: 0 auto 5% auto;
  padding: 0 15px;
  width: auto;
  width: 200px;
  height: 50px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #6cdeff;
  z-index: 0;
}
.box3:before {
  content: "";
  position: absolute;
  top: -17px; left: 15px;
  margin-right: 0;
  display: block;
  width: 15px;
  height: 15px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: -1;
}
.box3:after {
  content: "";
  position: absolute;
  top: -25px; left: 25px;
  margin-right: 0;
  display: block;
  width: 8px;
  height: 8px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: -1;
}
例
右上向き
cssコード（右上向き）
.box4 {
  position: relative;
  margin: 0 auto 5% auto;
  padding: 0 15px;
  width: auto;
  width: 200px;
  height: 50px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #6cdeff;
  z-index: 0;
}
.box4:before {
  content: "";
  position: absolute;
  top: -17px; right: 15px;
  margin-right: 0;
  display: block;
  width: 15px;
  height: 15px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: -1;
}
.box4:after {
  content: "";
  position: absolute;
  top: -25px; right: 25px;
  margin-right: 0;
  display: block;
  width: 8px;
  height: 8px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: -1;
}

2.角丸にしたふわふわした吹き出し

「border」プロパティと「after」プロパティの横幅、縦幅の設定で大きさは変更できます。

例
左下向き
cssコード（左下向き）
.box5 {
  position: relative;
  margin: 0 auto 5% auto;
  padding: 0 15px;
  width: auto;
  width: 200px;
  height: 50px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #6cdeff;
  border-radius: 60px;
  z-index: 0;
}
.box5:before {
  content: "";
  position: absolute;
  bottom: -17px; left: 15px;
  margin-left: 0;
  display: block;
  width: 15px;
  height: 15px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: 0;
}
.box5:after {
  content: "";
  position: absolute;
  bottom: -25px; left: 25px;
  margin-left: 0;
  display: block;
  width: 8px;
  height: 8px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: 0;
}
例
右下向き
cssコード（右下向き）
.box6 {
  position: relative;
  margin: 0 auto 5% auto;
  padding: 0 15px;
  width: auto;
  width: 200px;
  height: 50px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #6cdeff;
  border-radius: 60px;
  z-index: 0;
}
.box6:before {
  content: "";
  position: absolute;
  bottom: -17px; right: 15px;
  margin-right: 0;
  display: block;
  width: 15px;
  height: 15px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: 0;
}
.box6:after {
  content: "";
  position: absolute;
  bottom: -25px; right: 25px;
  margin-right: 0;
  display: block;
  width: 8px;
  height: 8px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: 0;
}
例
右下向き
cssコード（左上向き）
.box7 {
  position: relative;
  margin: 0 auto 5% auto;
  padding: 0 15px;
  width: auto;
  width: 200px;
  height: 50px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #6cdeff;
  border-radius: 60px;
  z-index: 0;
}
.box7:before {
  content: "";
  position: absolute;
  top: -17px; left: 15px;
  margin-right: 0;
  display: block;
  width: 15px;
  height: 15px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: -1;
}
.box7:after {
  content: "";
  position: absolute;
  top: -25px; left: 25px;
  margin-right: 0;
  display: block;
  width: 8px;
  height: 8px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: -1;
}
例
右上向き
cssコード（右上向き）
.box8 {
  position: relative;
  margin: 0 auto 5% auto;
  padding: 0 15px;
  width: auto;
  width: 200px;
  height: 50px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #6cdeff;
  border-radius: 60px;
  z-index: 0;
}
.box8:before {
  content: "";
  position: absolute;
  top: -17px; right: 15px;
  margin-right: 0;
  display: block;
  width: 15px;
  height: 15px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: -1;
}
.box8:after {
  content: "";
  position: absolute;
  top: -25px; right: 25px;
  margin-right: 0;
  display: block;
  width: 8px;
  height: 8px;
  background: #6cdeff;
  border-radius: 50%;
  z-index: -1;
}

まとめ

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

«
»

関連記事