レスポンシブwebデザイン

質問

レスポンシブwebデザインで
スマホの時は
<img src="http://1.png">
<img src="http://2.png">
の様に2つの画像を表示し
PCの時は
<img src="http://1.png">
<img src="http://2.png">
<img src="http://3.png">
の様に3つの画像を表示する事は出来ますか?

実際のタグはどちらも
<img src="http://1.png">
<img src="http://2.png">
<img src="http://3.png">
のように同じで
スマホの場合は
<img src="http://3.png">だけ
高さや横幅を0にして小さくするしかないのでしょうか?

回答No.2

4017B · ベストアンサー

<img src="3.png" class="for-pc">

～みたいにPC版用の適当なCLASS名を割り振り、後はCSSでそのCLASSに…

@media screen and ( max-width: 400px )
{
.for-pc { display: none; }
}

～みたいに記述すると「横幅400px以下の時はCLASS名 "for-pc" を非表示」みたいな。

＞レスポンシブデザインの簡単な作り方 - https://allabout.co.jp/gm/gc/396787/

とりあえず初心者向きの解説講座が上記リンク先にあるので、まずはそこから初めてみてちょ！

P.S.
回答者1が既に述べてる様に、厳密にハードウェアを判別して表示を切り替えたいのであれば。それはもうCSSの守備範囲外。JavascriptかPHPとか何らかのプログラムでアクセス元のブラウザ情報（エージェント情報）を取得するしかないので。

自作スクリプトが設置出来る環境下であれば、判別自体は難しい事ではないですが…今後のいわゆる「モバイルファースト」の流れから考えると、PC版とスマホ版にサイト内容を分けて表示する仕様は古いと言うか、少なくともgoogle検索に置いてはサイト評価の順位が大きく下がる要因になる事が先頃のカンファレンスで事実上決定しました。

ですので、基本はPC版をしっかりと作り込んで、それをCSSのレスポンシブデザインで切り替えて「スマホでも見易く」表示させるスタイルにするのが良いかと。安易な非表示化はgoogleのエンジンはサイト内に非表示コンテンツが含まれると、何か良からぬ細工をしている悪質サイトという判断をするので悪手であると言えます。

お礼

ご回答ありがとうございました。

回答No.1

tracer

レスポンシブとは、画面の幅や高さによって表示を切り替える手法を言います。
スマートフォンを判別してるわけではないので誤解なきように。

また、webデザインの見た目を司るのはcssです。
実際、レスポンシブデザインはcssの記述なくしては不可能です。
具体的には、cssのmedia queryでレスポンシブを実現するわけですが、要素(今回の場合はimg)の表示を変更する手段は、幅や高さ以外にも、透明度や、重なり順、表示非表示の切り替えなど、さまざまなものがあります。まずは、cssで何ができるかを検索されることをおすすめします。なぜなら、ここで説明するよりも、探せば無限と思えるくらい出てくる情報だからです。

お礼

ご回答ありがとうございました。