うーん・・・

【HTML・CSSについて】Web初心者です。

締切済

質問者：echizenhyaku86
質問日時：2019/07/02 17:59
回答数：2件

すみませんが
先ほどおかしな質問をしてしまったようですので再度質問いたします。

DreamweaverCC 2015でWebサイトを作成しています。
@media screen and (max-width:〜px) { } で
スマホサイズ、タブレットサイズをCSSに反映しました。

ページに画像とテキストを配置したいのですが、
PCサイズでは画像の右にテキストが来るように。
スマホサイズでは画像の下にテキストが来るようにしたいです。
（イメージ画像を添付いたします。）
この際、どのようにコードを書き込めば良いのでしょうか。

すみませんが、よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

参考程度に

No.2

回答者： fujillin
回答日時：2019/07/04 13:27

こんにちは

解決したのかどうか不明ですが、No1様の回答を基本に少しだけ手を加えた例です。

※ 文章はｐタグベースで綴られているものと仮定しています。
※ 添付画像より、画像サイズは一定なものと解釈しました。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<style type="text/css">
#wrap img { width:200px; height:200px; }
#wrap img { display:block; float:left; }
#wrap p+img { clear:left; }

@media screen and (max-width:479px){
#wrap img { float:none; margin:0 auto; }
}
</style>
</head>

<body>
<div id="wrap">
<img src="A.jpg" alt="" />
<p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
<p>かきくけこかきくけこ</p>
<p>さしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそ</p>
<img src="B.jpg" alt="" />
<p>たちつてと</p>
<p>なにぬねの</p>
<p>はひふへほ</p>
</div>
</body>
</html>