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. マイナポイントは電子マネーWAONがおすすめ

    IT

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

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

  2. Windows10の標準機能で画面録画

    IT

    無料で使える画面録画!Windows10の標準機能でキャプチャもOK!(スクリーンショット)

    特別なソフトを買うことなくパソコンの画面を簡単に録画できる方法…

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

    IT

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

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

  4. jsFiddle

    IT

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

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

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

    IT

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

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

  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. 横浜防災フェア2019海上保安資料館横浜館にある北朝鮮工作船
  2. アサヒ飲料キャンペーンでトミカ&リカちゃん&プラレールが当たる
  3. 特別定額給付金の封筒が小さい
  4. 算定基礎届と賞与支払届をGビズIDを使って電子申請
  5. ガンバライジングカード無料配布キャンペーン2020年10月

最近の記事

  1. 海上保安資料館横浜館にある北朝鮮工作船の展示が衝撃的すぎ!
  2. ニンテンドーアカウント新規作成方法
  3. 【イオンキッズパブリック】Nintendo Switch抽選…
  4. 【子連れ必見】道の駅「源平の里むれ」でおいしいご飯と房前公園…
  5. 【イオンキッズパブリック】Nintendo Switch抽選…
  1. 新型コロナウィルスで店頭から様々なものが品切れ状態

    その他

    消えた!ティッシュペーパーや生理用品が。新型コロナ「デマ」の怖さ!一人ひとりが冷…
  2. 香川県でネット・ゲーム依存症対策条例が可決

    その他

    平日1日60分まで?ネット・ゲーム依存症対策条例が全国初で可決、成立【香川県】
  3. 亀頭包皮炎(きとうほうひえん)

    子育て

    おちんちんの先が赤く腫れて痛い!小児科の診断結果は「亀頭包皮炎」!?男の子によく…
  4. カスタムフィールドテンプレートのエラー

    IT

    WordPress Custom Field Templateエラーはtype=…
  5. おやつカンパニーxトミカ2

    グルメ

    おやつカンパニーxトミカ!食べて当てようトミカキャンペーン2 2スピードでコント…
PAGE TOP