CSS 吹き出し(balloon)などワンポイント装飾色々

CSS 吹き出し(balloon)などワンポイント装飾色々

カスタマイズ 遊び
2021/10/27
12
vanillaice (Akira)
vanillaice (Akira)

「point」「check」や「会話形式吹き出し」など、コピペで使えるデザイン集。テンプレートに含めようかなぁ、と考えていたものなども併せて放出しようと思います。つまりもうテンプレートデザインとしては使わないのでみなさんの記事で使えそうならどうぞ (ノ゚ェ゚)

air balloon

point!

文章

デフォルトのバルーン内テキストにあまり長い単語や文章は入りませんので注意。サイズ変更などは任意で行ってください。各背景色やドット色などもガイダンスがありますので好みに変更してください。

テキスト内でのhtml使用が予想される場合は p要素div要素 に変更した方が無難です(構文エラーの発生を防ぐため)

<div class="air__balloon">point!</div>
<p class="air__balloon_text">文章</p>
/* air balloon */
.air__balloon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 90px;
  height: 100px;
  margin: 30px 0 0;
  background-color: rgb(216,217,235);/* バルーン背景色 */
  background-image: radial-gradient(rgb(176,171,212) 20%, transparent 0), radial-gradient(rgb(176,171,212) 20%, transparent 0);/* バルーンドット色 rgb(176,171,212) */
  background-position: 0 0,10px 10px;
  background-size: 20px 20px;
  color: rgb(20,20,20);/* バルーン内テキスト色 */
  box-shadow: 12px 10px 15px -10px rgb(0,0,0,.2);
  border-radius: 100%;
  font-weight: bold;
  font-size: 19px;/* バルーン内テキスト大きさ */
  transform: rotate(-6deg);
}
.air__balloon::before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  width: 1px;
  height: 20px;
  margin: auto;
  background: black;
}
.air__balloon::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent rgb(216,217,235) transparent;/* rgb(216,217,235)はバルーン背景色と同じ色 */
  border-radius: 4px;
}
.air__balloon_text {
  margin: 20px 0 30px !important;
  padding: 1em;
  box-shadow: 12px 10px 15px -10px rgb(0,0,0,.2);
  border-radius: 4px;
  background: rgb(240,240,240);/* テキスト背景色 */
  color: rgb(51,51,51);/* テキスト文字色 */
  font-size: 16px;/* テキストサイズ */
}
/* darkmode用 */
@media (prefers-color-scheme: dark) {
  .air__balloon::before {
    background: white;
  }
}
point!

文章

デフォルトのバルーン内テキストにあまり長い単語や文章は入りませんので注意。サイズ変更などは任意で行ってください。各背景色やドット色などもガイダンスがありますので好みに変更してください。

テキスト内でのhtml使用が予想される場合は p要素div要素 に変更した方が無難です(構文エラーの発生を防ぐため)

<div class="air__balloon2">point!</div>
<p class="air__balloon2_text">文章</p>

.air__balloon2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 90px;
  height: 100px;
  margin: 30px 0 0;
  color: rgb(20,20,20);/* バルーン内テキスト色 */
  box-shadow: 12px 10px 15px -10px rgb(0,0,0,.2);
  border-radius: 100%;
  background: rgb(231,172,178);
  font-weight: bold;
  font-size: 19px;/* バルーン内テキスト大きさ */
  transform: rotate(-6deg);
}
.air__balloon2::before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  width: 1px;
  height: 20px;
  margin: auto;
  background: black;
}
.air__balloon2::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 0;
  right: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent rgb(231,172,178) transparent;/* rgb(231,172,178)はバルーン背景色と同じ色 */
  border-radius: 4px;
}
.air__balloon2_text {
  margin: 20px 0 30px !important;
  padding: 1em;
  box-shadow: 12px 10px 15px -10px rgb(0,0,0,.2);
  border-radius: 4px;
  background-color: rgb(246,234,215);/* テキスト背景色 */
  background-image: radial-gradient(rgb(230,202,162) 20%, transparent 0), radial-gradient(rgb(230,202,162) 20%, transparent 0);/* テキストドット色 rgb(230,202,162) */
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
  color: rgb(51,51,51);/* テキスト文字色 */
  font-size: 16px;/* テキストサイズ */
}
/* darkmode用 */
@media (prefers-color-scheme: dark) {
  .air__balloon2::before {
    background: white;
  }
}

会話吹き出し

LINE風

ペンギン

LINE風 左側吹き出し。横幅はテキスト量に依存します。

ネズミ

LINE風 右側吹き出し。
横幅はテキスト量次第です。

名前表記不要の場合は <div class="line__balloon_name">名前</div> を削除。

テキスト量によって横幅が変わりますが、短いテキストでも名前が長いと長い方に合わせますので吹き出しも横幅が広がります。

テキスト内でのhtml使用が予想される場合は p要素div要素 に変更した方が無難です(構文エラーの発生を防ぐため)

<div class="line__balloon_l"><!-- 右吹き出しは line__balloon_l を line__balloon_r に変更 -->
  <div class="line__balloon_img">
    <img src="画像アドレス" width="横実寸" height="縦実寸" alt loading="lazy">
  </div>
  <div class="balloon__content">
    <div class="line__balloon_name">名前</div>
    <p class="line__balloon_text">文章</p>
  </div>
</div>
.line__balloon_l,
.line__balloon_r {
  display: flex;
  align-items: flex-start;
  margin: 20px 0;
}
.line__balloon_r {
  flex-direction: row-reverse;
}
.line__balloon_img {
  flex-shrink: 0;
  position: relative;
  width: 15%;
  max-width: 70px;
  border-radius: 50%;
  border: 1px solid rgb(200,200,200);
  background: white;/* アイコン背景色不要ならこの一行削除(PNG画像に配慮) */
}
.line__balloon_img::before {
  content: "";
  display: block;
  padding-top: 100%;
}
/* W150 H150 程度の正方形を推奨 */
.line__balloon_img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.line__balloon_l .balloon__content {
  margin: 0 0 0 10px;
}
.line__balloon_r .balloon__content {
  margin: 0 10px 0 0;
}
.line__balloon_name {
  margin: 0 0 -.6em;
  color: rgb(80,80,80);
  font-weight: bold;
  font-size: 13px;/* 名前フォントサイズ */
}
.line__balloon_r .line__balloon_name {
  text-align: right;
}
.line__balloon_text {
  position: relative;
  max-width: 500px;/* 最大横幅 不要ならこの一行削除 */
  margin: .6em 0 0 0 !important;
  padding: .6em 1em;
  border-radius: 25px;
  color: rgb(51,51,51);/* 吹き出し テキスト色 */
  font-size: 16px;/* テキストフォントサイズ */
}
.line__balloon_l .line__balloon_text {
  background: rgb(245,245,245);/* 右吹き出し 背景色 */
}
.line__balloon_r .line__balloon_text {
  background: rgb(133,226,73);/* 左吹き出し 背景色 */
}
.line__balloon_text::before {
  content: "";
  display: block;
  position: absolute;
  height: 35px;
  width: 18px;
  background: 0 0;
  border: 0;
  top: -20px;
}
.line__balloon_l .line__balloon_text::before {
  left: -8px;
  box-shadow: inset -3px -15px 0 -5px rgb(245,245,245);/* rgb(245,245,245)は左吹き出し背景色と同色 */
  border-radius: 40px 0 0 40px;
}
.line__balloon_r .line__balloon_text::before {
  right: -8px;
  box-shadow: inset 3px -15px 0 -5px rgb(133,226,73);/* rgb(133,226,73)は右吹き出し背景色と同色 */
  border-radius: 0 40px 40px 0;
}
/* darkmode用 */
@media (prefers-color-scheme: dark) {
  .line__balloon_name {
    color: rgb(180,180,180);
  }
}

考える吹き出し

何かを考えている様子のひよこ

<div class="thinking__balloon">
  <p class="thinking__balloon_text">文章</p>
  <div class="thinking__balloon_icon">
    <img src="画像アドレス" width="横原寸" height="縦原寸" alt loading="lazy">
  </div>
</div>
.thinking__balloon {
  margin: 30px auto;
  text-align: center;
}
.thinking__balloon_text {
  display: inline-block;
  position: relative;
  max-width: 500px;/* 吹き出し最大横幅 不要ならこの一行削除 */
  margin: 0 0 calc(3px + 18px + 3px + 10px + 3px) !important;
  padding: 1em;
  border-radius: 25px;
  background: rgb(196,225,230);/* 吹き出し背景色 */
  color: rgb(51,51,51);/* 吹き出しテキスト色 */
  font-size: 16px;/* 吹き出しテキストサイズ */
}
.thinking__balloon_text:before,
.thinking__balloon_text:after {
  content: "";
  display: block;
  position: absolute;
  background: rgb(196,225,230);/* 吹き出し背景色と同色 */
  border-radius: 50%;
}
.thinking__balloon_text:before {
  top: calc(100% + 3px);
  left: 15px;
  width: 18px;
  height: 18px;
}
.thinking__balloon_text:after {
  top: calc(100% + 3px + 18px + 3px);
  left: 25px;
  width: 10px;
  height: 10px;
}
.thinking__balloon_icon {
  width: 120px;/* アイコン横幅 */
  margin: auto;
}
.thinking__balloon_icon img {
  width: 100%;
  height: auto;
}

ぐにゃぐにゃメッセージボード

ある程度の範囲、ある程度の文字数が無いと成り立ちにくいデザインです。
横幅制限で調整しても良いと思います。

テキスト内でのhtml使用が予想される場合は p要素div要素 に変更した方が無難です(構文エラーの発生を防ぐため)

<p class="limp__board">文章</p>
.limp__board {
  position: relative;
  z-index: 3;
  max-width: 500px;/* 最大横幅 削除しない方が良いです */
  margin: 30px auto !important;
  padding: 4em;
  border-radius: 31% 69% 54% 46% / 45% 43% 57% 55%;
  background: rgb(220,131,168);/* 背面背景色 */
  color: rgb(51,51,51);/* 吹き出しテキスト色 */
  font-size: 16px;/* 吹き出しテキストサイズ */
  text-align: center;
}
.limp__board::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 31% 69% 33% 67% / 61% 27% 73% 39%;
  background: rgb(250,213,230);/* 前面背景色 */
  pointer-events: none;
}

封蝋

文章

テキスト横に並びます(p要素テキストは並びませんのでp要素をinline-blockにするなどすれば並びます)
また、marginを付けていませんので何かと並べる場合は適宜指定してください(上下も同様)

テキスト等と並べない場合は inline-flexflex に変更。

形は3種、色は6種設定していますので組み合わせてご利用ください。

テキストの色が薄くLighthouseで警告を受けますので、after疑似要素でのテキスト挿入を行ってください。

<div class="sealing__box sealing__style1 sealing__color1"></div><!-- sealing__box は全共通、 sealing__style と sealing__color それぞれ末尾の数字で区別 -->

.sealing__box {
  display: inline-flex;
  position:relative;
  width:75px;
  height:75px;
  font: bold 16px/1.2 Georgia, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', YuGothic, Meiryo, 'Yu Gothic', cursive;
  font-style: italic;
  text-shadow: -1px -1px 1px rgb(51,51,51,.6), 1px 1px white;
}

/* スタイル3種 */
.sealing__style1 {
  border-radius: 100% 80% / 80% 85% 80% 90%;
}
.sealing__style2 {
  border-radius: 50% 50% 50% 70% / 50% 50% 70% 60%;
}
.sealing__style3 {
  border-radius: 80% 30% 50% 50% / 50%;
}
/* 色6種 */
.sealing__color1 {
  background-color: rgb(220,222,219);
  color: rgb(180,182,179);
}
.sealing__color2 {
  background-color: rgb(201,212,222);
  color: rgb(160,172,182);
}
.sealing__color3 {
  background-color: rgb(223,221,210);
  color: rgb(193,191,190);
}
.sealing__color4 {
  background-color: rgb(244,235,233);
  color: rgb(214,205,203);
}
.sealing__color5 {
  background-color: rgb(206,208,219);
  color: rgb(176,178,189);
}
.sealing__color6 {
  background-color: rgb(239,232,222);
  color: rgb(209,202,192);
}

.sealing__box::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 65px;
  height: 65px;
  box-shadow: -8px -2px 8px 1px rgba(255,255,255,.6),
              4px 6px 1px 1px rgba(55,55,55,.1);
  border-radius: 50%;
}
.sealing__box::after {
  content: "Point";/* 表示テキストはここで指定 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

古紙と組み合わせ(CSS追加あり)

<div class="sealing__text">文章
  <div class="sealing__box sealing__style2 sealing__color2"></div>
</div>
.sealing__text {
  position: relative;
  margin: 60px 0 30px;
  padding: 1em 1em 1em 86px;
  border-radius: 3px;
  background: url(data:image/jpeg;base64,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);
  color: rgb(51,51,51);
}
.sealing__text .sealing__box {
  position: absolute;
  top: -30px;
  left: 8px;
}

メモ

MEMO

マーカーの色は適当に入れていましたので自由に変えてください。

Darkmode対応テンプレートの場合はペンシルアイコンが背景色と同化して見えなくなる可能性がありますのでdarkmode用のmediaqueryを入れてあります。テンプレートが対応していない場合は削除してください(逆darkmode利用者に見えなくなってしまいます)

<div class="memo__board">
  <div class="memo__text">MEMO</div>
  <div class="memo__icon"></div>
</div>
.memo__board {
  position: relative;
  z-index: 3;
  width: 400px;/* パソコンでの見た目 横幅 */
  max-width: calc(100% - 30px);/* ペンシルの大きさを変更したら 30px も変更 */
  padding: 0 0 0 20px;
  font-weight: bold;
  font-size: 1.2em;
}
.memo__icon {
  color: rgb(51,51,51);/* ペンシルアイコン色 */
  position: absolute;
  bottom: 17px;
  left: calc(100% + 7px);
  width: 14px;
  height: 4px;
  border-radius: 1px;
  border: solid 1px currentColor;
  background-color: currentColor;
  transform: rotate(-45deg) scale(1.8);/* ペンシルの大きさは scale() で調整 */
}
.memo__board::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 8px;
  border-radius: 77% 23% 97% 3% / 0% 70% 30% 100%;
  background: linear-gradient(to right, rgb(217,175,217) 0%, rgb(151,217,225) 100%);/* 線のグラデーション */
}
.memo__icon:before {
  content: "";
  position: absolute;
  left: -12px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: solid 5px transparent;
  border-right: solid 5px currentColor;
  border-top: solid 2px transparent;
  border-bottom: solid 2px transparent;
}
/* ダークモード用 */
@media (prefers-color-scheme: dark) {
  .memo__icon {
    color: rgb(220,220,220);/* ダークモード時のペンシルアイコン色 */
  }
}

まとめ

11月からまた繁忙期に入るためコメントの返信等遅れるかと思います。この記事が今年最後になる可能性もありますので、みなさん良いお年を (ノ゚ェ゚)
いくらなんでも早すぎか。すみません (∵`)

ゆるくてかわいい無料イラスト素材屋「ぴよたそ」

ゆるくてかわいい無料イラスト素材屋「ぴよたそ」

見るだけでも楽しい無料イラスト素材サイト

Related post

Comments  12

-
2021/10/28 (Thu) 07:29

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2021/10/28 (Thu) 09:51

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/10/30 (Sat) 23:01

To コード沢山公開〜 内緒さん

こんばんは ('0')/

お使い頂けるようでしたら幸いです。
こちらこそいつもありがとうございます :)

vanillaice (Akira)
vanillaice (Akira)
2021/10/30 (Sat) 23:02

To 折を見て〜 内緒さん

こんばんは ('0')/

コメント前後してしまったかもです。ごめんなさい。
いつもお気遣いありがとうございます :)

hige
2021/10/31 (Sun) 19:28

なんか可愛い

でも、じじぃのブログではつかわないかも。
でも、一回使って見るかも。

『ゆるくてかわいい無料イラスト素材屋「ぴよたそ」』
リンクが貼ってないですがこれでOK?

vanillaice (Akira)
vanillaice (Akira)
2021/11/01 (Mon) 00:23

To higeさん

良くないです (・A・)
公開範囲を間違えたのでスマホで変更したらソースコード色々おかしくなってました (∵`)
お知らせありがとうございます ('0')/

ナツメ
2021/11/11 (Thu) 14:05

可愛い♡

最近、SNSからたどってブログ記事に行くことが多いのですが、みなさん上手に修飾されていて、おおー!っと思いつつ、なかなか自分のブログは、文字だらけ。苦笑
使いすぎて、読みづらくならないように気を付けないと♪
いつもありがとうございます。
寒くなりますが、お体気を付けてくださいね。

vanillaice (Akira)
vanillaice (Akira)
2021/11/11 (Thu) 20:56

To ナツメさん

こんばんは。お料理の写真はそれだけで完成しているので逆に余計な装飾は必要ないと思います。
お料理上手で羨ましい ^^;
私は相変わらずpinterestで料理の写真を集めています。自分で作れないので(笑)

お気遣いもありがとうございます :)

-
2021/11/17 (Wed) 10:03

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/11/17 (Wed) 21:09

To ホーム画面追加の件 内緒さん

こんばんは ('0')/

この原因はhtmlのhead内に
<meta name="apple-mobile-web-app-capable" content="yes">
が記されているためです。こちらについては管理人の意向になりますので、基本的にはユーザー側が変更することはできませんが、裏技的に「非通信状態での登録」を行って強制的にsafariで開くようにはできます。その代わりアイコンが未設定になるのと、登録名が「通信できません(とかそんな意味の表記)」になります。登録名は変更できるので問題ないと思いますが、アイコンは表示されないよ、ということで。

safariでページを開く

機内モードに変更

該当ページをリロード(たぶん通信できませんとか読み込めませんとかの表示が出ます)

ホーム画面に追加

一度お試しください。内緒さんのブログに関してスタンドアロン状態を解くには先に記したmeta要素を削除してくださいね。よろしくお願いします :)

-
2021/11/18 (Thu) 08:30

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/11/23 (Tue) 15:33

To ホーム画面追加の件 内緒さん

お返事遅くなりごめんなさい。

これ結構判断迷うところで、スタンドアロンにしたい場合は管理人がmeta要素を入れておかないとできないんですよね。safariブラウザの方はブックマークでの代用ができますので、入れることにしました (´・ω・`)
説明不足でお手数おかけしました。いつもありがとうございます :)