CSSをつかって「ふきだし」をつくる | ::before, ::after

作成:2018.09.15 04:00 更新:2019-10-31T13:07:58Z

こんにちは！きっしーです。

今日は、CSSの擬似要素をつかってふきだしをつくってみます。ふきだしをつくるには、CSSで円や三角形をつくる必要があります。

CSSで円や三角形をつくる方法は、こちらの記事を参考にしてください。

CSSをつかって三角形を作るよ！ | ::before
CSSをつかって円をつくるよ！ | border-radius

擬似要素とはなに？

擬似要素はHTMLにもともと存在しない要素を作るCSSの機能です。

HTMLは本来文章を書くためのもので、デザイン的な要素はCSSの役割です。

擬似要素を使用せずに複雑なデザイン、たとえばふきだしのようなデザインをしようとすると、画像やdiv要素をHTMLに書く必要がありました。

これでは、HTMLにデザイン目的の要素が入り、HTMLを編集するのが難しくなります。

そこで、擬似要素の登場です。

CSSの擬似要素をつかうと、HTMLにない要素を挿入できます。

これによって、デザイン目的の要素はCSSに追い出すことができ、 HTMLには文書のみを記載すればよくなります。

CSSの擬似要素をつかうと、HTMLの文書構造をたもちつつ、複雑なデザインを作ることができます。

ふきだし風の見出しをつくる（背景ぬりつぶし）

まずはかんたんな、背景ぬりつぶしのふきだしをつくってみます。

ふきだしのコメントを入れる四角形に、三角形をくっつけてつくります。 この三角形は文書に関係がないので、擬似要素でつくってやるわけです。

<h2>ふきだし風な見出し（背景ぬりつぶし）</h2>

h2 { 
  position: relative; 
  padding:  0.5em; 
  margin-bottom:  15px; 
  border:  2px  #dddddd;  
}

h2::before { 
  position: absolute; 
  content:  ''; 
  left:  30px; 
  bottom:  -15px; 
  width:  0px; 
  height:  0px; 
  border-top: solid 15px  #dddddd;
  border-right: solid 15px transparent; 
  border-bottom: solid 0px transparent; 
  border-left: solid 15px transparent;  
}

考えごと風の見出しをつくる（背景ぬりつぶし）

「 CSSをつかって円を作るよ！ | border-radius 」の記事でつくった円をつかって、考えごと風な見出しを作ってみます。

<h2>考えごと風な見出し（背景ぬりつぶし）</h2>

h2 { 
  position: relative; 
  padding:  0.5em; 
  border-radius:  3px; 
  margin-bottom:  15px; 
  border:  2px  #dddddd;  
}

h2::before { 
  position: absolute; 
  content:  ''; 
  left:  -50px; 
  bottom:  0px; 
  width:  10px; 
  height:  10px; 
  border-radius:  50%; 
  background:  #dddddd;  
}

h2::after {
  position: absolute; 
  content:  ''; 
  left:  -30px; 
  bottom:  0px; 
  width:  15px; 
  height:  15px; 
  border-radius:  50%; 
  background:  #dddddd;  
}

ふきだし風の見出しをつくる（ボーダー）

つぎに、背景を塗りつぶさないボーダーだけのふきだしを作ります。

単純に四角形の背景色をなしにして、ボーダーだけにしてもうまくいきません。それに、三角形はボーダーで作っているので、ボーダーだけにできませんね。

<h2>ふきだし風な見出し（ボーダー）</h2>

h2 { 
  position: relative; 
  padding:  0.5em; 
  margin-bottom:  15px; 
  border:  2px  #dddddd;  
} 

h2::before { 
  position: absolute; 
  content:  ''; 
  left:  30px; 
  bottom:  -15px; 
  width:  0px; 
  height:  0px; 
  border-top: solid 15px  #dddddd;
  border-right: solid 15px transparent; 
  border-bottom: solid 0px transparent; 
  border-left: solid 15px transparent;  
}

そこで、もうひとつボーダーカラーを白にした三角形をずらして重ねることで、ボーダーのみを残すという、トリッキーなテクニックをつかいます！

上に重ねるので、::after擬似要素をつかっています。

<h2>ふきだし風な見出し（ボーダー）</h2>

h2 { 
  position: relative; 
  padding:  0.5em; 
  margin-bottom:  15px; 
  border:  2px  #dddddd;  
}

h2::before { 
  position: absolute; 
  content:  ''; 
  left:  30px; 
  bottom:  -15px; 
  width:  0px; 
  height:  0px; 
  border-top: solid 15px  #dddddd;
  border-right: solid 15px transparent; 
  border-bottom: solid 0px transparent; 
  border-left: solid 15px transparent;
}

h2::after { 
  position: absolute; 
  content:  ''; 
  left:  30px; 
  bottom:  -13px; 
  width:  0px; 
  height:  0px; 
  border-top: solid 15px  #ffffff; 
  border-right: solid 15px transparent; 
  border-bottom: solid 0px transparent; 
  border-left: solid 15px transparent;  
}