【Dreamweaver】レシポンシブウェブデザインの勉強～PCサイズとスマホサイズでの画像切り分け編～

昨日、Dreamweaverでちょっとわけわからなくなった点がありました。

横幅が1280pxの画像（PC用）と、

横幅が750pxの画像（スマホ用）を張り付けて、

ブラウザ上で見たとき、

画面幅が750px以上の時は、PC用の画像を表示する、

画面幅が750px未満の時は、スマホ用の画像を表示する。

という設定にしたかったのですが、

参考書に書いてあった内容は、各画像に対してタグなどを付けてから設定していたので、

２つの画像の切り替えの時どうしたらいいんだろう？

と、ちょっとテンパってしまいました。

参考書の通りに記述してしまっていたせいで、不必要なところが沢山出てきてしまい、

やりたいことはわかるんですけど、どこを変更したらええねん？

となってしまいました。

自宅でレシポンシブウェブデザインをいじっていたのですが、こんがらがってきてしまいました。

そこで、思い切って最初から作ろう！

と思い、１から作り直してみました。

構成としては

１つフォルダを作ります。中に以下のフォルダとファイルを作って置きます。

　ーimgフォルダ（PC用の画像、スマホ用の画像）

　ーindex.html

　ーstyle.css

そして、

PC用画像を張り付け、pタグ付けて、classに「pc」を設定、

スマホ用画像を張り付けて、pタグ付けて、classに「sp」を設定、

PC用画像を表示中は、スマホ用画像を非表示にするため、グローバルに「.sp」セレクターを作って、display:noneを設定。

@Mediaにて、max-widht:750pxを作成

「.sp」セレクターにて、「display:block」を設定

「.pc」セレクターにて、「display: none」を設定

最後にグローバルに「img」セレクターを作って、「height:auto」と「max-width:100%」を設定すれば、完成！！

うーん。文字だけだとわかりづらい。

これを参考に作ってみて。

となったとしても、無理でしょうね。

やっぱり、画像と一緒にここをこうして設定してくださいね。

と書かないとわかりづらいですね。

まぁ、今後書く時ですかね。

今日は、自分がつまづいたところを、どのように改善したのかを書いておけば、後で見たとき、何か参考になるかもしれない。という程度にしておこうと思います。

（後々、修正するかもしれません。その時は、この文章は削除します。）

というわけで、Dreamweaverについて書いてみました。

ではでは。