2022.1.10|コーディング
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」プロパティの使い方は他にも沢山あるので覚えていくと色んな所で利用できますね。