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. Altプラスマウスホイールでページが操作できる機能

    IT

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

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

  2. カスタムフィールドテンプレートのエラー

    IT

    WordPress Custom Field Templateエラーはtype=radioが原因?P…

    このブログもワードプレスを利用して作られていますが、カスタムフ…

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

    IT

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

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

  4. 種類いろいろ!CSSのborder(線)の使い方

    IT

    種類いろいろ!CSSのborder(線)の使い方

    CSSのborderにはいろいろな種類があります。見出しに使っ…

  5. マウスホイールで画像の拡大縮小をしたい!Windows10のフォト初期設定は次の画像になる件

    IT

    マウスホイールで画像の拡大縮小をしたい!Windows10のフォト初期設定は次の画像になる件

    windows10にして何枚かの画像を見る時にマウスホイールを…

  6. ワードプレスの自動入力候補(履歴)を削除する方法

    IT

    Google Chromeでワードプレスの自動入力候補(履歴)を削除する簡単な方法

    まずみなさんはパソコンのブラウザ何をお使いですか?代表…

コメント

  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. jsFiddle

最近の記事

  1. 誕生日や母の日・父の日、お礼やお祝いは「Amazonギフト券…
  2. 「jsFiddle」は登録なし!コード動作確認が簡単!埋め込…
  3. 幼児の下唇の内側にしこり!原因は粘液嚢胞(ねんえきのうほう)…
  4. ここから始めよう!LaQ ベーシック 201 各パーツをバラ…
  5. 2020年小銭貯金額!レア硬貨 昭和61年の10円硬貨があっ…
  1. CSSでおしゃれな装飾!コピペで見出しをデザインしよう!

    IT

    CSSでおしゃれな装飾!コピペで見出しをデザインしよう!
  2. akippa (あきっぱ)

    その他

    赤レンガ倉庫のイベントはakippa (あきっぱ)で事前に駐車場予約!満車の心配…
  3. 朝霞の森秋祭り【埼玉】

    グルメ

    【埼玉県】朝霞の森秋まつりで自然を感じよう♪
  4. 息子が作るハッピーセットが斬新すぎる

    子育て

    息子が作るハッピーセットが斬新すぎる!マックやさんごっこ♪
  5. 香川県牟礼の道の駅「源平の里むれ 」

    グルメ

    【子連れ必見】道の駅「源平の里むれ」でおいしいご飯と房前公園でめいっぱい遊ぼう♪…
PAGE TOP