【HTML/CSS】シンプルなアイコン付きふきだしを作る

2024年2月28日2024年5月30日

Kizineko（COPPY管理人）

URLをコピーしました！

目次（クリックでジャンプ）

【HTML/CSS】シンプルなアイコン付きふきだしを作る

完成図（Codepen）

See the Pen シンプルなアイコン付き吹き出し icon balloon by ananchan (@kizikizi) on CodePen.

HTML

<div class="balloon">
  <div class="balloon__icon">
    <img src="https://kizineko.com/wp-content/themes/swell_child/assets/img/k_estimate-tool_icon.png">
  </div>
  <div class="balloon__txt">
    こんにちは！
  </div>
</div>

適宜文章やアイコン画像は変更してください。

CSS(SCSS)

下記コードはSCSSで記述しています。CSSでコードを使いたい方は、手動またはツール等でCSSに変換して使ってください。
・オンラインSCSS→CSSコンバーター
・SCSSをCSSにリアルタイムで変えるツール

//吹き出し
    .balloon {
      width: 100%;
      margin-bottom: 2rem;
      display: flex;
      align-items: start;
      gap: 2rem;
      &__icon {
        width: 5rem;
        height: 5rem;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
      &__txt{
        position: relative;
        max-width: 600px;
        padding: 1rem;
        border-radius: 0.5rem;
        background: #f1f1f1;
        flex: 1;
        &::before{
          content: "";
          position: absolute;
          width: 0;
          height: 0;
          border: 0.8rem solid transparent;
          top: 1rem;
          left: -1.5rem;
          border-right-color: #f1f1f1;
        }
      }
}