こんにちは！！ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。
本記事では、こんな感じの会話・チャット形式の吹き出しをつくるHTMLとCSSを紹介します！！
参考にしたのは以下のサイトです。
参考画像と吹き出しテキストで会話風にするHTMLとCSS。
こちらの記事の内容を少しだけ編集し、オシャレに簡単にぼく好みにわかりやすくまとめました！！
おしゃれな会話・チャット形式CSSをつくってみた
今回コピペでつくるのは、「左からの吹き出し」と「右からの吹き出し」、さらに吹き出しを装飾するCSSの３つです！！
かほちゃん、みほちゃんよろしくね！！
※たまに登場してもらっています。(毎回名前が違います。キャラ設定せな。笑)
は〜い、sakurabaよろしく！！
きちんと教えてあげてくださいね！！はーと。
こんな吹き出しを作っていきます！！コピペしていきます。笑
利用するコード
冒頭でも説明した通りHTMLのコードが２つ、左側の吹き出しと、右側の吹き出し。
そしてCSSコードです。
HTML、左側からの吹き出し
まずはわたしのコードを紹介するよ〜〜〜
それがこちら！！どん！
コード内の、「画像のURL」、「名前」、「チャットの内容」を編集することで画像と名前と吹き出しの中身を自由に編集することができます！
HTML、右側からの吹き出し
やほ〜！みんなわかるかな〜？？
右からがこちら！！
この２つのHTMLをエディタに貼り付けて利用します。
CSS
最後に、これまでのHTMLコードだけではただの画像とテキストになってしまうので装飾を加えていきます！！
かなりの量です！！
sakurabaよくこんなの作ったね！！
さすがsakuraba氏！できる男は違う！
すんません。ほぼコピペです。笑
CSSはみなさんが利用しているスタイルシートに貼り付けて利用してください。
工夫したところは、テキストの枠が分量に応じて適宜長くなったり短くなったりしてくれます！！ これが一番大変だった。
最後に
最近チャット形式が流行っているみたいです！！
ぜひ、活用いただけたら嬉しく思います。
ではでは〜〜
この記事がGoodだったらSNSで拡散よろしく！！
この記事を書いた人。
20代。とあるネットベンチャーでがんばる働き屋さん、ブロガー。
書きたいことを気ままに書いてます！
Python、プログラミング、米株、カメラ、野球観戦がすき。趣味は新宿散策。
チャット風CSSを探しているときに、こちらの記事を見つけました。
急いでおりましたので、非常に助かりました。
ですあ、記事の内容をそのままコピペするとエラーが出る箇所を見つけましたので、以下のように修正していただいたほうが良いかと思われます。
対象
.kaiwa-text-right:before
.kaiwa-text-right:after
.kaiwa-text-left:before
.kaiwa-text-left:after
内容
誤：『content: “;』
正：『content: ”;』
以下、修正させていただいたソースになります
>> 73行目
/* 左の三角形を作る */
.kaiwa-text-right:before {
position: absolute;
content: ”;
border: 10px solid transparent;
top: 15px;
left: -20px;
}
.kaiwa-text-right:after {
position: absolute;
content: ”;
border: 10px solid transparent;
border-right: 10px solid #eee;
top: 15px;
left: -19px;
}
/* 右の三角形を作る */
.kaiwa-text-left:before {
position: absolute;
content: ”;
border: 10px solid transparent;
top: 15px;
right: -20px;
}
.kaiwa-text-left:after {
position: absolute;
content: ”;
border: 10px solid transparent;
border-left: 10px solid #9cd6e7;
top: 15px;
right: -19px;
}
>> 96行目