レスポンシブ対応のHTML・CSS(画像の横に文章を表示させたい)について質問です。
※プログラミング初心者です。
【実施したいこと】
画像の横に文章を表示させ、レスポンシブ対応にしたいが、スマホになると下記画像の右側のように、画像の下に文字が表示されてしまう。
左の画像の様に、スマホ対応になっても画像の横に文字がくるようにしたいです。
下記のURL、HTML・CSSになります。
間違っている箇所を教えて下さい。
宜しくお願い致します。
https://docs.google.com/document/d/e/2PACX-1vSge …
No.2ベストアンサー
- 回答日時:
こんにちは
>スマホ対応になっても画像の横に文字がくるようにしたいです。
画像と文字をセットにしてレイアウトしたいのではないかと推測しますけれど・・・
ご提示の状態だと、ウィンドウ幅を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>
No.1
- 回答日時:
それは項目なので、文章構造的にはリストじゃないの?
という事で、無駄に無理にHTML5にする事もなく、最小で半分で書ける
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style type="text/css"><!-- *{box-sizing: border-box;}
ul.aaa{ margin:0 0 30px; padding:0; border:1px solid gray; overflow:hidden;}
ul.aaa li{ display:inline-block; margin:0; padding:16px; width:33%; min-height:120px; list-style:none; line-height:1.7;}
ul.aaa li img{ width: 100px; /*画像サイズ指定*/ margin: -10px 16px 10px 0; float:left;}
ul.aaa li strong{ font-size: 18px;}
@media screen and (max-width: 768px){ ul.aaa li{ display: block; width: 100%;}}
--></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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
3つの画像を中央に寄せて表示さ...
-
CSSの左横に隙間ができてしまい...
-
機種依存文字、m2(平方メート...
-
画像を縦に並べたら隙間ができ...
-
int count=0; double x_g=0.0,y...
-
1箇所に複数画像を別々に配置は...
-
HTMLのIMAGEに。。
-
同一URLの連続アクセス方法
-
HTMLタグのDL DT DDを使ってli...
-
DW MXで画像を囲むボーダーの色...
-
画像のサイズが変わらない
-
OpenCVで画像の一部を取り出す。
-
学校でポートフォリオサイトを...
-
リンクをつけた画像をクリック...
-
ボタンをセル内一杯に表示させ...
-
ルートパスの動作確認
-
IE6でヘッダーとイメージの間に...
-
画像の横にテキスト
-
この記号の羅列について教えて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
HTMLのIMAGEに。。
-
inputタグでサーバにデータを送...
-
UDP通信を使うチャットプログラ...
-
画像の場合のみ、下線を消す方...
-
画像のサイズが変わらない
-
機種依存文字、m2(平方メート...
-
XML画像データををHTMLで簡単に...
-
画像をクリックして元に戻すには
-
Dreamweaverで画像⇔画像のアン...
-
favicon.ico はもういらない?
-
cssで、チェックボックスの画像...
-
下記が私のHPのタグなのですが
-
同一URLの連続アクセス方法
-
アップロードするとレイアウト...
-
HTMLタグのDL DT DDを使ってli...
-
ルートパスの動作確認
-
htmlで画像を2個ずつ並べていき...
-
画像リンクの周りに線が出ます
おすすめ情報