【CSS自作UI】AIに頼らずCSSで吹き出し（tooltip）を作ってみた

はじめに

最近はAIにCSSを書いてもらうことも増えましたが、「自分でもUIを作れるようになりたい」と思い、吹き出しを自作してみました。

この記事では、画像を使わずにHTMLとCSSだけで作れるシンプルな吹き出しを紹介します。

実際に私が作っているChrome拡張でも使っているデザインです。

完成イメージ

実際の表示はこのようになります。

全体に丸みを帯びさせ、中央下に吹き出しの▼が出るようにしました。

また、立体感を持たせるために影を持たせました。

ツールチップとして目立ちすぎない、ちょうどいいデザインになったと思います。

CSS

<div>
    <span class="tooltip">クリックしてね！</span>
</div>

.tooltip {
  position: relative;
  padding: 8px 12px;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: #fff;
  background-color: #4b5563;
}

.tooltip::after {
  content: '';
  position: absolute;
  border-top: 10px solid #4b5563;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

解説

今回作成した吹き出しのCSSは、全体の丸い部分と下の▼部分に分けられます。

全体の丸い方を親、下の▼部分を子として扱っています。

全体の丸い部分

親として扱うので、基準となるようにposition: relative;を設定しました。

ここ単体だけだと意味がありませんが、▼部分を配置するために活きてきます。

個人的に力を入れたのがbox-shadowです。

box-shadow: 左右の向きpx 上下の向きpx ぼかしpx

全体的にぼわっと浮いているような雰囲気にしたかったので、上下方向に影を入れつつ、ぼかしのpx数を大きくしました。

ここらへんの値は好みだと思いますが、ちょうど良いぐらいの立体感が生まれたかなと思います。

参考：サルワカ - 【CSS】box-shadowで影をつける方法とサンプル集

▼部分

▼の部分は、擬似要素の::afterを使っています。

::afterについて詳しく解説するときりが無いので、私が参考にしたサイトを紹介します。

実は今まで::beforeと::afterの使い方を知らずに雰囲気で触っていたのですが、このサイトを読んでなんとなく分かりました。

私が解説するよりも詳しく記載されているので、ぜひ参考にしてください…！

参考 ::beforeと::afterについて：サルワカ - CSSの疑似要素とは？beforeとafterの使い方まとめ

▼の考え方：GRANFAIRS - CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター

終わりに

今までCSSはAIに任せて生成してきましたが、自分で思い描いた形を表現できるようになりたくて制作してみました。

すぐAIに聞きたくなるところをぐっとこらえたので、2時間ぐらいかかってしまいましたが…。

しかし、▼の描画にborderを使ったりと詳しい仕組みを知る良いきっかけになりました！

これからもCSSでUIを制作する度に紹介していくので、あなたも自分でCSS書けるように一緒に頑張りませんか？