CSS3で新たに追加されたプロパティを用いれば、かつては画像を用意しなければできなかったようなさまざまな表現が可能です。
この記事では、会話風のフキダシをHTMLとCSSで表現するときのフキダシのしっぽの部分をbox-shadowプロパティで表現する方法をご紹介。
CSS3で新たに追加されたプロパティを用いれば、かつては画像を用意しなければできなかったようなさまざまな表現が可能です。 box-shadowプロパティはボックスモデルの要素に影を追加するプロパティで ... 続きを見る
box-shadowプロパティの基本についてはこちらの記事を参考しにしてください。↓
【CSS】影だけじゃないbox-shadowプロパティの使い方
会話風フキダシの基本的な作り方
HTMLとCSSで会話風のフキダシを表現する場合、フキダシ本体をボックスモデルでレイアウトし、しっぽをそのボックスのafter（またはbefore）擬似要素でレイアウトするのが一般的です。
フキダシ本体
ここでは仮に<div class="fukidasi sample">...</div>という要素をフキダシ本体とし、親ボックス<div class="kaiwa">...</div>で包含します。
フキダシ本体の背景色はskyblue としました。
<div class="kaiwa sample"> <div class="fukidasi"> こんにちは </div> </div>
.kaiwa.sample {
border: 1px solid #999;/*縁線*/
background: white;/*背景色*/
overflow: hidden;/*はみだし非表示*/
}
.kaiwa.sample .fukidasi {
position: relative;/*擬似要素の位置指定の基準に*/
display: inline-block;/*横幅を成り行きに*/
max-width: 192px;/*フキダシの最大幅*/
margin: 9px 12px;/*マージン*/
padding: 9px 14px;/*フキダシ内余白*/
background: skyblue;/*背景色*/
border-radius: 19px;/*角丸*/
overflow-wrap: break-word;/*英文がフキダシから溢れないように*/
}
表示結果
上記のソースコードに加えて、after擬似要素を定義してしっぽになるボックスを作ります。
フキダシのしっぽ
まず、単純な正方形のボックスを配置したソースコードの例を示します。位置関係がわかりやすいように擬似要素は別色（steelblue ）にしました。
.kaiwa.sample .fukidasi::after {
position: absolute;/*親要素に対して絶定配置*/
content: "";/*内容は空*/
display: block;/*ブロックレベル要素に*/
left: 0;/*左端からの距離*/
top: 0;/*上端からの距離*/
width: 20px;/*横幅*/
height: 20px;/*高さ*/
background: steelblue;/*背景色*/
}
表示結果
この正方形の形状を工夫してしっぽにします。
LINE風
LINE風では、表示結果の親ボックスの背景色を本家に寄せて#769ece にしています。
<div class="kaiwa line"> <div class="fukidasi"> こんにちは </div> </div>
.kaiwa.line {
border: 1px solid #999;/*縁線*/
background:#769ece;/*背景色*/
overflow: hidden;/*はみだし非表示*/
}
.kaiwa.line .fukidasi {
position: relative;/*擬似要素の位置指定の基準に*/
display: inline-block;/*横幅を成り行きに*/
max-width: 192px;/*フキダシの最大幅*/
margin: 9px 12px;/*マージン*/
padding: 9px 14px;/*フキダシ内余白*/
background: white;/*背景色*/
border-radius: 19px;/*角丸*/
overflow-wrap: break-word;/*英文がフキダシから溢れないように*/
}
.kaiwa.line .fukidasi::after {
position: absolute;/*親要素に対して絶定配置*/
content: "";/*追加する中身はなし*/
display: block;/*ブロックレベル要素に*/
left: -10px;/*左端からの距離*/
top: -21px;/*上端からの距離*/
width: 24px;/*横幅*/
height: 36px;/*高さ*/
border-radius: 18px 0 6px 18px/18px 0 1px 18px;/*角丸*/
box-shadow: -3px -15px 0 -5px white inset;/*影*/
}
表示結果
わかりやすいように、親ボックスの背景色を#ddd に（3行目）、フキダシ本体の背景色をskyblue に（12行目）、しっぽの色（＝擬似要素の影の色）をsteelblue に（26行目）変えてみます。また、透明にしていた擬似要素の背景色を記述します（24行目bacground:white; ）。
<div class="kaiwa line2"> <div class="fukidasi"> こんにちは </div> </div>
.kaiwa.line2 {
border: 1px solid #999;/*縁線*/
background: #ddd;/*背景色*/
overflow: hidden;/*はみだし非表示*/
}
.kaiwa.line2 .fukidasi {
position: relative;/*擬似要素の位置指定の基準に*/
display: inline-block;/*横幅を成り行きに*/
max-width: 192px;/*フキダシの最大幅*/
margin: 9px 12px;/*マージン*/
padding: 9px 14px;/*フキダシ内余白*/
background: skyblue;/*背景色*/
border-radius: 19px;/*角丸*/
overflow-wrap: break-word;/*英文がフキダシから溢れないように*/
}
.kaiwa.line2 .fukidasi::after {
position: absolute;/*親要素に対して絶定配置*/
content: "";/*追加する中身はなし*/
display: block;/*ブロックレベル要素に*/
left: -10px;/*左端からの距離*/
top: -21px;/*上端からの距離*/
width: 24px;/*横幅*/
height: 36px;/*高さ*/
background: white;/*背景色*/
border-radius: 18px 0 6px 18px/18px 0 1px 18px;/*角丸*/
box-shadow: -3px -15px 0 -5px steelblue inset;/*影*/
}
表示結果
次に、このしっぽの形状がどのように作られているのかわかりやすいように、工程を分解してみます。
LINE風フキダシのしっぽ
しっぽの形を作っている仕組みを、工程を分解して<div class="tail-line"></div>でシミュレーションしてみます。
※図は原寸ではありません。
<div class="tail-line"></div>
まず、box-shadowプロパティを適用するための角丸長方形 - というより歪んだ半円のような形の設定。
.tail-line {
width: 24px;
height: 36px;
background: white;
border-radius: 18px 0 6px 18px/18px 0 1px 18px;
}
続いて、box-shadowプロパティを指定。insetでブロックの内側の影にします。
.tail-line {
width: 24px;
height: 36px;
background: white;
border-radius: 18px 0 6px 18px/18px 0 1px 18px;
box-shadow: -3px -15px 0 0 steelblue inset;
}
box-shadowの影の形状を-5pxで縮小します。
.tail-line {
width: 24px;
height: 36px;
background: white;
border-radius: 18px 0 6px 18px/18px 0 1px 18px;
box-shadow: -3px -15px 0 -5px steelblue inset;
}
拡大（縮小）の値を設定することで、対象要素の角丸と異なる形状になるところがミソです。
フキダシにLINE風しっぽを配置
上記のように<div class="tail-line"></div>のシミュレーションで記述したスタイルシートの他に、擬似要素として指定位置に配置するのに必要な次の17〜21行目のプロパティを追加したのが最終的なスタイルシートです。
最終的には擬似要素の背景を透明とするのでbackgroundプロパティは記述していません。
また、box-shadowのカラーを変更しています。
20行目leftプロパティ、21行目topプロパティの値については、下の図をご参照ください。
.kaiwa.line .fukidasi::after {
position: absolute;/*親要素に対して絶定配置*/
content: "";/*追加する中身はなし*/
display: block;/*ブロックレベル要素に*/
left: -10px;/*左端からの距離*/
top: -21px;/*上端からの距離*/
width: 24px;/*横幅*/
height: 36px;/*高さ*/
border-radius: 18px 0 6px 18px/18px 0 1px 18px;/*角丸*/
box-shadow: -3px -15px 0 -5px white inset;/*影*/
}
iPhoneのメッセージ風
iPhoneのメッセージアプリ風です。
<div class="kaiwa imessage"> <div class="fukidasi"> こんにちは </div> </div>
.kaiwa.imessage {
border: 1px solid #999;/*縁線*/
background: white;/*背景色*/
overflow: hidden;/*はみだし非表示*/
}
.kaiwa.imessage .fukidasi {
position: relative;/*擬似要素の位置指定の基準に*/
display: inline-block;/*横幅を成り行きに*/
max-width: 192px;/*フキダシの最大幅*/
margin: 9px 12px;/*マージン*/
padding: 9px 14px;/*フキダシ内余白*/
background: #e9e9ed;/*背景色*/
border-radius: 19px;/*角丸*/
overflow-wrap: break-word;/*英文がフキダシから溢れないように*/
}
.kaiwa.imessage .fukidasi::after {
position: absolute;/*親要素に対して絶定配置*/
content: "";/*追加する中身はなし*/
display: block;/*ブロックレベル要素に*/
left: -6px;/*左端からの距離*/
bottom: 0;/*下端からの距離*/
width: 17px;/*横幅*/
height: 19px;/*高さ*/
border-radius: 0px 0 17px 0px/ 0px 0 13px 0;/*角丸*/
box-shadow: -14px 2px 0 -3px #e9e9ed inset;/*影*/
}
表示結果
わかりやすいように、親ボックスの背景色を#ddd に（3行目）、フキダシ本体の背景色をskyblue に（12行目）、しっぽの色（＝擬似要素の影の色）をsteelblue に（26行目）変えてみます。また、透明にしていた擬似要素の背景色を記述します（24行目bacground:white; ）。
<div class="kaiwa imessage2"> <div class="fukidasi"> こんにちは </div> </div>
.kaiwa.imessage2 {
border: 1px solid #999;/*縁線*/
background: #ddd;/*背景色*/
overflow: hidden;/*はみだし非表示*/
}
.kaiwa.imessage2 .fukidasi {
position: relative;/*擬似要素の位置指定の基準に*/
display: inline-block;/*横幅を成り行きに*/
max-width: 192px;/*フキダシの最大幅*/
margin: 9px 12px;/*マージン*/
padding: 9px 14px;/*フキダシ内余白*/
background: skyblue;/*背景色*/
border-radius: 19px;/*角丸*/
overflow-wrap: break-word;/*英文がフキダシから溢れないように*/
}
.kaiwa.imessage2 .fukidasi::after {
position: absolute;/*親要素に対して絶定配置*/
content: "";/*追加する中身はなし*/
display: block;/*ブロックレベル要素に*/
left: -6px;/*左端からの距離*/
bottom: 0;/*下端からの距離*/
width: 17px;/*横幅*/
height: 19px;/*高さ*/
background: white;/*背景*/
border-radius: 0px 0 17px 0px/ 0px 0 13px 0;/*角丸*/
box-shadow: -14px 2px 0 -3px steelblue inset;/*影*/
}
表示結果
次に、このしっぽの形状がどのように作られているのかわかりやすいように、工程を分解してみます。
iPhoneのメッセージ風フキダシのしっぽ
しっぽの形を作っている仕組みを工程を分解して<div class="tail-imessage"></div>でシミュレーションしてみます。
※図は原寸ではありません。
<div class="tail-imessage"></div>
まず、box-shadowプロパティを適用する角丸長方形の設定。縦に少し潰れた楕円弧にします。
.tail-imessage {
width: 17px;
height: 19px;
background: white;
border-radius: 0px 0 17px 0px/ 0px 0 13px 0;
}
box-shadowプロパティを適用。insetでボックスの内側の影にします。
.tail-imessage {
width: 17px;
height: 19px;
background: white;
border-radius: 0px 0 17px 0px/ 0px 0 13px 0;
box-shadow: -14px 2px 0 0 steelblue inset;
}
box-shadowプロパティの影の形状を−3pxで縮小する。
.tail-imessage {
width: 17px;
height: 19px;
background: white;
border-radius: 0px 0 17px 0px/ 0px 0 13px 0;
box-shadow: -14px 2px 0 -3px steelblue inset;
}
フキダシにiPhoneのメッセージアプリ風しっぽを配置
上記のように<div class="tail-imessage"></div>のシミュレーションで記述したスタイルシートの他に、擬似要素として指定位置に配置するのに必要な次の17〜21行目のプロパティを追加したのが最終的なスタイルシートです。
最終的には擬似要素の背景を透明とするのでbackgroundプロパティは記述していません。
また、box-shadowのカラーを変更しています。
20行目leftプロパティ、21行目bottomプロパティの値については、下の図をご参照ください。
.kaiwa.imessage .fukidasi::after {
position: absolute;/*親要素に対して絶定配置*/
content: "";/*追加する中身はなし*/
display: block;/*ブロックレベル要素に*/
left: -6px;/*左端からの距離*/
bottom: 0;/*下端からの距離*/
width: 17px;/*横幅*/
height: 19px;/*高さ*/
border-radius: 0px 0 17px 0px/ 0px 0 13px 0;/*角丸*/
box-shadow: -14px 2px 0 -3px #e9e9ed inset;/*影*/
}
jisuijisanのオリジナルフキダシ
このブログでときどき使っているフキダシの形状です。
<div class="kaiwa mystyle"> <div class="fukidasi"> こんにちは </div> </div>
.kaiwa.mystyle {
border: 1px solid #999;/*縁線*/
background: #ddd;/*背景色*/
overflow: hidden;/*はみだし非表示*/
}
.kaiwa.mystyle .fukidasi {
position: relative;/*擬似要素の位置指定の基準に*/
display: inline-block;/*横幅を成り行きに*/
max-width: 192px;/*フキダシの最大幅*/
margin: 9px 24px;/*マージン*/
padding: 9px 14px;/*フキダシ内余白*/
background: white;/*背景色*/
border-radius: 19px;/*角丸*/
overflow-wrap: break-word;/*英文がフキダシから溢れないように*/
}
.kaiwa.mystyle .fukidasi::after {
position: absolute;/*親要素に対して絶定配置*/
content: "";/*追加する中身はなし*/
display: block;/*ブロックレベル要素に*/
left: -22px;/*左端からの距離*/
top: 5px;/*上端からの距離*/
width: 26px;/*横幅*/
height: 26px;/*高さ*/
border-radius: 0 0 10px 16px;
box-shadow: -8px -14px 0 -8px #fff inset;
}
表示結果
わかりやすいように、親ボックスの背景色を#ddd に（3行目）、フキダシ本体の背景色をskyblue に（12行目）、しっぽの色（＝擬似要素の影の色）をsteelblue に（26行目）変えてみます。また、透明にしていた擬似要素の背景色を記述します（24行目bacground:white; ）。
<div class="kaiwa mystyle2"> <div class="fukidasi"> こんにちは </div> </div>
.kaiwa.mystyle2 {
border: 1px solid #999;/*縁線*/
background: #ddd;/*背景色*/
overflow: hidden;/*はみだし非表示*/
}
.kaiwa.mystyle2 .fukidasi {
position: relative;/*擬似要素の位置指定の基準に*/
display: inline-block;/*横幅を成り行きに*/
max-width: 192px;/*フキダシの最大幅*/
margin: 9px 24px;/*マージン*/
padding: 9px 14px;/*フキダシ内余白*/
background: skyblue;/*背景色*/
border-radius: 19px;/*角丸*/
overflow-wrap: break-word;/*英文がフキダシから溢れないように*/
}
.kaiwa.mystyle2 .fukidasi::after {
position: absolute;/*親要素に対して絶定配置*/
content: "";/*追加する中身はなし*/
display: block;/*ブロックレベル要素に*/
left: -22px;/*左端からの距離*/
top: 5px;/*上端からの距離*/
width: 26px;/*横幅*/
height: 26px;/*高さ*/
background: white;/*背景*/
border-radius: 0 0 10px 16px;
box-shadow: -8px -14px 0 -8px steelblue inset;
}
表示結果
次に、このしっぽの形状がどのように作られているのかわかりやすいように、工程を分解してみます。
jisuijisanのオリジナルフキダシのしっぽ
しっぽの形を作っている仕組みを工程を分解して<div class="tail-mystyle"></div>でシミュレーションしてみます。
※図は原寸ではありません。
<div class="tail-mystyle"></div>
まず、box-shadowプロパティを適用する角丸長方形の設定。
.tail-mystyle {
width:26px;
height:26px;
background: white;
border-radius: 0 0 10px 16px;
}
box-shadowプロパティを適用。insetでボックスの内側の影にします。
.tail-mystyle {
width:26px;
height:26px;
background: white;
border-radius: 0 0 10px 16px;
box-shadow: -8px -14px 0 0 steelblue inset;
}
box-shadowプロパティの影の形状を−8pxで縮小する。
.tail-mystyle {
width:26px;
height:26px;
background: white;
border-radius: 0 0 10px 16px;
box-shadow: -8px -14px 0 -8px steelblue inset;
}
フキダシにJisuijisanオリジナルのしっぽを配置
上記のように<div class="tail-mystyle"></div>のシミュレーションで記述したスタイルシートの他に、擬似要素として指定位置に配置するのに必要な次の17〜21行目のプロパティを追加したのが最終的なスタイルシートです。
最終的には擬似要素の背景を透明とするのでbackgroundプロパティは記述していません。
また、box-shadowのカラーを変更しています。
20行目leftプロパティ、21行目topプロパティの値については、下の図をご参照ください。
.kaiwa.mystyle .fukidasi::after {
position: absolute;/*親要素に対して絶定配置*/
content: "";/*追加する中身はなし*/
display: block;/*ブロックレベル要素に*/
left: -22px;/*左端からの距離*/
top: 5px;/*上端からの距離*/
width: 26px;/*横幅*/
height: 26px;/*高さ*/
border-radius: 0 0px 10px 16px;
box-shadow: -8px -14px 0 -8px #fff inset;
}
この記事では、フキダシのしっぽの形をどうやって作るのかを解説しました。 イガちゃん こんにちは。 まるでLINEみたいなフキダシですね。 WordPressとか各種ブログサービスで使えます。 いいでしょ。 ステキ。 こちらはiPhoneのメッセージ風。 フキダシが青なのは ... 続きを見る
実際に会話形式にフキダシを左寄せと右寄せに配置してレイアウトする方法は下記の記事をご覧ください。
HTMLとCSSで作る会話風フキダシ３選
以上、どなたかのお役に立てば。