コーディングメソドロジー

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

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

CSSで吹き出しを作るポイントは2つ。1.「border」で三角形を作る 2.疑似要素の「:after」を使用する

1. borderで三角形を作る

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

borderを理解する

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

borderを理解する

borderで様々な三角形を作る

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

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

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

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

2. 疑似要素を使用する

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

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

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

2. 疑似要素を使用する

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム