サイト移転しました → GLOSSY

     
  1. >
  2. >
  3. 画像いらず、CSS…
  • 最終更新日:
  • 投稿者: @signpostme

画像いらず、CSSだけで「吹き出し(フキダシ)」を作る便利テクニック

漫画などでおなじみの「フキダシ」。これをWebデザインに使おうと思うと、まず素材を作らなければいけませんよね。しかし、CSSの力を借りれば簡単にCSSだけでフキダシを作っちゃうことができます!コピペして使ってね!

1. HTMLの用意

まずは、フキダシにする要素を作りましょう。任意のテキストをdivで囲みます。
 

<div class="box">
	<div class="text">
		<p>画像いらず、CSSだけで「吹き出し(フキダシ)」を作る便利テクニック</p>
	</div>
	<div class="toge"></div>
</div>

 
 

CSSで吹き出しを作る

次に、CSSを使って吹き出しを作っていきます。
 

/* テキストのボックスを作成 */
.box {
	width: 400px;
	background: #333;
	border-radius: 4px;
	position: relative;
}
.text {
	padding: 16px;
}
.text p {
	text-align: center;
	font-size: 12px;
	color: #fff;
}

/* 吹き出しのトゲを作成 */
.toge {
	width: 0;
	height: 0;
	border-top: 20px solid #333;
	border-right: 14px solid  transparent;
	border-left: 14px solid transparent;
	border-bottom: 30px solid transparent;
	position: absolute;
	bottom: -40px;
	left: 5%;
}

 
 

CSS de フキダシ の完成!

画像いらず、CSSだけで「吹き出し(フキダシ)」を作る便利テクニック

 
 
 

補足と解説

このテクニックは、borderを三角形へ変形させることで、フキダシのトゲの部分を表現しています。
「transparent」は背景を透過させるプロパティで、四角形の余分なところを透過することで三角形に見せているわけです。
 
上記のコードをコピペしていただいて、テキストや背景色を変更させれば簡単に実装できますよ!
 
なお、下のトゲの位置は「left: 5%;」の値を変えてやれば調節できます。
 

新着記事を見る

TOP