Coding Methodology

CSSのborderと疑似要素で吹き出しを作る

2014 / 10 / 31

最近は便利なCSSジェネレーターが増え、自分でCSSを書かなくても多様な表現が可能になりました。ただ、思い通りの形にならないこともあるので、自分で調整できるよう理解しておくことも大切です。
そこで今回は、画像を使わずにCSSだけで吹き出しを作る方法をご紹介したいと思います。この方法を理解すれば、吹き出しのカスタマイズが可能になるだけでなく、要素に色々なアクセントを付けることができるようになります。

CSSのborderと疑似要素で吹き出しを作る

CSSで吹き出しを作るポイントは2つ。

  1. 「border」で三角形を作る
  2. 疑似要素の「:after」を使用する

1. borderで三角形を作る

まず、吹き出しのトンガリ部分を「border」で作ります。
「border」は本来、要素の外側を囲む線として用いられますが、その特性を理解することで三角形や台形を作ることができます。

borderを理解する

「border」は下図(左)のように、2辺の境界が要素の対角線になるため斜めになっています。1辺に注目すると形が台形になっていることがわかると思います。そして、要素の幅と高さをゼロにすると下図(右)のように1辺の形が三角形に変わります。この三角形を利用していきます。

borderで様々な三角形を作る

幅と高さをゼロにした先ほどの「border」から使いたい三角形を残し、他の三角部分の色を透明(tranceparent)にします。

上下左右のborder幅を調節することで、様々な三角形を作ることができます。

2. 疑似要素を使用する

疑似要素「:before」「:after」は、対象となる要素の前または後ろに「content」プロパティで指定した内容を追加することができます。
今回は、疑似要素の中にborderの三角形を作り、絶対配置で吹き出しの形を作ります。(元となる要素に「position: relative;」を指定する。)

三角形の向きと絶対配置の位置を調節することで、上下左右好きな向きの吹き出しを作ることができます。

HTML

<p class="sample">元となる要素</p>

CSS

.sample {
  position: relative;
  color: #fff;
  background: red;
  padding: 10px 13px;
  margin-top: 10px;
  border-radius: 3px;
}

.sample::after {
  content: "";
  position: absolute;
  top: -10px; /* 三角の高さ分 上に出っ張らせる */
  left: 10px; /* 左からの位置 */
  height: 0;
  width: 0;
  border-width: 0 2px 10px 6px;
  border-style: solid;
  border-color: transparent transparent red;
}

吹き出しを作ってくれるジェネレーターで土台を作り、それをカスタマイズする方法もおすすめです。
ジェネレーター:「CSS ARROW PLEASE!」
http://cssarrowplease.com/

一覧に戻る

CODING FACTORYのWebサイトにご訪問いただき、ありがとうございます!サイトの改善や情報発信に活かすために、個人情報保護方針に基づいたCookieの取得と利用のご同意をお願いいたします!
個人情報保護方針の詳細