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

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

ただいまの
回答率

89.99%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

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

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

    評価を下げる理由を選択してください

    詳細な説明はこちら

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

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

  • asuchi0819

    2019/12/02 12:35

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

    キャンセル

  • wally

    2019/12/02 13:37

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

    です。

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

    キャンセル

  • wally

    2019/12/02 23:03

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

    キャンセル

回答 1

checkベストアンサー

+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 */
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/03 21:57

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

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

    キャンセル

  • 2019/12/04 13:27

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

    キャンセル

  • 2019/12/04 22:25

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

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

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

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

    キャンセル

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる