css 吹き出し手書き風

CSS吹き出しでサイトに温かみをプラス！手書き風デザインの実装方法

Webサイトのデザインにおいて、ユーザーに親近感を与え、温かみを演出するために、手書き風の要素を取り入れることが増えています。特に、吹き出しは、親しみやすさと視覚的なアクセントを兼ね備えた効果的なデザイン要素です。

この記事では、CSSを使って、まるで手書きのような温かみのある吹き出しを作成する方法を分かりやすく解説します。CSSの基礎知識があれば、どなたでも簡単に実装できますので、ぜひチャレンジしてみてください。

手書き風吹き出しの基本的な作り方

まずは、シンプルなHTMLとCSSで、基本的な吹き出しを作ってみましょう。ポイントは、borderプロパティと疑似要素::beforeを使って、吹き出しの三角形の部分を表現することです。


<div class="speech-bubble">
  <p>こんにちは！</p>
</div>


.speech-bubble {
  position: relative;
  background-color: #fff;
  border: 2px solid #000;
  padding: 10px;
  border-radius: 5px;
}

.speech-bubble::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  border: 10px solid transparent;
  border-top-color: #000;
}

上記のコードでは、吹き出しの枠線の色や太さ、背景色、吹き出しの三角形の色や位置などを調整することで、様々なバリエーションの吹き出しを作成できます。

手書き風デザインを加えるテクニック

基本的な吹き出しができたところで、さらに手書き風の温かみを演出してみましょう。以下のテクニックを組み合わせることで、より個性的な吹き出しを作成できます。

1. ボーダーに凹凸をつける

border-styleプロパティをdashedやdottedにすることで、手書き風のラフな線で表現できます。


.speech-bubble {
  border: 2px dashed #000;
}

2. 背景にテクスチャを加える

背景に微妙なパターンやテクスチャを加えることで、紙のような質感を与えることができます。


.speech-bubble {
  background-image: url('paper-texture.jpg');
}

3. フォントを変える

手書き風のフォントを使うことで、より親しみやすい印象を与えることができます。日本語のフリーフォントも多数公開されていますので、探してみてください。


.speech-bubble p {
  font-family: 'Handwritten Font', cursive;
}

様々な吹き出しの形状

吹き出しの三角形部分を調整することで、吹き出しの方向や形状を自由自在に変えることができます。

吹き出しの形状 CSSコード例

右向き

吹き出しの形状	CSSコード例
右向き	`.speech-bubble::before { right: 20px; left: auto; border-right-color: #000; border-left-color: transparent; }`
上向き	`.speech-bubble::before { top: -10px; bottom: auto; left: 50%; transform: translateX(-50%); border-top-color: transparent; border-bottom-color: #000; }`


.speech-bubble::before {
  right: 20px;
  left: auto;
  border-right-color: #000;
  border-left-color: transparent;
}

上向き


.speech-bubble::before {
  top: -10px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: transparent;
  border-bottom-color: #000;
}

まとめ

CSSを使えば、比較的簡単に手書き風の温かみのある吹き出しを作成することができます。基本的な作り方をマスターしたら、今回紹介したテクニックを参考に、ぜひオリジナリティあふれる吹き出しを作ってみてください。

参考文献

MDN Web Docs

この記事に関するQ&A

Q1. 吹き出しの色や大きさを変えるにはどうすれば良いですか？

A1. 吹き出しの枠線の色や太さはborderプロパティで、背景色はbackground-colorプロパティで、大きさはwidthプロパティとheightプロパティで変更できます。

Q2. 吹き出しの三角形部分を好きな位置に移動するにはどうすれば良いですか？

A2. 吹き出しの三角形部分は、疑似要素::beforeの位置を調整することで変更できます。::beforeのtop, bottom, left, rightプロパティを使って、吹き出しに対する相対的な位置を指定します。

Q3. 吹き出しの中に画像を入れることはできますか？

A3. はい、可能です。吹き出しの中にimgタグを記述することで画像を表示できます。画像のサイズや位置は、CSSを使って調整してください。

その他の参考記事:css 吹き出しジェネレーター