サイトでラインっぽい対話型の表現ってどうやるんだ？ってなったので調べてみた
こんにちは！ あますた(@amaguristar)です。
サイトを見ているとよく対話形式の文章(ラインっぽい表示)をみる事ってありますよね？ 自分も気になったのでサクッと調べてみました。
cssでカスタム
実際にはページをみるとバルーンという名前で編集している方が多い様子。確かに言わんとしている事は何となく分かります。自分も例に習って「balloon」という名前で編集。
htmlには、
<div class=”balloon-wrap”>
<div class=”balloonL”>
<img src=”表示する画像のURL” alt=”画像の説明” class=”iconL” />
<article>こんな感じに作成できます！</article>
</div>
</div>
cssは、
/* バルーンをブロックで管理する為のラッピングクラス */
.balloon-wrap { overflow: hidden; }
/* ←吹き出しのバルーン作成 */
.balloonL{
position: relative; /* 絶対配置の基準宣言 */
display: inline-block; /* コンテンツのサイズによってバルーンサイズ変更 */
padding: 20px; /* パディング領域 */
border-radius: 10px; /* 吹き出しの角を丸く */
color: #010101; /* コンテンツの色 */
background-color: #ECECEB; /* バルーンの背景の色 */
margin-left: 110px; /* 左に空けるスペース */
margin-bottom: 35px; /* 下に空けるスペース */
}
.balloonL .iconL{
position: absolute; /* 絶対配置宣言 */
left: -110px; /* 左に空けたスペースににアイコンを表示 */
top: 0; /* 頂点を合わせる */
width: 86px; /* アイコンの幅 */
height: 86px; /* アイコンの高さ */
border-radius: 50%; /* 画像を丸くくり抜く */
}
.balloonL::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 #ECECEB; /* ← */
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
}
です。::beforeの部分で三角形を作成しています。三角形の作成について詳しく説明しているページがありますので、下記にリンクを貼っておきます。とても分かりやすいです。
右配置のバルーンは単純に左右を入れ替えるだけですが、右寄せの為にfloatを使用しています。
htmlは単純に「balloonL」「iconL」の最後を「R」に変更。
<div class=”balloon-wrap”>
<div class=”balloonR”>
<img src=”表示する画像のURL” alt=”画像の説明” class=”iconR” />
<article>こんな感じに作成できます！</article>
</div>
</div>
コードは、
/* →吹き出し */
.balloonR {
position: relative; /* 絶対配置の基準宣言 */
display: inline-block; /* コンテンツのサイズによってバルーンサイズ変更 */
padding: 20px; /* パディング領域 */
border-radius: 10px; /* 吹き出しの角を丸く */
color: #010101; /* コンテンツの色 */
background-color: #ECECEB; /* バルーンの背景の色 */
margin-right: 110px; /* 右に空けるスペース */
margin-bottom: 35px; /* 下に空けるスペース */
float: right; /* 右寄せ表示 */
}
.balloonR .iconR{
position: absolute; /* 絶対配置宣言 */
right: -110px; /* 右に空けたスペースににアイコンを表示 */
top: 0; /* 頂点を合わせる */
width: 86px; /* アイコンの幅 */
height: 86px; /* アイコンの高さ */
border-radius: 50%; /* 画像を丸くくり抜く */
}
.balloonR::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 #ECECEB; /* → */
}
「balloonR」内で「float: right;」として右寄せ。このままだと後の要素でも意図しない回り込みが発生してしまうので、「balloon-wrapクラス」に「overflow: hidden;」を書き込んで、回り込みを解除しています(解除忘れ防止対策&今後の拡張用)
まとめ
/* ================================
会話風バルーンクラス
exp:)
<div class="baloon-wrap">
<div class="baloonR or L">
<img ~~~~~~ class="iconR or L">
<article> ~~~~~メッセージ~~~~</article>
</div>
<div>
show:)
「iconL」{ ~~~~~~~~メッセージ~~~~~~~~
~~~~~~~~メッセージ~~~~~~~~ } 「iconR」
caution:)
imgはデフォルトで、サイズが86x86 の正方形
imgはデフォルトで、丸くくり抜くので正方形以外だと表示がおかしくなる
==================================== */
.balloon-wrap { overflow: hidden; } /* バルーンをブロックで管理する為のラッピングクラス */
/* ←吹き出し */
.balloonL{
position: relative; /* 絶対配置の基準宣言 */
display: inline-block; /* コンテンツのサイズによってバルーンサイズ変更 */
padding: 20px; /* パディング領域 */
border-radius: 10px; /* 吹き出しの角を丸く */
color: #010101; /* コンテンツの色 */
background-color: #ECECEB; /* バルーンの背景の色 */
margin-left: 110px; /* 左に空けるスペース */
margin-bottom: 35px; /* 下に空けるスペース */
}
.balloonL .iconL{
position: absolute; /* 絶対配置宣言 */
left: -110px; /* 左に空けたスペースににアイコンを表示 */
top: 0; /* 頂点を合わせる */
width: 86px; /* アイコンの幅 */
height: 86px; /* アイコンの高さ */
border-radius: 50%; /* 画像を丸くくり抜く */
}
.balloonL::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 #ECECEB; /* ← */
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
}
/* →吹き出し */
.balloonR {
position: relative; /* 絶対配置の基準宣言 */
display: inline-block; /* コンテンツのサイズによってバルーンサイズ変更 */
padding: 20px; /* パディング領域 */
border-radius: 10px; /* 吹き出しの角を丸く */
color: #010101; /* コンテンツの色 */
background-color: #ECECEB; /* バルーンの背景の色 */
margin-right: 110px; /* 右に空けるスペース */
margin-bottom: 35px; /* 下に空けるスペース */
float: right; /* 右寄せ表示 */
}
.balloonR .iconR{
position: absolute; /* 絶対配置宣言 */
right: -110px; /* 右に空けたスペースににアイコンを表示 */
top: 0; /* 頂点を合わせる */
width: 86px; /* アイコンの幅 */
height: 86px; /* アイコンの高さ */
border-radius: 50%; /* 画像を丸くくり抜く */
}
.balloonR::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 #ECECEB; /* → */
}
