【コピペでできる!】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で拡散よろしく!!

この記事を書いた人。
20代。とあるネットベンチャーでがんばる働き屋さん、ブロガー。
書きたいことを気ままに書いてます!
Python、プログラミング、米株、カメラ、野球観戦がすき。趣味は新宿散策。

スポンサーリンク

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 返信

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

  2. 名前:AddQuicktagと、CSSとhtmlで会話風 投稿日:2018/03/04(日) 21:25:33 ID:71168829d 返信

    […] まずは、「Simplicity」ダウンロードしてインストール 興味がある人ここから見てね↓ Simplicity そんでもってスタイルシートに貼り付ける。 私が今回最終的に参考にさせてもらったサイト […]

  3. 名前:ぽん 投稿日:2018/11/02(金) 17:02:37 ID:b99a5c986 返信

    コメント失礼します。

    ブログを始めて5ヶ月目のぽんと申します。

    記事を拝見いたしました。
    吹き出しの下に名前を書きたいと思っていたので、とても参考になりました。ありがとうございます。

    そこで一つご教授願いたのですが、はてなブログでこの記事のhtmlコードを使うと、
    https://cdn-ak.f.st-hatena.com/images/fotolife/h/higehigex/20181102/20181102165624_120.jpg

    このように上に空白ができ、htmlのpタグなどをつめると
    https://cdn-ak.f.st-hatena.com/images/fotolife/h/higehigex/20181102/20181102165621_120.jpg

    空白は消えるのですが、このように少し上にずれてしまいます。

    理想としては、チャットが真ん中あたりに来てくれれば助かるのですが、どうすればいいかわかるでしょうか、、。

    お忙しいとは存じますが、もしお分かりでしたらよろしくお願いいたしますm(_ _)m

  4. 名前:sakurabaaa_g 投稿日:2018/11/03(土) 13:33:15 ID:a8e1b5ee4 返信

    ぽんさん

    コメントありがとうございます。
    実際のブログのコードを見ることができればスムーズに確認ができるのですが、、、

    ホームページのリンクを教えていただくことはできますか?

    sakuraba

  5. 名前:ぽん 投稿日:2018/11/05(月) 02:04:12 ID:caeaa328f 返信

    ご返信ありがとうございます。

    https://www.thinking-samurai.net/entry/2018/11/01/153028
    こちらの記事の途中に、吹き出しが2つ連続しているところがあります。使っているブログははてなブログです。

    一つ目の吹き出しは、コードをそのままコピーしたものです。上2行が勝手に開いてしまう状態です。
    二つ目は、その空白をhtmlの一部を詰めて修正したのと、名前の文字が大きかったので小さくしました。以下の通りです。

    深掘りマン

    ん、一期一会ってどういう意味!?

    ここからどうしたいかというと、
    二つ目の吹き出しの位置を画像の中心に来るようにしたいのと、名前が現状は「ン」だけが改行されているので、理想としては改行せずにできればと思っています。

    とても図々しいお願いですが、もしなにか分かりましたら、ぜひお願いいたしますm(_ _)m

  6. 名前:sakurabaaa_g 投稿日:2018/11/06(火) 23:20:41 ID:8b0ece7ba 返信

    ぽんさん

    一箇所確認していただきたい箇所として、
    htmlの記述で「 」の閉じがないのが気になりました。

    確認してみてください。

    • 名前:ぽん 投稿日:2018/11/08(木) 14:46:03 ID:58bac85af 返信

      返信が遅くなり申し訳ございません。

      セリフを「」で囲むということでしょうか、、?
      https://www.thinking-samurai.net/entry/2018/11/01/153028

      • 名前:sakurabaaa_g 投稿日:2018/11/13(火) 21:17:22 ID:c1a220f92 返信

        ぽんさん

        お問い合わせ時に記入いただいたメールアドレスに返信させていただきました。

        届いていますでしょうか。

  7. […] gcbgarden.com […]