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. PCビープ音4回はホコリが原因

    IT

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

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

  2. 算定基礎届と賞与支払届をGビズIDを使って電子申請

    IT

    年金機構の社会保険関係手続き「算定基礎届と賞与支払届」をGビズIDを使って電子申請してみよう

    日本年金機構のホームページには詳しく情報が紹介されていると思い…

  3. 確定申告e-taxの推奨ブラウザはInternet Explorer

    IT

    【確定申告】e-Tax利用時のブラウザはInternet Explorer!Microsoft Ed…

    確定申告をしなければいけない方にとって、この一か月は忙しい期間…

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

    IT

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

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

  5. マイナポイントは電子マネーWAONがおすすめ

    IT

    マイナポイントは電子マネーWAONがおすすめ!普段よく使うお店を登録しよう

    私はよくイオンへお買い物に行って、電子マネーWAON払いもしく…

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

    IT

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

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

コメント

  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. PCビープ音4回はホコリが原因
  4. ガンバライジングカード無料配布キャンペーン2020年10月
  5. 香川県観音寺市「銭形砂絵」

最近の記事

  1. 我が家のクリスマスツリー2020
  2. 息子が作るハッピーセットが斬新すぎる!マックやさんごっこ♪
  3. 徐々に値上げ!それでも安いクリックポスト!追跡可能で送料全国…
  4. おちんちんの先が赤く腫れて痛い!小児科の診断結果は「亀頭包皮…
  5. バーコード5枚でオリジナルトミカ「Toyota GR Sup…
  1. Altプラスマウスホイールでページが操作できる機能

    IT

    【 Firefox】Alt押しながらマウスホイールでページを送ったり戻したりする…
  2. 仮面ライダーゼロワンのまくら

    子育て

    仮面ライダーゼロワンのまくらが気持ちいい!
  3. 仮面ライダー変身ベルトDXシリーズ

    子育て

    仮面ライダー「変身ベルトDXシリーズ」用延長ベルトで大人も変身しよう!プレミアム…
  4. マイナポイントは電子マネーWAONがおすすめ

    IT

    マイナポイントは電子マネーWAONがおすすめ!普段よく使うお店を登録しよう
  5. おやつカンパニーxトミカ

    グルメ

    おやつカンパニーxトミカ!食べて当てようトミカキャンペーン1 トンネルくぐって!…
PAGE TOP