こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

-広告-

締切り済みの質問

レスポンシブデザインのCSSについて質問です。

レスポンシブデザインのCSSについて質問です。PCで閲覧した時は、文章を左寄せ、画像を右寄せで表示させて、スマホで閲覧した時は、文章の下に画像を配置する方法を教えて下さい。

ちなみに私の場合はPC用サイトを以下のように作成していますが、スマホではどのようなCSSにすればいいのか、わからずに悩んでいる状況です。可能であれば、簡単なサンプル・ソースを教えていただけると嬉しいです。よろしくお願いします。

■html
<p><img src="gazo.png" class="photo">このページはサンプルです。</p>

■css
.photo {
float: right;
width: 230px;
position: relative;
}

投稿日時 - 2015-06-08 13:34:37

QNo.8990275

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(2)

ANo.2

レスポンシブは記述の順番が重要ですので、元の記述をひっくり返してレイアウトしようとするのは無理があります。
テキストが先、画像が後としてhtmlを記述するのが一番正しい方法です。

【例】
<div>
<p class="text">このページはサンプルです。</p>
<p class="photo"><img src="gazo.png"></p>
</div>

.text{
width:78%;
float:left;
}

.photo{
float:right;
width:20%;
}

これなら、幅が狭くなった時にwidthとfloatを解除すれば解決できます。

力技で良ければ、現在のhtmlのまま対応する事も出来なくはないです。

p{
padding-bottom:100px;(ここは画像の縦サイズ+適度な隙間)
position:relative;
}

.photo{
position:absolute;
left:0;
bottom:0;
}

こんなかんじでしょうか。
でもこのやり方を多用すると構築・管理共にめんどくさくなるのでお勧めはしませんね。

投稿日時 - 2015-06-08 14:20:57

ANo.1

imgをblockにしちゃえばOK

@media(max-width:720px){
.photo{display:block;float:none;}
}

投稿日時 - 2015-06-08 13:59:27

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-