★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

CSSだけで漫画のような吹き出しデザインを作る方法

架空の登場人物同士が話し合うような会話形式のブログだとあるキャラクターの横に吹き出しマークが表示されていることがあります。

例えばこのような吹き出しです。

こういう吹き出しは画像を使わないと表示できないと思われがちですが、実はCSSだけで画像を一切使わずに吹き出しを作ることが可能です。

ここではCSSでの吹き出しの作り方を紹介します。

吹き出しの基本的な作り方

吹き出し作りに必要になるのはafter疑似要素before疑似要素です。

この2つの疑似要素は要素の前後に指定した内容を付け加えるための疑似要素で、ある要素に対して次のように指定します。

セレクタ:before{
  content: 値;
}

セレクタ:after{
  content: 値;
}

before疑似要素要素の前に付け加えられる内容で、after疑似要素要素の後に付け加えられる内容になります。

この疑似要素を上手く活用すると要素の上下左右に吹き出しマークをつけることが可能です。

例えば次のような漫画のセリフのような吹き出しマークを作りたいとします。

この吹き出しを作るにはまず次の要素を作成します。

<div class="balloon">
  <p>こんにちは</p>
</div>

そして「balloon」というクラスを持つ要素に対して次のCSSを適用します。

/** 吹き出し本体 */
.balloon {
  position: relative;
  display: inline-block;
  padding: 5px 15px;
  width: 200px; 
  height: 50px;
  background-color: #adf;
  color: #333;
  font-weight: bold;
}

/** 吹き出しの三角形 */
.balloon:after{
  content: "";
  position: absolute;
  top: 50%; left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 30px solid #adf;
}

.balloon p {
  position: absolute;
  top: 50%; left: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin: 0;
}

このようなCSSを書くだけで吹き出しが作れます。画像は一切必要ありません。

吹き出しの三角形の位置や大きさは次のafter疑似要素内で決まります。

.balloon:after{
  content: "";
  position: absolute;
  top: 50%; left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 30px solid #adf;
}

この例では「top: 50%; left: 100%;」と指定することで三角形を左中央に移動させています。そして三角形自体はborderプロパティを使って作成可能です。

これが基本的な吹き出しの作り方です。

吹き出しの三角マークの位置

もし左・上・下方向に三角マークをつけたいなら次のようにbefore疑似要素のCSSを書き換えてください。

左方向

三角マークが左についた吹き出し

after疑似要素のCSSコード

.balloon:after{
  content: "";
  position: absolute;
  top: 50%; right: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 30px solid #adf;
}

上方向

三角マークが上方向についた吹き出し

after疑似要素のCSSコード

.balloon:after{
  content: "";
  position: absolute;
  bottom: 100%; left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 30px solid #adf;
}

下方向

三角マークが下方向についた吹き出し

after疑似要素のCSSコード

.balloon:after{
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 30px solid #adf;
}

以上CSSだけで吹き出しを作る方法について紹介しました。記事の合間にちょっとだけ吹き出しをはさむだけでも見栄えが大きく変わると思います。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press