考えごと風、顔つき吹き出し

サルワカさんの   CSSで作る！吹き出しデザインのサンプル19選からのコピペです。

５つ目の　“考えごと風”　の吹き出しを　“会話風”　にして、使わせていただいてます。

スマホで見ると、フェイスアイコンとコメントの間にある、大小の丸が、あらぬ方向に行ってしまうので、

ここだけ、レスポンシブルで変更してます。

before と　after で、bottom　の数字を調整してます。

　“考えごと風”　と　“会話風”　を、組み合わせたので、クラス名を変更してます。色は、このブログと同色になってます。

　
◎html

1. <div class="balloon-think">
2. <div class="faceicon"><img src="キャラクター画像url"></div>
3. <div class="chatting">
4. <div class="kotoba">
5. <p>コメント</p>
6. </div>
7. </div>
8. </div>

　
　
　 ◎css　

1. .balloon-think {
2.   width: 95%;
3.   margin: 0.5em 0;
4.   overflow: hidden;
5. }
6. .balloon-think .faceicon {
7.   float: left;
8.   margin-right: -90px;
9.   margin: 1em 0;
10.   width: 70px;
11. }
12. .balloon-think .faceicon img{
13.   width: 100%;
14.   height: auto;
15.   border: solid 4px #A52A2A;
16.   border-radius: 50%;
17.   box-shadow:2px 2px 2px #FD2D2D2;
18. }
19. .balloon-think .chatting {
20.   width: 100%;
21. }
22. .kotoba {
23.   position: relative;
24.   margin: 0em 0 2em 108px;
25.   padding: 15px;
26.   background: #ECDE99;
27.   border-radius: 30px;
28.   box-shadow:2px 2px 2px #Fcdcdcd;
29. }
30. .kotoba:before {
31.   content: "";
32.   position: absolute;
33.   left: -38px;
34.   width: 12px;
35.   height: 12px;
36.   bottom: 25px;
37.   background: #ECDE99;
38.   border-radius: 50%;
39.   box-shadow:2px 2px 2px #cdcdcd;
40. }
41. .kotoba:after {
42.   content: "";
43.   position: absolute;
44.   left: -24px;
45.   width: 19px;
46.   height: 18px;
47.   bottom: 35px;
48.   background: #ECDE99;
49.   border-radius: 50%;
50.   box-shadow:2px 2px 2px #cdcdcd;
51. }
52. .kotoba p {
53.   margin: 0;
54.   padding: 0;
55. }
56. /*-----スマホ-----*/
57. @media screen and (max-width:480px) {
58. .kotoba:before {
59.   content: "";
60.   position: absolute;
61.   left: -38px;
62.   width: 13px;
63.   height: 12px;
64.   bottom: 70px;
65.   background: #ECDE99;
66.   border-radius: 50%;
67.   box-shadow:2px 2px 2px #cdcdcd;
68. }
69. .kotoba:after {
70.   content: "";
71.   position: absolute;
72.   left: -24px;
73.   width: 20px;
74.   height: 18px;
75.   bottom: 80px;
76.   background: #ECDE99;
77.   border-radius: 50%;
78.   box-shadow:2px 2px 2px #cdcdcd;
79. }
80. }

iPhone用　文字を小さくして、もっと位置を上げてます。

1. @media screen and (max-width: 320px) {
2. .kotoba:before {
3.   content: "";
4.   position: absolute;
5.   left: -38px;
6.   width: 13px;
7.   height: 12px;
8.   bottom: 120px;
9.   background: #ECDE99;
10.   border-radius: 50%;
11.   box-shadow:2px 2px 2px #cdcdcd;
12. }
13. .kotoba:after {
14.   content: "";
15.   position: absolute;
16.   left: -24px;
17.   width: 20px;
18.   height: 18px;
19.   bottom: 130px;
20.   background: #ECDE99;
21.   border-radius: 50%;
22.   box-shadow:2px 2px 2px #cdcdcd;
23. }
24. .kotoba p {
25. 　font-size: -80%;
26.   margin: 0;
27.   padding: 0;
28. }
29. }

「headに要素を追加」

1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

saruwakakun.com