HPでライン風の対話型吹き出しの表示に枠を付けたい！！ってなったので調べてみた。
こんにちは！ あますた(@amaguristar)です。
前回、対話型の吹き出し表示をなんとか作成。使ってみて「やっぱり枠があった方が良いよな？」ってなったので今回は枠をつけることにしました。
枠をつける方法
まず、単純に枠を作成しようと思ったら「borderプロパティ」を追加。
.balloonL{
position: relative;
display: inline-block;
padding: 20px;
border: solid 1px #000; /* 枠の設定{ 種類,幅,色 } */
border-radius: 10px;
color: #010101;
background-color: #ECECEB;
margin-left: 110px;
margin-bottom: 35px;
}
前回のコード(詳細はここをクリック)に「border」プロパティを追加設定。この状態だと
と表示されます。このままだと三角形に枠が表示されないので、三角形にも枠を表示する為に色を変更。
.balloonL::before{ /* 吹き出しの三角形作成 */
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
left: -30px;
top: 50%;
margin-top: -15px;
/* ▲の向き設定 */
border-top: 15px solid transparent;
border-right: 15px solid #000; /* ← 枠と同じ色に変更*/
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
}
この状態で表示すると、
三角形が塗りつぶされて表示。あとは背景と同じ色の三角形を少しずらして表示すると良いので、
.balloonL::after{ /* 背景と同じ色の三角形作成 */
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
left: -29px; /* 表示するx軸方向を少しずらす設定 */
top: 50%;
margin-top: -15px;
/* ▲の向き設定 */
border-top: 15px solid transparent;
border-right: 15px solid #ECECEB; /* ← 背景色と同じ色にする*/
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
}
まとめ
枠付きのコードをまとめると、
/* ================================
会話風バルーンクラス 枠付き
exp:)
<div class="baloon-wrap">
<div class="baloonRB or LB">
<img ~~~~~~ class="iconR or L">
<article> ~~~~~メッセージ~~~~</article>
</div>
<div>
show:)
「iconL」{ ~~~~~~~~メッセージ~~~~~~~~
~~~~~~~~メッセージ~~~~~~~~ } 「iconR」
caution:)
imgはデフォルトで、サイズが86x86 の正方形
imgはデフォルトで、丸くくり抜くので正方形以外だと表示がおかしくなる
==================================== */
.balloon-wrap { overflow: hidden; } /* バルーンをブロックで管理する為のラッピングクラス */
/* ←吹き出し */
.balloonLB{
position: relative; /* 絶対配置の基準宣言 */
display: inline-block; /* コンテンツのサイズによってバルーンサイズ変更 */
padding: 20px; /* パディング領域 */
border-radius: 10px; /* 吹き出しの角を丸く */
color: #010101; /* コンテンツの色 */
border: solid 1px #000; /* 枠設定{ 線の種類,太さ,色 } */
background-color: #ECECEB; /* バルーンの背景の色 */
margin-left: 110px; /* 左に空けるスペース */
margin-bottom: 35px; /* 下に空けるスペース */
}
.balloonLB .iconL{
position: absolute; /* 絶対配置宣言 */
left: -110px; /* 左に空けたスペースににアイコンを表示 */
top: 0; /* 頂点を合わせる */
width: 86px; /* アイコンの幅 */
height: 86px; /* アイコンの高さ */
border-radius: 50%; /* 画像を丸くくり抜く */
}
.balloonLB::before{ /* 吹き出しの三角形作成 */
content: ''; /* 文字は空欄 */
position: absolute; /* 絶対配置宣言 */
display: block;
width: 0;
height: 0;
left: -30px; /* 表示するx軸方向設定 */
top: 50%; /* 表示するy軸方向設定 */
margin-top: -15px; /* 作成した▲を中央寄せ */
/* ▲の向き設定 */
border-top: 15px solid transparent;
border-right: 15px solid #000; /* ← */
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
}
.balloonLB::after{ /* 枠風にする為に背景色と同じ三角形を少しずらして作成 */
content: ''; /* 文字は空欄 */
position: absolute; /* 絶対配置宣言 */
display: block;
width: 0;
height: 0;
left: -29px; /* 表示するx軸方向設定 */
top: 50%; /* 表示するy軸方向設定 */
margin-top: -15px; /* 作成した▲を中央寄せ */
/* ▲の向き設定 */
border-top: 15px solid transparent;
border-right: 15px solid #ECECEB; /* ← */
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
}
/* →吹き出し */
.balloonRB {
position: relative; /* 絶対配置の基準宣言 */
display: inline-block; /* コンテンツのサイズによってバルーンサイズ変更 */
padding: 20px; /* パディング領域 */
border-radius: 10px; /* 吹き出しの角を丸く */
border: solid 1px #000; /* 枠設定{ 線の種類,太さ,色 } */
color: #010101; /* コンテンツの色 */
background-color: #ECECEB; /* バルーンの背景の色 */
margin-right: 110px; /* 右に空けるスペース */
margin-bottom: 35px; /* 下に空けるスペース */
float: right; /* 右寄せ表示 */
}
.balloonRB .iconR{
position: absolute; /* 絶対配置宣言 */
right: -110px; /* 右に空けたスペースににアイコンを表示 */
top: 0; /* 頂点を合わせる */
width: 86px; /* アイコンの幅 */
height: 86px; /* アイコンの高さ */
border-radius: 50%; /* 画像を丸くくり抜く */
}
.balloonRB::before{ /* 吹き出しの三角形作成 */
content: ''; /* 文字は空欄 */
position: absolute; /* 絶対配置宣言 */
display: block;
width: 0;
height: 0;
right: -30px; /* 表示するx軸方向設定 */
top: 50%; /* 表示するy軸方向設定 */
margin-top: -15px; /* 作成した▲を中央寄せ */
/* ▲の向き設定 */
border-top: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #000; /* → */
}
.balloonRB::after{ /* 枠風にする為に背景色と同じ三角形を少しずらして作成 */
content: ''; /* 文字は空欄 */
position: absolute; /* 絶対配置宣言 */
display: block;
width: 0;
height: 0;
right: -29px; /* 表示するx軸方向設定 */
top: 50%; /* 表示するy軸方向設定 */
margin-top: -15px; /* 作成した▲を中央寄せ */
/* ▲の向き設定 */
border-top: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #ECECEB; /* → */
}
