【CSS】ふきだし型のテキストボックスをつくりたい

更新日:2020年10月30日

CSSで会話形式(LINE風味)のテキストボックスをつくってみます。

HTML

<div class="fukidashi">
  <div class="text">
    <p>こんにちは、赤ずきんです。今日はおばあさんのお見舞いにいってきます。</p>
    <p>おおかみには気をつけます。</p>
  </div>
  <div class="icon"><img src="assets/img/icon.png" alt="赤ずきん">
    <p class="label">赤ずきん</p>
  </div>
</div>

CSS

.fukidashi {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  position: relative;
  max-width: 870px;
  margin: 0 auto;
  align-items: flex-start;
    margin-bottom: 1em;
}

.fukidashi .text {
  position: relative;
  display: flex;
  flex-flow: wrap;
  justify-content: flex-end;
  width: calc(100% - 118px);
}

.fukidashi .text p {
  background: #eceefe;
  margin-bottom: 1em;
  padding: 0.8em 1em;
  border-radius: 11px;
  display: inline-block;
  font-size: 1.5rem;
}


.fukidashi .icon {
  text-align: center;
  position: relative;
  top: -1em;
}

.fukidashi .icon img {
  width: 88px;
  height: 88x;
  border-radius: 80px;
  position: relative;
  z-index: 0;
}


.fukidashi .icon .label {
  font-size: 1.5rem;
  margin-bottom: 0.25em;
}

/*吹き出しの三角部分*/
.fukidashi .text::after {
  content: url("../img/fukidashi_sankaku.png");
  position: absolute;
  top: 15px;
  right: -20px;
}

吹き出しの三角部分は画像で用意します。

これで吹き出しのテキストボックスは完成です。

同じ要領で反対側に来る吹き出し型のテキストボックスも作ってみます。

HTML

div class="fukidashi type2">
  <div class="text">
    <p>ごきげんよう!!</p>
  </div>
  <div class="icon"><img src="assets/img/icon-type2.png" alt="おおかみ">
    <p class="label">おおかみ</p>
  </div>
</div>

CSS

/*反対向きの吹き出し*/
.fukidashi.type2 {
  flex-direction: row-reverse; 
}

.fukidashi.type2  .text {
  justify-content: flex-start;

}

.fukidashi.type2  .text p {
  background: #e5fcbd;
}


/*吹き出しの三角部分*/
.fukidashi.type2 .text::after {
  content: url("../img/fukidashi_sankaku-2.png");
  left: -20px;

}

これで会話形式(LINE風味)になりました。コピペもOKですしカスタマイズもOKです。ぜひお試しください。

(たなか)

Photoshop CC 2021 新機能

【制作実績】コーディースポーツ様 WEB site

関連記事

  1. 【IRエディターが解説】IPO「成長可能性資料」…

    IPOを目指す企業が投資家に対して自社の魅力を最大限に伝える上で、最も重要…

  2. 【インクブログ】Ibaraki Creators…

    \ 現場のウラ側みせます!/Ibaraki Creators' Meeti…

  3. 【インクブログ】イラスト紹介

    今回紹介するのは、建築関係のサイトのメインビジュアルです。古民家を自分たち…

  4. 冬晴れの西新宿

    【インクブログ】冬晴れの西新宿からのスタート

    年始からスタートダッシュなインクデサインでしたが、ようやく先が見…

  5. [制作実績]名刺・コーポレートマーク[インキュベ…

    設立されたばかりのプライムみず穂株式会社様のコーポレート…

  6. Kindle paperwhite購入してから読…

    Kindle paperwhite購入して1ヶ月くらいですが、沢山の本…

  7. コーポレートスピリット

    インクデザインのコーポレートスピリットを具現化したポスターの印刷が出…

  8. incdesign 2.0

    ちょっと青臭いことを書かせてください。約1年前、起業自体が目的になって…

PAGE TOP