ふきだしの中に画像と文字を一緒に入れたり、情報量によって横幅を縮めたい。

Question

前提・実現したいこと

テンプレートでは左からの吹き出しなのですが、cssを少し変更して右からの吹き出しにする方法は解りました。

実現したいことは3つです。

1.文字が少ない時は吹き出しの幅を短くしたい。
2.吹き出しの中（右端）に画像を挿入したい。
3.画像の左には文章が入るので、文章と画像の間に少し余白が欲しい。

発生している問題・エラーメッセージ

[リンク](https://saruwakakun.com/html-css/reference/speech-bubble)

↑の「考えごと風のふきだし」を使いました。
ふきだしの中に入れる画像は画像サイズを小さくしないとふきだしから画像がはみ出してしまうのと、吹き出しと文字がピッタリくっついていて、余白がありません。

また、10～20文字程度で終わる文章の場合は吹き出しの横幅を縮めたいと思っています。

該当のソースコード

<div class="balloon4">
  <p>ここに文章</p>
</div>

.balloon4 {
  position: relative;
  margin: 2em 0 2em 40px;
  padding: 15px;
  background: #fff0c6;
  border-radius: 30px;
}

.balloon4:before {  
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #fff0c6;
  border-radius: 50%;
}

.balloon4:after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #fff0c6;
  border-radius: 50%;
}
.balloon4 p {
  margin: 0; 
  padding: 0;
}

cssは吹き出しが左から、右から出るように少し改変しています。

/*************
/* 左から吹き出し
*************/

.balloon1 {
  position: relative;
  margin: 2em 0 2em 40px;
  padding: 15px;
  background: #FAE2E1;
  border-radius: 30px;
}

.balloon1:before {  
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #FAE2E1;
  border-radius: 50%;
}

.balloon1:after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #FAE2E1;
  border-radius: 50%;
}
.balloon1 p {
  margin: 0; 
  padding: 0;
}
/*************
/* 右から吹き出し
*************/
.balloon2 {
  position: relative;
  margin: 2em 40px 2em 0;
  padding: 15px;
  background: #FAE2E1;
  border-radius: 30px;
}
.balloon2:before {
  content: "";
  position: absolute;
  right: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #FAE2E1;
  border-radius: 50%;
}
.balloon2:after {  
  content: "";
  position: absolute;
  right: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #FAE2E1;
  border-radius: 50%;
}

試したこと

画像の幅は元々200px～400px程度あり、縦長の画像ですと高さも400px以上あるのですが、元々の画像のままですと、吹き出しから画像がはみ出てしまうため、現在は画像を小さく載せています。

<div class="balloon1">
<div align="right"><a href="images/sample.jpg"><img src="images/sample.jpg" width="100"  align="right"></a></div>
<p>　文章が数行に渡って入る場合と1行で終わる場合といろいろあります。</p>

しかし、どの環境でもきちんと表示されるのかが判らない（画像サイズを小さくしたことで私の環境では問題なく表示されたため）のと、現在の設定では文章は折り返しで表示されていますが、文章の右端と画像の左端がピッタリとくっついています。

現時点（12/1　19:45）のものを画像で掲載します。

s8_chuさまに教えて頂いた内容を元に手元のテスト画像のプレビュー画面を確認してみた結果を画像で掲載します。（12/3　21:49）段組みが解消されました。

Comments

[s8_chu]

画像が画面に収まらないほど横長の場合、文章や画像はどのように表示するのでしょうか？(横と縦の比率は維持するのか、画像をゆがませてでも全体を見せるのか、など) それとも、画像は 400x400 以上にはならないという前提でよろしいのでしょうか？

[wally]

画像の掲載ができることを知ったので、画像サイズを小さくする前の画像を載せてみました。

これは横幅280px、縦幅355pxですが、試しに作った2番目のふきだし、3番目のふきだしまで画像が突き抜けてしまいました。

これをふきだしの中だけで画像を収めるために画像の横幅を100pxにしました。

画像の左が文章なのですが、1番最後の文字のところまででふきだしが終わってしまうようなので、本当は載せた画像のサイズに合わせてふきだしが大きくなると良いと思っています。

画像はクリックすると大きくなりますが、ふきだしの中に入れる画像は400×400より大きくならない予定です。

[kyoya0819]

https://codepen.io/asuchi0819/pen/bGNbxQL

再現できませんでした

[wally]

asuchi0819様
お試しいただきありがとうございます。
asuchi0819様の環境では私が上で載せたcssやHTMLのままでもふきだしの中に画像が入るのですね。
私が質問させて頂いた時と、asuchi0819様が再現してくださったものとで画像のタグを入れる場所が違っていたので、asuchi0819様と同じように文章の1番最後に画像を入れてみたのですが、やはり、画像がふきだしに収まらず、ふきだしの下に突き抜けてしまいました。

ありがとうございました。

[kyoya0819]

環境はなんでしょうか？
Windows10かMac OS XかHomeかProかChromeかFirefoxかバージョンは何か、画面の大きさ・ピクセルは何か

[wally]

パソコンはWindows10でChrome
スマホはiPhone XでSafari

です。

画面の大きさ等帰宅後に確認致します。

[wally]

自分のことなのに遅くなりましてすみません。
画面の大きさは解像度というところでしょうか？
1366×768（推奨）
と書かれているところを選択していました。

Answer 1

1. 色々な方法がありますが、今回は inline-flex を使用します。
2. inline-flex を指定したことで、 inline-flex コンテナ内の各要素が整列します。p 要素の後に img 要素を記述していれば、その時点でこの動作が実現出来たということになります。もし順番が異なる場合は、 order プロパティで調整します。
3. inline-flex コンテナ内の p 要素の直後に隣接する img 要素にのみ margin-left プロパティを適用することで、この動作が実現出来ます。

p 要素の直後に img 要素がある場合 (動作確認用リンク):

<div class="balloon2">
  <p>ここに文章</p>
</div>

<hr>

<div class="balloon2">
  <p>
    ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章
  </p>
</div>

<hr>

<div class="balloon2">
  <img src="http://placehold.jp/3d4070/ffffff/150x150.png">
</div>

<hr>

<div class="balloon2">
  <p>
    ここに文章
  </p>
  <img src="http://placehold.jp/3d4070/ffffff/150x150.png">
</div>

<hr>

<div class="balloon2">
  <p>
    ここに文章
  </p>
  <img src="http://placehold.jp/3d4070/ffffff/150x150.png">
</div>

<hr>

<div class="balloon2">
  <img src="http://placehold.jp/3d4070/ffffff/400x400.png">
</div>

<hr>

<div class="balloon2">
  <p>
    ここに文章
  </p>
  <img src="http://placehold.jp/3d4070/ffffff/400x400.png">
</div>

<hr>

<div class="balloon2">
  <p>
    ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章
  </p>
  <img src="http://placehold.jp/3d4070/ffffff/400x400.png">
</div>

.balloon2 {
  position: relative;
  margin: 2em 40px 2em 0;
  padding: 15px;
  background: #FAE2E1;
  border-radius: 30px;
}

.balloon2:before {
  content: "";
  position: absolute;
  right: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #FAE2E1;
  border-radius: 50%;
}

.balloon2:after {
  content: "";
  position: absolute;
  right: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #FAE2E1;
  border-radius: 50%;
}

.balloon2 {
  display: inline-flex;  /* 1, 2 */
}

.balloon2>p {
  max-width: 30em;
}

.balloon2>img {
  object-fit: contain;
  max-width: 100%;
}

.balloon2>p+img {
  margin-left: 1.5em;  /* 3 */
}

img 要素の直後に p 要素がある場合 (動作確認用リンク):

<div class="balloon2">
  <p>ここに文章</p>
</div>

<hr>

<div class="balloon2">
  <p>
    ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章
  </p>
</div>

<hr>

<div class="balloon2">
  <img src="http://placehold.jp/3d4070/ffffff/150x150.png">
</div>

<hr>

<div class="balloon2">
  <img src="http://placehold.jp/3d4070/ffffff/150x150.png">
    <p>
    ここに文章
  </p>
</div>

<hr>

<div class="balloon2">
  <img src="http://placehold.jp/3d4070/ffffff/150x150.png">
  <p>
    ここに文章
  </p>
</div>

<hr>

<div class="balloon2">
  <img src="http://placehold.jp/3d4070/ffffff/400x400.png">
</div>

<hr>

<div class="balloon2">
  <img src="http://placehold.jp/3d4070/ffffff/400x400.png">
   <p>
    ここに文章
  </p>
</div>

<hr>

<div class="balloon2">
  <img src="http://placehold.jp/3d4070/ffffff/400x400.png">
  <p>
    ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章
  </p>
</div>

.balloon2 {
  position: relative;
  margin: 2em 40px 2em 0;
  padding: 15px;
  background: #FAE2E1;
  border-radius: 30px;
}

.balloon2:before {
  content: "";
  position: absolute;
  right: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #FAE2E1;
  border-radius: 50%;
}

.balloon2:after {
  content: "";
  position: absolute;
  right: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #FAE2E1;
  border-radius: 50%;
}

.balloon2 {
  display: inline-flex;  /* 1, 2 */
}

.balloon2>p {
  max-width: 30em;
}

.balloon2>img {
  object-fit: contain;
  max-width: 100%;
  order: 1; /* 2 */
}

.balloon2>img+p {
  margin-right: 1.5em;  /* 3 */
}

Comments

[wally]

s8_chu様

丁寧なご回答をありがとうございました。
左からのふきだしで試してみたのですが、うまくいきませんでした…。

.balloon1 {
position: relative;
margin: 2em 0 2em 40px;
padding: 15px;
background: #FAE2E1;
border-radius: 30px;
}

.balloon1:before {
content: "";
position: absolute;
left: -38px;
width: 13px;
height: 12px;
bottom: 0;
background: #FAE2E1;
border-radius: 50%;
}

.balloon1:after {
content: "";
position: absolute;
left: -24px;
width: 20px;
height: 18px;
bottom: 3px;
background: #FAE2E1;
border-radius: 50%;
}
.balloon1 p {
margin: 0;
padding: 0;
}
.balloon1 {
display: inline-flex; /* 1, 2 */
}

.balloon1>p {
max-width: 30em;
}

.balloon1>img {
object-fit: contain;
max-width: 100%;
}

.balloon1>img+p {
margin-left: 1.5em; /* 3 */
}

のように記述してみたところ、画像が1番左に配置され、5段組で文章が表示されました。（画像はあるのですが、このコメントにどのように表示するのかが判らず、画像が載せられておらずすみません。）
教えて頂いた通りにできていないから、きちんと表示されないのだと思い、文章の上に画像、画像の上に文章等、試しているところです。

[s8_chu]

その場合、以下のようにすると良いと思います。
https://jsfiddle.net/zfuhmj1w/

[wally]

s8_chu様

早々にご回答ありがとうございました。
教えて頂いたcssを全てコピーしましたが、画像が左寄せで表示され、文章は段落が替わるたびに段組みになってしまいました。（現在の画面の画像を質問の1番下に貼りました。）HTML側が間違っている可能性が高いと思っています。

css
/*************
/* 左から吹き出し
*************/

.balloon1 {
position: relative;
margin: 2em 0 2em 40px;
padding: 15px;
background: #FAE2E1;
border-radius: 30px;
}

.balloon1:before {
content: "";
position: absolute;
left: -38px;
width: 13px;
height: 12px;
bottom: 0;
background: #FAE2E1;
border-radius: 50%;
}

.balloon1:after {
content: "";
position: absolute;
left: -24px;
width: 20px;
height: 18px;
bottom: 3px;
background: #FAE2E1;
border-radius: 50%;
}

.balloon1 p {
margin: 0;
padding: 0;
}

.balloon1 {
display: inline-flex;
/* 1, 2 */
}

.balloon1>p {
max-width: 30em;
}

.balloon1>img {
object-fit: contain;
max-width: 100%;
order: 1;
}

.balloon1>img+p {
margin-right: 1.5em;
/* 3 */
}
/*************
/* 右から吹き出し
*************/
.balloon2 {
position: relative;
margin: 2em 40px 2em 0;
padding: 15px;
background: #FAE2E1;
border-radius: 30px;
}

.balloon2:before {
content: "";
position: absolute;
right: -24px;
width: 20px;
height: 18px;
bottom: 3px;
background: #FAE2E1;
border-radius: 50%;
}

.balloon2:after {
content: "";
position: absolute;
right: -38px;
width: 13px;
height: 12px;
bottom: 0;
background: #FAE2E1;
border-radius: 50%;
}

.balloon2 {
display: inline-flex; /* 1, 2 */
}

.balloon2>p {
max-width: 30em;
}

.balloon2>img {
object-fit: contain;
max-width: 100%;
}

.balloon2>p+img {
margin-left: 1.5em; /* 3 */
}

HTML
<article>
<div class="balloon1">
<a href="http://placehold.jp/3d4070/ffffff/150x150.png"><img src="http://placehold.jp/3d4070/ffffff/150x150.png" width="240"></a>
<p>　ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章</p>
<p>　ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章</p>
</div>
</article>
<article>
<div class="balloon2">
<a href="http://placehold.jp/3d4070/ffffff/150x150.png"><img src="http://placehold.jp/3d4070/ffffff/150x150.png" width="240"></a>
<p>　ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章</p>
<p>　ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章</p>
<p>　ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章</p>
</div>
</article>
<article>
<div class="balloon1">
<p>　ここに文章ここに文章ここに文章</p>
</div></article>

[s8_chu]

HTML 構造を変更したのであれば、それに合わせて CSS も変更しなければなりません。
https://jsfiddle.net/afc0b98u/

[s8_chu]

> 文章は段落が替わるたびに段組みになってしまいました。
について、読み逃していたので修正しましたが、いかがでしょうか？
https://jsfiddle.net/b6d2knLj/

[wally]

s8_chu様、何度もありがとうございました。
先程、最初の質問の1番下に現在の画面の画像を投稿しました。
段組みは解消されていました。
例文は長文なので、1番上のあずき色のタイトルの左から右までふきだしだと更に理想に近いのですが、これは難しいですよね…。

本来は私がきちんと理解して自分でやれていないといけないのに、すみません。

[s8_chu]

> 1番上のあずき色のタイトルの左から右までふきだしだと更に理想に近いのですが、これは難しいですよね…。
現状では、小豆色のタイトル部分に関する HTML, CSS が提示されていないため難しいと思います。本来の質問からは離れている内容となるため、この質問を解決済みにしたうえで、現在直面している問題に関して詳細を記述した質問を新たに投稿すると良いと思います。

[wally]

s8_chu様、ありがとうございます。
元々のふきだしが文章の長さに関係なく、左端から右端まであるふきだしだったので、ふきだしのCSSを変更することでふきだしの長さが長くなったり短くなったりするものだと思っていたのですが、そうではないのですね！

こういうことも解らないレベルなので、アドバイスありがとうございます。

新たな質問にさせて頂きたいと思います。

ありがとうございました。