【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. 【インクブログ】年内営業最終日

    今日はインクデザインの年内営業最終日でした。皆様、一年間大変お世話にな…

  2. 産休までの1ヵ月

    先日、代表と話しまして6月一杯で産休に入ることとなりました。残りおよ…

  3. 【インクブログ】VR AR体験会

    VR AR体験会今日はco-labのVR・AR体験会でした。口をポカ…

  4. いろんな人に繋いでいただいた縁。

    昨日新潟県糸魚川市を出張で訪れました。とあるプロジェクトの打ち合わ…

  5. 【インクブログ】新たに名刺を作成したら…

    新たに名刺を作成したら…な昨晩のお話。名刺の表面の活版印刷を注文させて…

  6. プレゼン会@co-lab

    昨夜、5月から移転先のco-labさんでプレゼン会が行われました。 弊社…

  7. 生活のいろいろ|9月号

    弊社スタッフが撮影した何気な~い日常を切り取った写真から、季節や生活のうつ…

  8. 2年経ちました。

    2年前の今日、会社員を辞めて翌日からインクデザインの営業を始めたので、ち…

PAGE TOP