こんにちは！みなさん、はじめまして開発部のusk(ゆーすけ)です！
3月からコーディングにも挑戦し始めたひよっ子プログラマですがよろしくお願いします！
今回は、自分の備忘録もかねてCSSで吹き出しを作成する方法の一例をご紹介したいと思います！
そもそも、吹き出しをCSSで作成する意味とは・・・？画像で表示してしまえば良いのでは･･･？
と考えるのも、ごもっともです。が、単純な吹き出し程度であれば、
画像で表示させるよりもCSSで作成した方がページの読み込みなどに時間をかけずに済むのです！
(･･･吹き出しの画像が読み込みを遅くする原因になるかは置いておきましょう。)
今回は、２つのパターンをご紹介したいと思います。
- 三角形を2つ重ねる方法
- 四角形の隣接した2辺のみ色付けし回転させる方法
どちらの方法もdivタグで実装したいと思います。
１．三角形を2つ重ねる方法
この方法は色のついた三角形を2つ使いそれぞれを少しズラして重ねてあたかも吹き出しのように見せる方法です！
divタグでコメント部分を実装し、擬似要素:beforeと:afterを使います。
コード例
1 2 3 | <div class="comment"> <p>1の方法で吹き出し作るよ</p> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .comment{ border: 1px solid #000; position: relative; margin-left: 100px; } .comment:before{ content: ""; position: absolute; top: 15px; left: -17px; border-right: 17px solid #000; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .comment:after{ content: ""; position: absolute; top: 15px; left: -15px; border-right: 17px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } |
実行結果例
２．四角形の隣接した2辺のみ色付けし回転させる方法
この方法は吹き出しのコメント部分と先の部分を大小2つの四角形で表現します。
小さいほうの四角形を回転させて先の部分のように使います。
１の方法と同様にコメント部分をdivタグで、擬似要素:beforeまたは:afterで先の部分を実装します。
コード例
1 2 3 | <div class="comment"> <p>2の方法で吹き出し作るよ</p> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .comment{ border: 1px solid #000; position: relative; margin-left: 100px; padding-left: 10px; } .comment:before{ content: ""; position: absolute; top: 15px; left: -11px; border-top: 1px solid #000; border-left: 1px solid #000; width: 20px; height: 20px; transform: rotate(-45deg); } |
実行結果例
まとめ
ポイントとしては、１の方法は三角形を作り、２の方法は四角形を回転させているということです！
１の方法の場合、文字との被りをそこまで気にする必要は無いかもしれないのですが、
２の方法の場合だと、あくまでも四角形を回転させているので、枠線のある部分と同じ大きさの三角形が反対側にもあるということに注意が必要で、padding-left等で文字位置をずらす必要があります！
また、2つの方法で作った吹き出しは若干形が異なるため、注意が必要です！
基本的な形は上記のように書いて色や吹き出しの位置、大きさなどは自由に変えれば対話文のように見せることも可能です！
この吹き出しの先の部分の実装方法に関しては、吹き出し以外の使い方にも利用可能です！
