画面幅によって表示する画像を変える方法~レスポンシブデザインでの画像表示~レスポンシブデザインのWEBサイトを作成時、「PCではこちらの画像、スマホではあちらの画像」と、表示を切り替えたい時ってありませんか?ありますよね。そんな時の解決策はいくらかあるのですが、私が一番スマートだと思う方法をご紹介します。JavaScript等は使用せずにhtmlのみで切り替える方法です。cssすらも必須ではありません。こちらがその方法です。src="https://www.kopjapan.com/wp-content/uploads/2016/05/beautiful-woman.jpg"></picture>上記の例ですと、画面幅(ブラウザ幅)が「767px以下」では「beautiful-woman-sp.jpg」を表示し、「768px以上」であれば「beautiful-woman.jpg」を表示します。こちらの「source」というタグがおそらく大変スマートで、「media=”????”」に指定した画面幅によって自動で表示画像を切り替えてくれます。本記事タイトル下の女性の写真は実際に上のコードを利用して表示しています。PCで見ている方はブラウザ幅を縮めてみてください。画面幅「767px以下」で画像が切り替わります。注意点として、「head」タグ内に以下の記述をお忘れなく。レスポンシブデザインでは必須のメタタグです。content="width=device-width">あとたまに「レスポンシブルデザイン」と言っている方もいらっしゃいますが正しくは「レスポンシブデザイン」です。「シブル」って言いたくなる気持ちはわかりますが正しくは「レスポンシブデザイン」です。