【コピペでできる!】CSSでLINEのような会話風吹き出しを作ってみた

Share

最終更新 2018.01.25

no-img2
sakuraba

こんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。

本記事では、こんな感じの会話・チャット形式の吹き出しをつくるHTMLとCSSを紹介します!!

参考にしたのは以下のサイトです。
参考画像と吹き出しテキストで会話風にするHTMLとCSS。

こちらの記事の内容を少しだけ編集し、オシャレに簡単にぼく好みにわかりやすくまとめました!!

スポンサーリンク

おしゃれな会話・チャット形式CSSをつくってみた

今回コピペでつくるのは、「左からの吹き出し」と「右からの吹き出し」、さらに吹き出しを装飾するCSS3つです!!

かほちゃん、みほちゃんよろしくね!!
※たまに登場してもらっています。(毎回名前が違います。キャラ設定せな。笑)

no-img2
かほ

は〜い、sakurabaよろしく!!

no-img2
みほ

きちんと教えてあげてくださいね!!はーと。

こんな吹き出しを作っていきます!!コピペしていきます。笑

作業の際はかならずバックアップを取ってからおこなってください。

利用するコード

冒頭でも説明した通りHTMLのコードが2つ、左側の吹き出しと、右側の吹き出し。

そしてCSSコードです。

HTML、左側からの吹き出し

no-img2
かほ

まずはわたしのコードを紹介するよ〜〜〜

それがこちら!!どん!

      

コード内の、「画像のURL」、「名前」、「チャットの内容」を編集することで画像と名前と吹き出しの中身を自由に編集することができます!

HTML、右側からの吹き出し

no-img2
みほ

やほ〜!みんなわかるかな〜??

右からがこちら!!

      

この2つのHTMLをエディタに貼り付けて利用します。

CSS

最後に、これまでのHTMLコードだけではただの画像とテキストになってしまうので装飾を加えていきます!!

      

かなりの量です!!

no-img2
かほ

sakurabaよくこんなの作ったね!!

no-img2
みほ

さすがsakuraba氏!できる男は違う!

すんません。ほぼコピペです。笑

CSSはみなさんが利用しているスタイルシートに貼り付けて利用してください。

工夫したところは、テキストの枠が分量に応じて適宜長くなったり短くなったりしてくれます!! これが一番大変だった。

最後に

最近チャット形式が流行っているみたいです!!

ぜひ、活用いただけたら嬉しく思います。

ではでは〜〜

no-img2
かほ

この記事がGoodだったらSNSで拡散よろしく!!

この記事を書いた人。
1992年生まれ。フリーなエンジニア。書きたいことを気ままに書いてます!
好きなことは夏の神宮でビール片手に野球観戦、Appleオタ
趣味は、ゴールデン街散策・Web・IT・ものつくりの開発・勉強などなど

スポンサーリンク

Share

Follow



『【コピペでできる!】CSSでLINEのような会話風吹き出しを作ってみた』へのコメント

  1. 名前:キラ・テスタロッサ 投稿日:2018/01/25(木) 16:20:14 ID:290598c36 返信

    チャット風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行目

    • 名前:sakurabaaa_g 投稿日:2018/01/25(木) 22:04:55 ID:2837ed9f3 返信

      ご指摘ありがとうございました。
      修正しましたので、ご確認いただけましたら幸いです。