かわいい吹き出しデザインコード集：CSSのみだから軽量、レスポンシブ
アイコンと組み合わせた吹き出しのバリエーションを、いくつか準備。
いつか使うそのときのために。グッ(๑•̀ㅂ•́)و✧
KAORUKO
この記事では、CSSのみを使用して作成された吹き出しデザインとアイコンの組み合わせバリエーションをご紹介します。
SAKURAKO
かわいらしい要素を取り入れ、軽量でありながらも魅力的な吹き出しのスタイリング方法を学び、レスポンシブな設計にも対応させるテクニックを探求します。
魅力的なUIを構築するヒントなど、デザイン愛好者やWeb開発者の皆様からのクリエイティブなご意見などもいただけますと幸いです。
― HTML ―
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）の略です。
― CSS ―
Cascading Style Sheets（カスケーディング・スタイル・シート）の略です。
セリフを話すアイコンのバリエーション
吹き出しカラー
コードの主な P💡O💡I💡N💡T へジャンプ！⤵
吹き出しカラー 枠あり
吹き出しカラー（ぽよん付き）
白角吹き出し（ぽよん付き）
背景白2本ライン 画像大きめ
イチオシ？！畳調の和テイスト吹き出し
アイコンキャラクターの可愛いバルーン
クラス名やプロパティの綴り、記法違いやURLの誤指定には気を付けましょう～✨
【チェック❗️】コードの主な P💡O💡I💡N💡T
一つ目のコード（吹き出しカラー⤴️）を例にとって、HTML とCSS それぞれ3つずつ、カスタマイズの主なポイントを紹介します。ご自身のブログなどで利用する際の参考にしてください。
※このページのソースコードは、すべてCodePen *1 というWeb エディタサービスを通じて公開しています。 このツールは、コードを記述しながらリアルタイムに表示を確認できる優れもの！なんです。基本無料で操作もカンタンです。自動コンパイル機能 *2 や使いやすいインターフェースによって、ユーザーの利便性も高まっており、jQuery やその他のライブラリも問題なく読み込むことができます。 CodePen - Wikipedia
― HTML ―
1. アイコンの画像を変えるには？
コードの中にあるimg 要素は、アイコンの画像を表示するためのものです。src 属性には画像ファイルのアドレスを指定する必要があります。具体的には、src 属性の値をダブルクォーテーション " " 内に記入して、画像ファイルのアドレスを指定します。
例えば、新しい画像ファイルのアドレスが仮に
https://cdn-ak.f.st-hatena.com/images/fotolife/f/fobitows/20230828/20230828130137.png
である場合、▼のように修正します。
<img src="https://cdn-ak.f.st-hat…[ 中略 ]…8/202308130137.png" alt="ICON">
ここで重要なのは、src 属性に正しい画像ファイルのアドレスを指定することです。指定したアドレスが有効な場所に画像ファイルが存在していることを確認してください。
このように修正することで、新しい画像ファイルに置き換えることができます♪
2. アイコンの下のテキストを変えるには？
▼このdiv 要素で囲んだエリアが、アイコンの下に表示されるテキストを定義する部分です。
<div class="iconfont">大 福</div>
”大 福” の部分を修正することで、ご自身の使用するアイコンキャラクターの名前や説明などに変えることができます。
3. 吹き出しのセリフを変えるには？
▼同じくdiv 要素で囲まれたこちらの部分で、吹き出しに表示するテキストを定義します。
<div class="bubble">そう初めから上手に…[ 中略 ]…思うならちと写生をしたら。</div>
> < で挟まれた部分、そう初めから～写生をしたら。の文章を書き換えて、キャラクターの話すセリフを自由に変更してみてください。
― CSS ―
4. アイコンの形、デザインを変えるには？
▼この部分ではアイコンのかたちと周囲のラインを決めています。
/*吹き出し 共通*/ …[中略]… .icon img { border: solid 3px #e3acac; /* 3px：線の太さ #e3acac；カラーコード */ border-radius: 25%; /* 0%：四角 10%～:角丸 50%:円 */ }
border: は線を引くプロパティです。
px ・・・ 線の太さを指定。こちらの数値を3px から変更することで、ラインの太さを自由に変更できます。
#より右の部分 ・・・ 線の色を指定。
カラーコードを変えて、いろいろお好きな色を試してみてください。
その下のborder-radius: で、ラインの角を丸めています。
0 にすると丸みがなくなり四角いアイコンになります。
25%のところを50%に数値を上げると直線は無くなり、真ん丸のアイコンに変わりますよ～ *(„◕᎑◕„)⸝⸝꙳ｸﾞｯ 。
5. アイコンの大きさを変えるには？
▼この部分では、アイコン画像のサイズを変更できます。変更する場所は/*吹き出し 左寄せ*/の要素に対する.i_badge クラスです。*3
/*吹き出し 左寄せ*/ .s_cloud1 { …[中略]… .i_badge { width: 70px; height: 70px; } }
width: で横幅のピクセルを指定、height: で高さを指定します。
70px の数値を、たとえば150px とかに変更すると大きなアイコンになりますよ！
大 福
そう初めから上手にはかけないさ、第一室内の想像ばかりで画がかける訳のものではない。…[ 中略 ]…どうだ君も画らしい画をかこうと思うならちと写生をしたら。
ただこのままだと、吹き出しが顔に被ってしまっていてかわいそうですねヾ(^-^;)。
次の操作で一緒に、ちゃんと顔を出してあげましょう。
6. 吹き出しの位置と色を変えるには？
▼この部分で、吹き出しの位置とカラーを指定しているので、場所を移動してあげられます。
/*吹き出し 左寄せ*/ .s_cloud1 { …[中略]… .bubble { display: inline-block; margin: 25px 20px 0 95px; /* ピクセル数で要素の余白を指定（↑ → ↓ ← の順） */ background: #e3acac; /* #e3acac；カラーコード */ }
background: の#より右の部分は吹き出しの背景色を指定しています。さきほどの線（border:）と同様です。
margin: とは、要素の周りに一定のスペースを設けるためのプロパティです。 *4 値が 4 つ指定された場合、マージンはそれぞれ
上 ⇒ 右 ⇒ 下 ⇒ 左
の順で時計回りに適用されます。つまり、ここでは吹き出しの左側にスペースをつくり、大福くんの顔に重なった分だけ右に移動させればイイ、のです。 ｸﾞｯ(๑•̀ㅂ•́)و✧
ためしに、margin: 25px 20px 0 95px; の95px の数値を、195pxに変え、隠れてる顔を元通り出してあげましょう。ついでに色も変えてみます。
/*吹き出し 左寄せ*/ .s_cloud1 { …[中略]… .bubble { display: inline-block; margin: 25px 20px 0 95px; /* ←ココの95pxを、195pxに変える！ */ background: #e3acac; /* カラーコードや色の名前を指定 */ }
大 福
そう初めから上手にはかけないさ、第一室内の想像ばかりで画がかける訳のものではない。…[ 中略 ]…どうだ君も画らしい画をかこうと思うならちと写生をしたら。
若干違和感が残ってますね~。気づきましたか？
そう、吹き出しのチョロン、（しっぽ？笑）とこの色が元のままでした…。あと大福くんの名前がちょっと左に寄ってますね~。アイコンを大きくした分、文字の位置が左寄りになってしまいました。せっかくなのでもうひと手間かけ、名前も元通り、真ん中に寄せてあげましょう♪
変えるのはこの▼3か所です。そのうち２つは同じ.icon クラスで指定している部分、ここで幅と余白を変更します。
/*吹き出し 共通*/ …[中略]… .icon { width: 70px; /* ←ココの70pxを、150pxに変える！ */ }
/*吹き出し 左寄せ*/ .s_cloud1 { …[中略]… .icon { float: left; margin-right: -70px; ←ココの-70pxを、-150pxに変える！ */
.icon クラスの/*吹き出し 共通*/ のところ、（コードの場所はどこだかわかりますか？CSSコードの最初のほう、共通部分なので割と上の位置です。）は70px の幅（width:）を画像と同じ150px に揃えて、/*吹き出し 左寄せ*/ のところは余白（margin-right:）を-70px から-150px にずらします。
同じ.icon クラスを編集していますが、これは左右の吹き出しで共通しているプロパティと左と右で異なるプロパティがあり、便宜上コードの記述場所を分けているため、ちょっとややこしいですが別々になっています。
こうすることで、アイコンの下のテキストが元の真ん中寄せに戻ります。くわしい解説はここでは省略しますが、CSSはいろいろな要素が複雑に絡み合っているので、ここを変えたらあっちが、、今度はあっちを直したらそっちが…。と、アッチ・コッチ・ソッチ状態によくなります ( ´•ᴗ•ก )💦。
もうひとつは、さきほど背景色を変えた.bubble というクラスを指定しているすぐ下、一番最後のところですね。.bubble に対する後ろ（after）の要素なので.bubble:after です。 *5
/*吹き出し 左寄せ*/ .s_cloud1 { …[中略]… .bubble:after { left: -14px; border-style: solid; border-width: 0 24px 17px 0; border-color: #transparent #e3acac; /* ←ココの色を背景色と同じに！ */ } }
ここで吹き出しに付属しているしっぽを形作っています。border-color: を背景色と同一にすることで、色の境目が消えて吹き出しと一体化しているように見えている、という唐栗です。
大 福
そう初めから上手にはかけないさ、第一室内の想像ばかりで画がかける訳のものではない。…[ 中略 ]…どうだ君も画らしい画をかこうと思うならちと写生をしたら。
これですべての手直しが終わった？！はずです…。お疲れさまでした~！(*ᴗˬᴗ)⁾⁾
手直しを入れるときは、いろいろな条件を（PC画面とスマホでの見えかた、とか）確認するようにしましょう。正直ﾒﾝﾄﾞｲ…ですが笑
いろいろなページを拝見し、参考にさせていただきましたが、とくにこちら、『キニナリ』さんのサイトがかわいくて、とっても気に入りました！ぜひご覧ください↷
出演キャラ（仮）
おわりに
軽やかなCSSと可愛らしいアイコンが織り成す？笑、吹き出しの世界をお伝えしました。かわいさと機能性を通じて皆さまのブログに新たな魅力を注入できることを願っています。ご意見やアイデア、誤字脱字のご指摘など( ´•ᴗ•ก )💦、いつでもお待ちしております。
それでは、ここまで読んでいただき、ありがとうございました。<m(_ _)m>
どなたかの、お役に立てますよーに☆彡
気になったニュース
五か月ほど前、音楽界に悲報が入りました。音楽家として世界で愛された坂本龍一さんがこの世を去りました。彼の多様な音楽スタイルとジャンルへの貢献は、多くの人々の心に深い感動を残しました。
クラシック音楽からエレクトロニック、ポップ、アンビエント、映画音楽まで、その音楽的幅広さは広く称賛されています。また、彼はテクノロジーとの融合を積極的に図り、エレクトロニック・ミュージックの進化に大きく貢献しました。
坂本さんの意思を受け継ぎ、彼の音楽活動だけでなく、文学への情熱も広く共有されることでしょう。我々はその功績を讃え、彼の音楽がこれからも後世に受け継がれることを願っています。
*1:
CodePen の推奨ガイドライン:
CodePen は、リアルタイムで表示を検査しながら、ブラウザーでHTML、CSS、JavaScript コードを作成および開発できるサービスです。
主な特徴:
- ソースコードと表示を他のWeb サイトに埋め込んで共有できます。
- 外部の HTML、CSS、JS ライブラリを使用できます。
- 他のユーザーのソースコードを閲覧できます。
- 基本、無料です。
使用するには？:
1. 登録が必要です。 [ https://codepen.io/ ] にアクセスし、SignUp 経由で登録します。
2. 保存、編集が可能です。
3. 「作成 (CREATE) 」メニューから「ペン (Pen)」を選択して、新しいページを作成します。
4. html、css、javascript を直接記述すると、下部パネルにリアルタイムで表示されます。
サイトで公開:
1. [ 埋め込み (Embed) ] メニューから、[ このペンを埋め込む (Embed This Pen) ] を選択します。
2. コピーしたタグをブログなどに貼り付けます。
ライブラリ:
- [ 設定 (Settings) ] または言語名の横にある歯車ボタン⚙️を使用して設定画面を開きます。
- CSS プリプロセッサ (CSS PreProcessor) から使用したい言語を選択します。
- JavaScript の場合、検索ウィンドウにライブラリ名を入力して選択します。
*2:
自動コンパイルとは、コードを自動的に変換して処理するメカニズムを指します。特定のコード形式を別の形式に変換したり、高度な処理を行う場合に使用されます。プログラムやスクリプトを実行可能な形式に変換することを指しますが、Web 開発の文脈では主に以下のような場面で自動コンパイルが使用されます。
CSS 自動コンパイル:
CSS プリプロセッサ (Sass または Less など) を使用する場合、プリプロセッサによって書かれたコードを通常の CSS に変換するプロセスは自動コンパイルと呼ばれます。プリプロセッサは変数、ネスト、ミックスインなどの機能を提供し、それを通常の CSS に変換する必要があります。
JavaScript 自動コンパイル:
JavaScript トランスパイラー (Babel など) を使用し、新しいバージョンの JavaScript コード (ES6 や TypeScript など) をブラウザで実行できる古いバージョンのコードに変換することも、自動コンパイルの一種です。 自動コンパイルの利点は、開発者が高度な機能と構文を使用しながら、コードをブラウザでサポートされている古いバージョンに変換できるため、ブラウザ間の互換性を維持できることです。さらに、手動による変換を繰り返す手間も省けます。
*3:
class （クラス）:
クラスとは、コードのカテゴリ分け用のタグのようなものです。要素にクラスを割り当てることで、同じクラス名を持つ要素に同じスタイルや振る舞いを適用することができます。 なお、クラス名は自由に設定でき、任意の名前を付けられます。あとで分かりやすい名前がいいですね。クラス名には半角英数字と記号は -_. （ハイフン、アンダーバー、ピリオド）が使えます。最初の一文字目に数字は使えないので気を付けましょう。
*4:
margin （マージン）:
要素とその周囲のコンテンツや他の要素との間に、余白や隙間を作成することができます。通常、マージンは上下左右の方向に設定することができ、それぞれの方向に異なる幅を指定することができます。
たとえば、要素の上部にだけスペースを作りたい場合は、上マージンだけを指定することも可能です。また、負の値を指定することで、要素が重なるように配置することもできます。これにより、要素同士の配置やデザインを柔軟に調整することが可能です。
つまり、マージンは要素の周りに空間を設けるための道具であり、要素同士の適切な配置やデザインを実現するための重要なプロパティです。
*5:
.bubble:after の:after というのは、CSS の疑似要素（Pseudo Element）の一種で、要素の後ろに内容を追加するためのプロパティです。この疑似要素を使うことで、例えば要素の後ろにアイコンや装飾的な要素を追加することができます。
具体的には、:after はHTMLに新しい要素を追加するのではなく、既存の要素の後ろにテキストやアイコン、装飾などを挿入する際に活用されます。ここで注意するポイントは、:after 自体には内容がないため、CSS でコンテンツを指定する必要があることです。
:after を使用することで、少しの工夫で要素の装飾やスタイリングをより柔軟にカスタマイズできるようになります。
