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

Question

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

解決済

回答 1

投稿 2019/12/01 11:47 ・編集 2019/12/03 21:52

評価
クリップ 0
VIEW 124

wally

score 2

前提・実現したいこと

テンプレートでは左からの吹き出しなのですが、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）段組みが解消されました。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

7 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

s8_chu

2019/12/01 12:07 編集

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

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

キャンセル
wally

2019/12/01 12:38 編集

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

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

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

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

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

画像の掲載ができることを知ったので、画像サイズを小さくする前の画像を載せてみました。これは横幅280px、縦幅355pxですが、試しに作った2番目のふきだし、3番目のふきだしまで画像が突き抜けてしまいました。これをふきだしの中だけで画像を収めるために画像の横幅を100pxにしました。画像の左が文章なのですが、1番最後の文字のところまででふきだしが終わってしまうようなので、本当は載せた画像のサイズに合わせてふきだしが大きくなると良いと思っています。画像はクリックすると大きくなりますが、ふきだしの中に入れる画像は400×400より大きくならない予定です。

キャンセル
asuchi0819

2019/12/01 12:51

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

再現できませんでした

https://codepen.io/asuchi0819/pen/bGNbxQL 再現できませんでした

キャンセル
wally

2019/12/02 00:15 編集

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

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

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

キャンセル
asuchi0819

2019/12/02 12:35

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

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

キャンセル
wally

2019/12/02 13:37

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

です。

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

パソコンはWindows10でChrome スマホはiPhone XでSafari です。画面の大きさ等帰宅後に確認致します。

キャンセル
wally

2019/12/02 23:03

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

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

キャンセル

回答 1 件

評価が高い順
新着順
古い順

同じタグがついた質問を見る

HTML
CSS

score 1 · Accepted Answer · 2019-12-01T12:53

ベストアンサー

+1

色々な方法がありますが、今回は inline-flex を使用します。
inline-flex を指定したことで、 inline-flex コンテナ内の各要素が整列します。p 要素の後に img 要素を記述していれば、その時点でこの動作が実現出来たということになります。もし順番が異なる場合は、 order プロパティで調整します。
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 */
}

投稿 2019/12/01 12:53

編集 2019/12/01 13:43

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2019/12/01 15:43

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様丁寧なご回答をありがとうございました。左からのふきだしで試してみたのですが、うまくいきませんでした…。 .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段組で文章が表示されました。（画像はあるのですが、このコメントにどのように表示するのかが判らず、画像が載せられておらずすみません。）教えて頂いた通りにできていないから、きちんと表示されないのだと思い、文章の上に画像、画像の上に文章等、試しているところです。

キャンセル
2019/12/01 16:27

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

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

キャンセル
2019/12/01 19:51 編集

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様早々にご回答ありがとうございました。教えて頂いた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>

キャンセル
2019/12/02 05:16

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

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

キャンセル
2019/12/03 16:54

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

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

キャンセル
2019/12/03 21:57

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

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

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

キャンセル
2019/12/04 13:27

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

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

キャンセル
2019/12/04 22:25

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

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

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

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

s8_chu様、ありがとうございます。元々のふきだしが文章の長さに関係なく、左端から右端まであるふきだしだったので、ふきだしのCSSを変更することでふきだしの長さが長くなったり短くなったりするものだと思っていたのですが、そうではないのですね！こういうことも解らないレベルなので、アドバイスありがとうございます。新たな質問にさせて頂きたいと思います。ありがとうございました。

キャンセル

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

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

前提・実現したいこと

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

該当のソースコード

試したこと

関連した質問

同じタグがついた質問を見る

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

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

前提・実現したいこと

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

該当のソースコード

試したこと

15分調べてもわからないことは、teratailで質問しよう！

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン