レスポンシブでPCとスマホで画像をCSSで切り替える方法!!

レスポンシブサイトには必須の画像切り替えcssのご紹介です。
パソコンかスマートフォンでアクセスした際に表示する画像を切り替えるcssです。
パソコンにはclass=”pc”、スマホにはclass=”sp”を入れてください。

<img class="pc" src="../img/sample_pc.jpg" alt="PC用の画像">
<img class="sp" src="../img/sample_sp.jpg" alt="スマホ用の画像">
/* パソコンで見たときは"pc"が表示 */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマホで見たときは"sp"が表示 */
@media only screen and (max-width: 480px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

横幅サイズmax-width:480pxになってますのでご自由に変更してください。