RSSホーム>Dreamweaver【Dreamweaver】レシポンシブウェブデザインの勉強~PCサイズとスマホサイズでの画像切り分け編~DreamweaverDreamweaver,ブラウザサイズ,レシポンシブウェブデザイン,勉強Dreamweaver,ブラウザサイズ,レシポンシブウェブデザイン,勉強TwitterFacebookLINELINE昨日、Dreamweaverでちょっとわけわからなくなった点がありました。画面幅が750px未満の時は、スマホ用の画像を表示する。参考書に書いてあった内容は、各画像に対してタグなどを付けてから設定していたので、2つの画像の切り替えの時どうしたらいいんだろう?と、ちょっとテンパってしまいました。参考書の通りに記述してしまっていたせいで、不必要なところが沢山出てきてしまい、やりたいことはわかるんですけど、どこを変更したらええねん?となってしまいました。自宅でレシポンシブウェブデザインをいじっていたのですが、こんがらがってきてしまいました。そこで、思い切って最初から作ろう!と思い、1から作り直してみました。構成としては1つフォルダを作ります。中に以下のフォルダとファイルを作って置きます。ーimgフォルダ(PC用の画像、スマホ用の画像)ーindex.htmlーstyle.cssそして、PC用画像を張り付け、pタグ付けて、classに「pc」を設定、スマホ用画像を張り付けて、pタグ付けて、classに「sp」を設定、PC用画像を表示中は、スマホ用画像を非表示にするため、グローバルに「.sp」セレクターを作って、display:noneを設定。最後にグローバルに「img」セレクターを作って、「height:auto」と「max-width:100%」を設定すれば、完成!!うーん。文字だけだとわかりづらい。これを参考に作ってみて。なったとしても、無理でしょうね。画像と一緒にここをこうして設定してくださいね。書かないとわかりづらいですね。今日は、自分がつまづいたところを、どのように改善したのかを書いておけば、後で見たとき、何か参考になるかもしれない。いう程度にしておこうと思います。(後々、修正するかもしれません。その時は、この文章は削除します。)というわけで、Dreamweaverについて書いてみました。Next【ボードゲーム】即身仏になろう!Prev関連記事ブログはじめましたみなさんこんにちは、こんばんは。...肉の日(毎月29日)毎月29日は肉の日という認識です。...映画の日(12月1日)12月1日は映画の日ですね。...バーガーキング晩御飯はバーガーキングでテイクアウトしてきました。コメントをキャンセルメールアドレスが公開されることはありません。同僚と遊んで来た最近のコメント表示できるコメントはありません。