[https://teratail.com/questions/151592](https://teratail.com/questions/151592) こちらにて質問したものです。アイコンの右に文字を表示させるようにCSSを書いています。ご指摘いただいた内容をもとにCSSを改変していき、思った通りのものができあがってきました。しかし、iPhone SEと同じ画面サイズのスマートフォン（エミュレータ）で表示すると、下記画像のようにアイコンが潰れてしまいます。 ![イメージ説明](3de4eff8f5609786d35a44419cc931e0.jpeg) 下の画像のように表示されればよいのですが、画面サイズの小さいスマートフォンに対応されるためにはどのように改変すればよいでしょうか？（こちらは画面5.5インチのスマートフォン実機のスクリーンショット） ![イメージ説明](19c7cfcafc58695ad3247997381e0d04.jpeg) 現在のコード内容はCodepenに記載しているものとなります。 [https://codepen.io/na_sun/pen/QZoxRP](https://codepen.io/na_sun/pen/QZoxRP)

質問内の添付画像通りを作るためだけだと html、cssそれぞれから不要な行があったので削除してます。どうしても必要でしたらもう一度記載してくださいいかがでしょうか？ ```html テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ``` ```css * { /* リセット用ｃｓｓです */ margin:0; } .balloon { padding:30px 10px 10px; } .balloon-img-left { display: flex; width:90%; margin: 0 auto; /* 不要なら削除してください */ padding:10px; border: 3px ridge gray; border-radius:11px; } .balloon-img-left img { height:15%; /* もしかしたら「%｝ではなく「130px」で指定した方が良いかもしれません */ width:130px; } .balloon-text-right p{ flex: auto; } ``` レスポンシブ対応の場合 ```css @media screen and (max-width: 480px) { /* iPhone 7/6 Plus縦 */ .balloon-img-left img { height: ○○px; /* 変更サイズ */ width: ○○px; /* 変更サイズ */ } } @media screen and (max-width: 320px) { /* iPhone 5/SE/4以下縦 */ .balloon-img-left img { height: ○○px; /* 変更サイズ */ width: ○○px; /* 変更サイズ */ } } ```

iPhone SEの画面サイズにＣＳＳを対応させたい

https://teratail.com/questions/151592
こちらにて質問したものです。アイコンの右に文字を表示させるようにCSSを書いています。

ご指摘いただいた内容をもとにCSSを改変していき、思った通りのものができあがってきました。

しかし、iPhone SEと同じ画面サイズのスマートフォン（エミュレータ）で表示すると、下記画像のようにアイコンが潰れてしまいます。

下の画像のように表示されればよいのですが、画面サイズの小さいスマートフォンに対応されるためにはどのように改変すればよいでしょうか？（こちらは画面5.5インチのスマートフォン実機のスクリーンショット）

現在のコード内容はCodepenに記載しているものとなります。

https://codepen.io/na_sun/pen/QZoxRP

akihiro3

2018/10/28 14:45

pcサイズでもスマホサイズでも、画像の幅が変わらない事が希望でしょうか？

N.Yankee

2018/10/28 15:28

そのようになります。可能であればスマホの画面サイズが小さい場合に少しだけ縮小できたらよいと思っていますが、iPhone SEでは実際にどのように表示されるか実機がなく検証が難しいため、現段階では画面が大きなスマホサイズと同じサイズでアイコンが表示されれば良いと考えています。

akihiro3

2018/10/28 15:34

幅可変しても画像サイズが変わらないのが希望でしたら、現在の回答の方法で大丈夫と思います。幅可変とともに画像サイズを変えるのであればレスポンシブ対応が必要になります

akihiro3

2018/10/28 15:51

「そのようになります。可能であればスマホの画面サイズが小さい場合に少しだけ縮小できたらよいと思っています」。。。答えが矛盾してますね。悩んでます？せっかくなのでレスポンシブ対応のコードも追記しておきますので参考にしてみてください

行動規範の内容に同意します

回答1件

ベストアンサー

質問内の添付画像通りを作るためだけだと
html、cssそれぞれから不要な行があったので削除してます。
どうしても必要でしたらもう一度記載してください

いかがでしょうか？

html
1	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
2	<div class="balloon">
3		<div class="balloon-text-right">
4			<figure class="balloon-img-left">
5				<img src="https://www.google.com/images/icons/product/android-128.png" alt="no-image"/>
6				<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
7			</figure>
8		</div>
9	</div>

css
1* {  /* リセット用ｃｓｓです */
2	margin:0;
3}
4
5.balloon {
6	padding:30px 10px 10px;
7}
8
9.balloon-img-left {
10	display: flex;
11	width:90%;
12	margin: 0 auto; /* 不要なら削除してください */
13	padding:10px;
14	border: 3px ridge gray;
15	border-radius:11px;
16}
17
18.balloon-img-left img {
19	height:15%;  /* もしかしたら「%｝ではなく「130px」で指定した方が良いかもしれません */
20	width:130px;
21}
22
23.balloon-text-right p{
24	flex: auto;
25}
26

レスポンシブ対応の場合

css
1@media screen and (max-width: 480px) { /* iPhone 7/6 Plus縦 */
2	.balloon-img-left img {
3		height: ○○px;  /* 変更サイズ */
4		width: ○○px;  /* 変更サイズ */
5	}
6}
7
8@media screen and (max-width: 320px) { /* iPhone 5/SE/4以下縦 */
9	.balloon-img-left img {
10		height: ○○px;  /* 変更サイズ */
11		width: ○○px;  /* 変更サイズ */
12	}
13}