前提・実現したいこと
テンプレートでは左からの吹き出しなのですが、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>
しかし、どの環境でもきちんと表示されるのかが判らない(画像サイズを小さくしたことで私の環境では問題なく表示されたため)のと、現在の設定では文章は折り返しで表示されていますが、文章の右端と画像の左端がピッタリとくっついています。
s8_chuさまに教えて頂いた内容を元に手元のテスト画像のプレビュー画面を確認してみた結果を画像で掲載します。(12/3 21:49)段組みが解消されました。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+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 */
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.99%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
s8_chu
2019/12/01 12:07 編集
画像が画面に収まらないほど横長の場合、文章や画像はどのように表示するのでしょうか?(横と縦の比率は維持するのか、画像をゆがませてでも全体を見せるのか、など) それとも、画像は 400x400 以上にはならないという前提でよろしいのでしょうか?
wally
2019/12/01 12:38 編集
画像の掲載ができることを知ったので、画像サイズを小さくする前の画像を載せてみました。
これは横幅280px、縦幅355pxですが、試しに作った2番目のふきだし、3番目のふきだしまで画像が突き抜けてしまいました。
これをふきだしの中だけで画像を収めるために画像の横幅を100pxにしました。
画像の左が文章なのですが、1番最後の文字のところまででふきだしが終わってしまうようなので、本当は載せた画像のサイズに合わせてふきだしが大きくなると良いと思っています。
画像はクリックすると大きくなりますが、ふきだしの中に入れる画像は400×400より大きくならない予定です。
asuchi0819
2019/12/01 12:51
https://codepen.io/asuchi0819/pen/bGNbxQL
再現できませんでした
wally
2019/12/02 00:15 編集
asuchi0819様
お試しいただきありがとうございます。
asuchi0819様の環境では私が上で載せたcssやHTMLのままでもふきだしの中に画像が入るのですね。
私が質問させて頂いた時と、asuchi0819様が再現してくださったものとで画像のタグを入れる場所が違っていたので、asuchi0819様と同じように文章の1番最後に画像を入れてみたのですが、やはり、画像がふきだしに収まらず、ふきだしの下に突き抜けてしまいました。
ありがとうございました。
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(推奨)
と書かれているところを選択していました。