レスポンシブ対応のHTML・CSS（画像の横に文章を表示させたい）について質問です。 ※プログラミン

解決済

質問者：erina_812
質問日時：2021/11/07 02:00
回答数：2件

レスポンシブ対応のHTML・CSS（画像の横に文章を表示させたい）について質問です。

※プログラミング初心者です。

【実施したいこと】
画像の横に文章を表示させ、レスポンシブ対応にしたいが、スマホになると下記画像の右側のように、画像の下に文字が表示されてしまう。

左の画像の様に、スマホ対応になっても画像の横に文字がくるようにしたいです。

下記のURL、HTML・CSSになります。
間違っている箇所を教えて下さい。
宜しくお願い致します。

https://docs.google.com/document/d/e/2PACX-1vSge …

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2021/11/08 16:38

こんにちは

＞スマホ対応になっても画像の横に文字がくるようにしたいです。
画像と文字をセットにしてレイアウトしたいのではないかと推測しますけれど・・・
ご提示の状態だと、ウィンドウ幅を1000px前後にすると、文字だけが次の行に移動しますけれど、そういう意図なのでしょうか？

もしも、違うのなら、
まず、画像と文字がセットになるような文書構造にしておくべきです。
そのセット内で、画像と文字が横並びになるようにしておけばよいですね。
そのうえで、（すでに指摘があるように）そのセットをリスト形式で表示するなり、DIV等でレイアウトするなりすればよろしいかと。

また、1行のカラム数を3と1の2者択一にするのか、ウィンドウ幅に応じて3→2→1のように可変にするのかによっても考え方は変わってきます。
「リスト形式で3カラム・1カラム」の例はすでに回答されていますので、以下はリスト形式ではなく
　<figure>
　　<img />
　　<figcaption></figcaption>
　</figure>
を1単位とするような文書構成にした例です。
また、画面幅に応じてカラム数が変わるようにしてありますので、CSSの
　@media screen
の記述も不要になります。

以下、ご参考までに。
※ 画像に赤枠(=border)を設定してありますが、レイアウト上画像が無くても位置を識別できるようにするためなので、実際の画像を入れた際には削除してください。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.wrap, .wrap *{margin: 0; padding: 0; }
.wrap {
display: flex; flex-wrap: wrap;
justify-content: space-between;
border:1px solid gray;
}
.wrap figure {
padding: 10px; flex-grow: 1;
width: 400px; min-width: 380px; max-width: 750px;
display: flex;
}
.wrap figure img {
display: block;
width: 100px; height:100px;
margin-right: 8px;
border:1px solid red; /* ←画像位置確認用 */
}
.wrap figcaption { line-height: 1.5em; }
.wrap figcaption p:first-child {
font-weight: bold; margin: .3em;
}
</style>
</head>
<body>
<div class="wrap">
<figure><img src="202×202のpngが入ります" alt="" />
<figcaption>
<p>ギフトラッピング<p>￥500 でギフトラッピングを承っております。
</figcaption></figure>

<figure><img src="202×202のpngが入ります" alt="" />
<figcaption>
<p>送料無料<p>￥15,000（税込）以上のご購入で送料無料。
</figcaption></figure>

<figure><img src="202×202のpngが入ります" alt="" />
<figcaption>
<p>最短当日発送<p>15時までのご注文で最短当日発送。
</figcaption></figure>

<figure><img src="202×202のpngが入ります" alt="" />
<figcaption>
<p>ギフトラッピング<p>￥500 でギフトラッピングを承っております。
</figcaption></figure>

<figure><img src="202×202のpngが入ります" alt="" />
<figcaption>
<p>送料無料<p>￥15,000（税込）以上のご購入で送料無料。
</figcaption></figure>

<figure><img src="202×202のpngが入ります" alt="" />
<figcaption>
<p>最短当日発送<p>15時までのご注文で最短当日発送。
</figcaption></figure>
<div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございましたm(_ _)m
大変助かりました。

通報する

お礼日時：2022/04/07 04:28

No.1

回答者： naokita
回答日時：2021/11/07 12:52

それは項目なので、文章構造的にはリストじゃないの？

という事で、無駄に無理にHTML5にする事もなく、最小で半分で書ける

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style type="text/css"></style>
</head>
<body>
<ul class="aaa">
<li><p><img src="202×202のpngが入ります">
<strong>ギフトラッピング</strong><br>￥500 でギフトラッピングを承っております。</p>
</li>
<li><p><img src="202×202のpngが入ります">
<strong>送料無料</strong><br>￥15,000（税込）以上のご購入で送料無料。</p>
</li><li>
<p><img src="202×202のpngが入ります">
<strong>最短当日発送</strong><br>15時までのご注文で最短当日発送。</p>
</li>
</ul>
</body>
</html>