レスポンシブでウェブサイトを作ったときから気になっていた、パソコンとスマホでバナーの画像を切り替えたいと思っていましたが、とっても簡単に切り替えできる方法があったのでメモしておきます。
PCとスマホで違う画像を表示したい！
パソコンとスマホではどうしても画面幅が違うため、どちらかに寄せたバナーの作り方になっているケースが多いと思います。
特にメインのバナーを置いているスライド部分を変えたかったので、バナーのスライドに使わせてもらっているbxsliderで画像を切り替えてみました。
基本的な画像の切り替え方
色々とパソコンとスマホで画像を切り替える方法はあるみたいですが、手軽にできるhtmlとcssで完結する方法を書いておきます。
html
<div class="pc"><img src="PC画像" /></div> <div class="sp"><img src="SP画像" /></div>
通常のimgタグに、パソコン用とスマホ用2種類のタグを用意。
パソコンで表示したい画像のclassはpc、スマートフォン用に表示したい画像のclassはspを付けてあげます。
css
/* パソコン表示用 */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマホ表示用 */
@media only screen and (max-width: 768px) {
.pc { display: none !important; }
.sp { display: block !important; }
}
このように書いてあげることでパソコンとスマホの表示画像を変えることができちゃうんです！
パソコン（通常時）はclassがpcの画像を表示して、スマホ用のspは非表示にしています。
実物見た方が分かりやすいので、実際のケースに合わせて設定してみました。
bxsliderの画像をパソコンとスマホで切り替える
パソコンでは横長、スマホではインパクトが大きくなる縦長に切り替えてみます。
See the Pen
bxslider by Sei (@sei)
on CodePen.
表示している領域が狭いためスマホ用画像（縦長）が表示されているかと思います。
これでパソコンとスマートフォンで画像を切り替えることができます。
コメント