2016/10/01ウェブデザインで吹き出しのようなデザインって使い勝手が良いんですよね。画像を使わずにCSSだけで簡単に実装できるからよく使われてるんだと思われます。いうわけで、CSSだけで簡単に作れる吹き出しの作り方をソースコード付きでご紹介します。コピペして使ってください。最後に画像を使わずにCSSだけで吹き出しを作る方法まずはHTMLの記述から。<p>テキストが入ります</p></div>HTMLの記述例として上記のようにしました。pタグをdivタグで囲う二重構造にしてますが、二重にする必要は必ずしもありません。h2タグに吹き出しを付けたりする場合もありますし、下記のような形でも良いです。class="balloon">見出し</h2>では肝心のCSSを紹介しますね。ソースコードを紹介しますので、そのあとの解説と合わせてごらんください。50%;}吹き出しのざっくり解説まず「border-なんちゃら」は吹き出しを向けたい方向以外の3方向に設定します。ここで設定したボーダーの太さが三角形の大きさになります。'';は決まり事というか、これがあるから吹き出しを形として表現することができます。あとはpositionとmarginで位置調整をします。吹き出しの方向にborderで設定した数字と同じ大きさの数字でマイナス方向に移動させます。これで三角形が飛び出してきます。-10px;)してます。これで真ん中あたりに配置することができます。最後に今回紹介したのは吹き出しの三角形部分が中央に来るパターンでしたので、位置の調整などはお好みでカスタマイズしてみてください。※それぞれのソースコードに添えた画像はフォトショで作ったイメージ画像なので、CSSをコピペして使ってもそのままの形にはなりません。