😻

【CSS】影付きの吹き出しを作成したい😭⇦A.どんな形でも作成できます！（要素の形に沿って影をつける方法も分かる🤗）

2022/09/24に公開

CSS

はじめに

「吹き出しを作成したいけど作成方法が分からない😭」
「形に沿って影をつけたいのに、四角い影しかつけられない🥺」
「カードに配置したボタンをタップした時に、吹き出しを表示したい！！！」

そんな悩みはないでしょうか?

今回は影の付いた吹き出しを簡単に作成する方法を解説させていただきます！
吹き出しの作成方法を調べることは少ないかもしれませんが、メッセージアプリの吹き出しや、カード型デザインへの応用が効くので、意外と業務や個人開発でも吹き出しを使えるポイントは多いと思います。

また、スキルに関係なくどんな人の役にも立てる記事を作成したかったので、今回は素のCSSでコードを書いています！
Vueなどで作成する場合は、しっぽの位置などをpropsで変えてあげると、使い勝手の効くコンポーネントが作成できるのでぜひ使ってみてください！

※重要になるCSSプロパティなども一緒に解説しているので、この記事だけで作成方法を覚えることができます！！！

この記事を見るメリット

吹き出しが作成できるようになる！
要素の形に沿った影をつけられる！
知らないCSSプロパティを覚えることができる！
clippathで好きな形を作れるようになる！

対象者

この記事は下記のような人を対象にしています。

プログラミング初学者
駆け出しエンジニア
駆け出しWebデザイナー
吹き出しを簡単に作成したい方
凝ったデザインを作成したい...でもなるべく楽をしたい方！

結論

以下画像の吹き出しを作成します！
吹き出しのしっぽはclippathで作成しています！

以下ソースコードです！
大まかな流れは要素を用意
HTML

<div class="example">
  <p>カードからでてくる吹き出しを作成する！</p>
</div>
<div class="popup">
  <div class="content">
    <p>ここに好きなコンテンツを入れよう！</p>
    <p>この箇所の作成方法を解説します！</p>
  </div>
</div>

CSS

/* 以下は吹き出し作成で必須のCSS */
.popup {
  position: relative;
  width: 90%;
  max-width: 200px;
  height: 120px; /* ここで吹き出しの大きさを変更する */
  background-color: #011627;
  border-radius: 5px;
  filter: drop-shadow(0px 0px 2px #38AECC);　/* 解説① */
  margin-top: 21px;
}
.popup::before {
  content: '';
  position: absolute;
  width: 25px;
  height: 17px;
  clip-path: polygon(50% 30%, 0% 100%, 100% 100%); /* 解説② */
  background-color: #011627;
  top: -16px; /* ここの数値でしっぽの位置を変更する */
  left: 25%; /* ここの数値でしっぽの位置を変更する */
  z-index: 10;
}
.popup > .content {
  padding: 5px 5%;
}

/* 以下は吹き出しとは関係ないCSS（画像通りに作成するために記述） */
* {
  margin: 0;
}
body {
  padding: 5%;
  background-color: #011627;
}
.content > p {
  font-size: 14px;
}
.content > p:nth-child(1) {
  color: #FF3366;
}
.content > p:nth-child(2) {
  color: #2EC4B6;
}

.example {
  width: 200px;
  height: 150px;
  border-radius: 5px;
  background-color: #011627;
  filter: drop-shadow(0px 0px 2px #38AECC);
}
.example > p {
  padding: 5px 5%;
  color: white;
}

解説

解説①：filter: drop-shadow();
このプロパティは疑似要素のある要素や、切り抜かれた画像に影をつけたい時に使用し、box-shadowではつけられない、形通りの影をつけることができます！
また、プロパティの使用方法は以下のようになります。

filter: drop-shadow(影の水平方向, 垂直方向, ぼかし度, 色（rgbaも可）);

box-shadowでは「擬似要素に影がつかない」&「しっぽ部分は三角なのに四角く影がついてしまう」問題があります。そんな問題を一気に解決できるので、複雑な形に影をつける際はfilter: drop-shadow();を使っていきましょう！

解説②：clip-path: polygon();
このプロパティは要素を切り抜きその部分だけを表示、いわゆるクリッピングを行うことができます。
プロパティの引数は複数持つことが可能で、x座標,y座標で指定した箇所を頂点とし、頂点と頂点を直線で繋げた形に切り抜くことができます！
使用方法は以下のようになります。

clip-path: polygon(x座標 y座標, x座標 y座標, x座標 y座標,　...座標を増やすことができる);

// 今回のサンプルでは、 以下のように座標を振り分けています。
clip-path: polygon(50% 30%, 0% 100%, 100% 100%);

第一引数:50% 30%でxは中央、yは30%下の箇所。つまり三角形の真ん中の頂点になっています。
第二引数:0% 100%でxは左端、yは一番下。つまり三角形の左の頂点になっています。
第三引数:100% 100%でxは右端、yは一番下。ここは三角形の右の頂点になっています。

簡単な形の切り抜きくらいだったらあまり考えなくても作成でき、イラレやフォトショで作成しなくてもいいので、特にチームで開発している場合はデザイナーの方に切り抜き業務を投げなくてもコーダー側で切り抜きを作成することができるので覚えておくと便利なプロパティです！

頂点を割り振るのが面倒という方でも以下のサイトでclip-pathを視覚的に生成することができます。
Clippy — CSS clip-path maker
正直難しいことは考えずこのサイトで図形を作成する方が理解が早くでいると思います🙇‍♂️
また、円形に切り抜くことのできるcircleや楕円を作成するellipseなどもあるので、興味のある方はclip-pathについて調べてみるとcssの知見が広がって面白いです！

上記のプロパティを使えるようになったら...
filter: drop-shadow(); 複雑な形でも影をつけることができる！
clip-path: polygon(); 好きな形を作成することができる！
この２つのプロパティの使い方を覚えたら、あとは組み合わせることで吹き出し以外にも自由な形、影をつけることができるので、ぜひ今後の学習や業務で使用してみてください🤗

おわりに

今回はclippathを使用して簡単に吹き出しを作成する方法を解説させていただきました。
cssだけで楽に実装できるなら、画像をわざわざ用意しなくてもいいのでサイトも軽くなり、デザイナーの負担も減らして業務効率を上げることができます！
プロパティを知っていなくても、まず　「ここはCSSだけで作成できないだろうか?🤔」と考えてみると、意外と楽に実装できることがあるので、コーディングする際は意識してみると良いかもしれないですね！

最後まで記事を見てくださりありがとうございました。
誤字や脱字、コードのリファクタリングできる箇所などがありましたらコメントくださるとありがたいです!
また、いいねをしてくださると、筆者が喜びます:)

はじめに

この記事を見るメリット

対象者

結論

解説

おわりに

Discussion