画像として読み込みするのではなく、CSSで吹き出しを作る方法。
自分で作る時に迷わないようにするためのメモ。
右のようなのを作る
まずは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%;
右のようになる
「%」ではなく「px」でも指定出来る
border-radius: 10px;
▼のところってどうなってるの！？
▼の部分をどうやって作っているか最初分からなかったので、それぞれのプロパティを見ていく。
content
▼の部分は疑似要素で作られているのでcontentプロパティが必須
content: "";
プロパティ値に何もなければ空で良い
▼の位置を決める(position,left,right,bottom,display)
position: absolute;
left: 0;
right: 0;
bottom: -10px;
display: block;
分かりやすくするために赤くしてありますが、↑の記述だと▼はここの位置
positionをコメントにすると
/* position: absolute; */
left: 0;
right: 0;
bottom: -10px;
display: block;
このようになり、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;
全て同じ線幅だとこういう風になっています
つまり▼にするには
**「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;
}
上
.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;
}
左側
.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;
}
効率的なやり方があったらご教授願いますm(__)m