吹き出しをCSSで作る方法。

ワードプレスで、見出しを吹き出しのデザインにしているブログを良く見かけます。
それで、今回は吹き出しをCSSで作ってみることにしました。
<div>タグでコードを書いていますが、ここを<h2>のような見出しタグに変更してカスタマイズすると吹き出し型の見出しを作ることができますよ。
ぜひ活用してみてください。

CSSで吹き出しを作る方法

右向きの吹き出し

角丸ボックスに、ボーダーの左辺だけを見せた幅も高さも0のボックスを付けています。
背景を塗って、文字色を白で表示。


このHTMLタグの「コメント」の部分に任意の文章を入れます。

そして、スタイルシートに以下のスタイルを記載します。

左向きの吹き出し

角丸ボックスに、ボーダーの右辺だけを見せた幅も高さも0のボックスを付けています。
白色の幅も高さも0のボックスをずらして重ねることで、吹き出し部分にボーダーがあるように見せています。


このHTMLタグの「コメント」の部分に任意の文章を入れます。

そして、スタイルシートに以下のスタイルを記載します。

下向きの吹き出し

角丸ボックスに、ボーダーの上辺だけを見せた幅も高さも0のボックスを付けています。
背景を塗って、文字色を白で表示。

このHTMLタグの「コメント」の部分に任意の文章を入れます。

そして、スタイルシートに以下のスタイルを記載します。

上向きの吹き出し

角丸ボックスに、ボーダーの下辺だけを見せた幅も高さも0のボックスを付けています。
白色の幅も高さも0のボックスをずらして重ねることで、吹き出し部分にボーダーがあるように見せています。

このHTMLタグの「コメント」の部分に任意の文章を入れます。

そして、スタイルシートに以下のスタイルを記載します。

ジェネレータの紹介

必要事項を入力すると、吹き出しのCSSを出してくれる便利なジェネレーターもあります。CSSが良く分からない場合でも、これなら使えそうです😊
http://cssarrowplease.com/

 Google+ B はてブ  LINE  Feedly

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください