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のborder(線)の使い方

    IT

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

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

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

    IT

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

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

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

    IT

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

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

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

    IT

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

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

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

    IT

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

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

  6. GビズIDを取得して行政手続きを電子申請でやってみよう

    IT

    家にいながら行政手続き!GビズIDを取得してみよう!今から始める電子申請

    毎年5・6・7月になると固定資産税や自動車税、住民税に法人税な…

コメント

  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. 算定基礎届と賞与支払届をGビズIDを使って電子申請
  2. 初めての投稿
  3. 無料クレーンゲームのあるスーパー
  4. 令和元年さいたま市総合防災訓練・防災フェア
  5. 東京ディズニーランドの鳥が人に慣れすぎてる

最近の記事

  1. 収益1,000円達成でGoogle AdSenseからPIN…
  2. 【参加無料】りっくんランド自衛隊車両体験搭乗で軽装甲機動車(…
  3. 【東京モーターショー2019】幼児がいるなら目的決めて行こう…
  4. 超穴場!無料で遊べる道の駅「瀬戸大橋記念公園」in香川県坂出…
  5. お年玉付き年賀はがきの切手シートが当たりました!
  1. 餃子の王将創業祭2019「500円分割引券」

    グルメ

    餃子の王将で500円分割引券プレゼント!令和元年の創業祭
  2. Altプラスマウスホイールでページが操作できる機能

    IT

    【 Firefox】Alt押しながらマウスホイールでページを送ったり戻したりする…
  3. カスタムフィールドテンプレートのエラー

    IT

    WordPress Custom Field Templateエラーはtype=…
  4. 夜マック限定「ごはんバーガー」

    グルメ

    夜マック限定「ごはんバーガー」はおいしい!ぜひランチタイムにも出してほしい!
  5. 子ども用水筒はカバーがおすすめ

    子育て

    子ども用水筒は専用水筒ではなくカバーがおすすめ!
PAGE TOP