border による吹き出しの作成
公開日：2020-10-24
更新日：2020-10-24
更新日：2020-10-24
1. 概要
border を使って吹き出しを作成します。
2. 吹き出しの作成方法
border で枠線を描きます。
枠線の幅を変更します。
枠の幅と高さを 0 にします。
左、右、下の線を透明（transparent）にします。
すると、▼だけになります。
▼の上に枠を付けます。
:after を使って、classを追加するだけで、吹き出しになるようにします。
▼の位置を中央揃えにします。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML・CSS・JavaScript</title>
<style>
.speech_bubble {
color:#fff;
border-style:solid;
border-width:20px;
border-color:red blue green yellow;
width :100px;
height:100px;
}
</style>
</head>
<body style="margin:0px; padding:8px; background-color:#000;">
<div class="speech_bubble"></div>
</body>
</html>
実行結果：
枠線の幅を変更します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML・CSS・JavaScript</title>
<style>
.speech_bubble {
color:#fff;
border-style:solid;
border-width:20px 10px 10px 10px;
border-color:red blue green yellow;
width :100px;
height:100px;
}
</style>
</head>
<body style="margin:0px; padding:8px; background-color:#000;">
<div class="speech_bubble"></div>
</body>
</html>
実行結果：
枠の幅と高さを 0 にします。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML・CSS・JavaScript</title>
<style>
.speech_bubble {
color:#fff;
border-style:solid;
border-width:20px 10px 10px 10px;
border-color:red blue green yellow;
width :0px;
height:0px;
}
</style>
</head>
<body style="margin:0px; padding:8px; background-color:#000;">
<div class="speech_bubble" style=""></div>
</body>
</html>
実行結果：
左、右、下の線を透明（transparent）にします。
すると、▼だけになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML・CSS・JavaScript</title>
<style>
.speech_bubble {
color:#fff;
border-style:solid;
border-width:20px 10px 10px 10px;
border-color:red transparent transparent transparent;
width :0px;
height:0px;
}
</style>
</head>
<body style="margin:0px; padding:8px; background-color:#000;">
<div class="speech_bubble" style=""></div>
</body>
</html>
実行結果：
▼の上に枠を付けます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML・CSS・JavaScript</title>
<style>
.speech_bubble {
color:#fff;
border-style:solid;
border-width:20px 10px 10px 10px;
border-color:red transparent transparent transparent;
width :0px;
height:0px;
margin-left:12px; /* ▼の位置を右にずらす */
}
</style>
</head>
<body style="margin:0px; padding:8px; background-color:#000;">
<div style="width:200px; height:100px; color:#fff; background-color:red; border-radius: 8px;">
こんにちは
</div>
<div class="speech_bubble"></div>
</body>
</html>
実行結果：
:after を使って、classを追加するだけで、吹き出しになるようにします。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML・CSS・JavaScript</title>
<style>
.speech_bubble {
position:relative;
color:#fff;
background-color:red;
border-radius: 8px;
}
.speech_bubble:after {
content: "";
position:absolute;
color:#fff;
border-style:solid;
border-width:20px 10px 10px 10px;
border-color:red transparent transparent transparent;
width :0px;
height:0px;
left:20px; /* ▼の横の位置 */
bottom:-30px; /* ▼の縦の位置。線の幅によって変更する */
}
</style>
</head>
<body style="margin:0px; padding:8px; background-color:#000;">
<div class="speech_bubble" style="width:200px; height:100px;">
こんにちは
</div>
</body>
</html>
実行結果：
▼の位置を中央揃えにします。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML・CSS・JavaScript</title>
<style>
.speech_bubble {
position:relative;
color:#fff;
background-color:red;
border-radius: 8px;
}
.speech_bubble:after {
content: "";
position:absolute;
color:#fff;
border-style:solid;
border-width:20px 10px 10px 10px;
border-color:red transparent transparent transparent;
width :0px;
height:0px;
margin-left:-10px; left:50%; /* ▼の横の位置。中央揃え */
bottom:-30px; /* ▼の縦の位置。線の幅によって変更する */
}
</style>
</head>
<body style="margin:0px; padding:8px; background-color:#000;">
<div class="speech_bubble" style="width:200px; height:100px;">
こんにちは
</div>
</body>
</html>
実行結果：
