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

2024年2月28日2024年4月27日

Kizineko（COPPY管理人）

URLをコピーしました！

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

シンプルなアイコン付きふきだし

シンプルなアイコン画像付きの吹き出し（左向き）のコードです。

シンプルなアイコン付きふきだしのコード

<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>

下記コードはSCSSで記述しています。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;
        }
      }
}