IT

CSSで作る!コピペOK<吹き出しデザイン>

CSSで作る!コピペOK<吹き出しデザイン>
CSSだけで作れる「吹き出し」をご紹介します!
会話風のものやワンポイントで使えるものなど、コピペしてお使いください。

みゆ
みゆ

コポペするだけでこんな感じに作れるよ!横幅の小さいスマホでみても端までくればテキストが折り返されて表示されるレスポンシブ仕様になってるから安心!

基本の吹き出し


基本となる下向き中央の吹き出しです。

上向き中央の吹き出しです。

左向き中央の吹き出しです。

右向き中央の吹き出しです。

下向きの三角の位置を左側にしました。一番最初の基本となる吹き出しのleft:50%を5%にしただけです。

border-radiusを追加して角を丸くしました。

枠線


枠線だけの吹き出しです。
みゆ
みゆ

角を丸くしたい場合は.balloon{}の中にborder-radius:◯◯px;と追加してください。

影が濃く背景あり


影の濃い吹き出しです。

枠線(下のみ)


下だけの吹き出しです。横の表示サイズを80%にしてあります。横幅いっぱいにしたい場合は100%にしてください。

ジェネレーターで簡単!


吹き出しを自動で作成してくれるサイトから作ってみました。
参考サイトはこちら

会話風


左からの会話風の吹き出しです。

右からの会話風の吹き出しです。
みゆ
みゆ

HTMLにある画像URLに画像を入れるとこんな感じになります!

みゆ
みゆ

反対の場合は背景の色が設定されてます。背景の色が必要ない場合はCSSにある「background-color:#ebffe7;」を削除してください。

ワンポイント利用に最適!丸形


「左斜め下」にある丸い形の吹き出しです。

「左」にある丸い形の吹き出しです。

「左斜め上」にある丸い形の吹き出しです。

「上」にある丸い形の吹き出しです。

「右斜め上」にある丸い形の吹き出しです。

「右」にある丸い形の吹き出しです。

「右斜め下」にある丸い形の吹き出しです。

「下」にある丸い形の吹き出しです。

心の声や考え事


心の声や考え事の時に使えそうな吹き出しです。

心の声や考え事の時に使えそうな吹き出しです。

おしゃれな吹き出しです。

最後に

いかがでしたか?CSSの疑似要素であるbeforeとafterを使うといろいろなことができるようになりますね。
他にもコピペして使えるものを用意したので参考程度に引き続き見ていってください。

ピックアップ記事

  1. 不労所得?chatGPTに負けない!2年以上ほったらかしブログが毎日お金を生んで…

関連記事

  1. CSSでおしゃれな装飾!コピペで見出しをデザインしよう!

    IT

    CSSでおしゃれな装飾!コピペで見出しをデザインしよう!

    CSSでおしゃれにデザインされた見出しはページ全体を見やすくしてく…

  2. Altプラスマウスホイールでページが操作できる機能

    IT

    【 Firefox】Alt押しながらマウスホイールでページを送ったり戻したりすることができる?偶然見…

    パソコンでインターネットを何気なく使っていて突然画面が変わりま…

  3. ボックスデザイン

    IT

    CSSで広がる!囲み枠(ボックス)デザイン【コピペ可】

    「CSSでおしゃれな装飾!コピペで見出しをデザインしよう!」や「種…

  4. jsFiddle

    IT

    「jsFiddle」は登録なし!コード動作確認が簡単!埋め込みも可

    自分のサイトを持っていて、いろいろいじっているうちにだんだん既…

  5. PCビープ音4回はホコリが原因

    IT

    ビープ音4回はホコリが原因?DellデスクトップPCの異常は掃除で復活!

    電子機器は突然故障したり終わりを告げる事が多いですよね・・・。…

  6. マルウェア?突然パソコンがスキャンされる

    IT

    ウイルス感染?PC画面上で突然スキャン開始!トロイの木馬?マルウェア?これは詐欺です!

    普通にパソコンを使っていただけでした。私のブログの中で…

コメント

  1. よそのコピペではうまくいかなくて前々から滞っていた吹き出しができるようになりそうでうれしいです!

    1つ質問ですが、こちらで会話風吹き出しを作ると、キャラの顔がみゆさんのように円いっぱいになりません。
    トリミングしているつもりですが、円の下の方に偏ってしまいます。
    なにか改善策があればお教えいただけると幸いです。

      • みゆ
      • 2020年 12月 05日

      しるみんさん、コメントありがとうございます。
      >円の下の方に偏ってしまいます
      という事ですが、以下2点程お試し下さい。

      1)画像サイズが大きすぎではないでしょうか。250px x 250px以内のものを入れてみるとどうなるでしょうか。
      2)画像に隙間はないでしょうか。トリミングもしているとのことですが、頭の上に隙間があるとその部分も表示されてしまいます。髪の毛上ぎりぎりにトリミングをし、なるべく隙間なく表示させたい画像を入れてみるとどうなるでしょうか。

      どのような状況か把握しきれず、あいまいな回答で申し訳ありません。

  2. みゆ様

    こちらこそコメントありがとうございました!
    隙間はなかったのですが、ご指摘の通り、画像のサイズに問題がありました。
    250×250に変更し、満足いく結果が得られました。

    CSSの勉強もしつつ、色々手を加えていきたいです。
    この度はありがとうございました。

    • kuromi2
    • 2021年 7月 02日

    みゆさま 初めまして。
    吹き出しCSSで検索中にこちらが表示されて、ご訪問致しました。可愛い吹き出しの数々に思わずニヤニヤ。

    早速アメブロの記事挿入画面へコピペで貼ってみました。丸い画像付きの吹き出しを貼りました。他者様とのコメントやり取りなども参考にしながら挿入しましたところ、丸い画像の外側に四角が表示されていました。この四角を削除するには何か方法がありますでしょうか。教えて頂けると幸いです。どうぞよろしくお願いいたします。

      • みゆ
      • 2021年 7月 07日

      kuromi2さん、コメントありがとうございます。
      「丸い画像付きの吹き出し」というのは、会話風の中で紹介しているものでしょうか。

      丸い画像の外側に四角が表示される原因を調べましたが同じ状況を再現できませんでした。
      JPEG画像やPNG画像、サイズが違う画像などでやってみたんですができませんでした。

      jsFiddleというものを使用してますので、まずは下記のURL(会話風>左からの会話風の吹き出し>Edit in JSFiddleです)の「画像URL」に何でもいいので画像URLを入れてみるとどうなるでしょうか。
      基本的にここで表示されたものをそのままコピペすれば同じものを表示できるはずなんですが。
      https://jsfiddle.net/jnt958ku/13/

      またお返事いただけると嬉しいです。

  1. この記事へのトラックバックはありません。

おすすめ記事

  1. 飲み口いろいろ水筒タイプ別紹介
  2. 自作パソコン
  3. 雪見だいふくイベント
  4. お年玉付き年賀はがきの切手シートが当たりました
  5. アマゾンギフト券

最近の記事

  1. 消えた!ティッシュペーパーや生理用品が。新型コロナ「デマ」の…
  2. ウイルス感染?PC画面上で突然スキャン開始!トロイの木馬?マ…
  3. CSSで広がる!囲み枠(ボックス)デザイン【コピペ可】
  4. 家にいながら行政手続き!GビズIDを取得してみよう!今から始…
  5. アマゾンブラックフライデー&サイバーマンデー 5日間のBig…
  1. アサヒ飲料キャンペーンでトミカ&リカちゃん&プラレールが当たる

    グルメ

    アサヒ飲料キャンペーンでオリジナルトミカx3台&マイタウンが当たる!その他プラレ…
  2. 2019年台風19号の信濃川

    その他

    2019年台風19号による豪雨で長岡花火会場の河川敷が増水!
  3. トミカ博2019横浜

    子育て

    【トミカ博 in YOKOHAMA 2019】初日激混み体験レポ!朝から行く人レ…
  4. 香川県三豊市「不動の滝」

    遊び

    香川県三豊市「不動の滝」
  5. 息子が作るハッピーセットが斬新すぎる

    子育て

    息子が作るハッピーセットが斬新すぎる!マックやさんごっこ♪
PAGE TOP