コピペで簡単 CSS で吹き出しを作る方法

Posted by Takumi Hirashima HTMLCSS

コピペで簡単 CSS で吹き出しを作る方法

コピペで簡単 CSS で吹き出しを作る方法を紹介します。
例えば、画像を使わずに吹き出しを作りたいときに便利な方法です。

CSSで吹き出しを作る方法

CSS だけで吹き出しを作る場合は、CSS セレクタの擬似要素 ::before::after を使います。
実際の見た目はこんな感じです。

吹き出し

ベースの HTML は次の通りです。

<div class="fukidashi">吹き出し</div>

CSS はこちら。

.fukidashi {
position: relative;
width: 240px;
margin: 0 auto;
padding: 15px;
font-size: 16px;
line-height: 1.3;
text-align: center;
letter-spacing: 0.05em;
background-color: #fff;
border-radius: 8px;
}
.fukidashi::before {
content: "";
position: absolute;
bottom: -30px;
left: 50%;
width: 0;
height: 0;
margin-left: -15px;
border: 15px solid transparent;
border-top-color: #fff;
}

吹き出しの三角形は、擬似要素にボーダーを使った三角形を使って表現します。
三角形の詳しい作り方はコピペで簡単 CSS で三角形を作る方法をご覧ください。

吹き出しに影をつける方法

影をつける場合は CSS セレクタの box-shadow を使うのが一般的ですが、これだと擬似要素を含めて影をつけることができません。
擬似要素を含めて影をつけたい場合は filter:drop-shadow を使います。
影をつける場合は先に紹介した CSS に次のコードを追加します。

.fukidashi {
-webkit-filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
-moz-filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
-ms-filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
}

まとめ

コピペで簡単 CSS で吹き出しを作る方法を紹介しました。

スポンサーリンク