クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

Bootstrap4

Bootstrap4 PCとスマホで画像を切り替える方法

投稿日:2017年11月18日 更新日:

レスポンシブサイトでPC用画像とスマホ用画像を切り替えたい場合が多々あります。
Bootstrap4ではクラスを指定するだけで実現可能です。
便利ですね!

例えば画面サイズが「md〜xl」の時はPC用の画像を表示したい場合は「d-none」と「d-md-block」の2つのクラスを指定するだけでOKです。

「xs〜sm」の時にスマホ用の画像を表示したい場合は「d-md-none」を指定します。

 

サンプルも作りましたので良ければ見てくださいね。
画面サイズによってPC用の画像とスマホ用の画像が切り替わるはずです。

Bootstrap4からはクラスの指定方法が変わった様でなかなか覚えにくくなっています。
分かりやすく一覧表示にしました。
「class名」のクラスを指定すると「x」が付いている画面サイズの時に表示されます。
ついでに画面サイズの一覧も載せておきますね。

 

名称 領域サイズ
xs 0px〜575px
sm 576px〜767px
md 768px〜991px
lg 992px〜1199px
xl 1200px〜

 

class名 xs sm md lg xl
d-none d-sm-block x x x x
d-none d-md-block x x x
d-none d-lg-block x x
d-none d-xl-block x
d-sm-none x
d-md-none x x
d-lg-none x x x
d-xl-none x x x x
d-block d-sm-none d-md-block x x x x
d-block d-md-none d-lg-block x x x x
d-block d-lg-none d-xl-block x x x x
d-block d-xl-none x x x x
d-block d-sm-none x
d-none d-sm-block d-md-none x
d-none d-md-block d-lg-none x
d-none d-lg-block d-xl-none x
d-none d-xl-block x

-Bootstrap4

執筆者:

関連記事

Bootstrap4 画像用クラスまとめ

Bootstrap4の画像で使用できる基本的なクラスをまとめました。 各クラスはimgタグに付加するだけで効果が発揮されます。 基本的なクラスは以下の4種類です。 Bootstrap4 画像用クラス …

Bootstrap4 ブロック要素の左寄せ・右寄せ・中央寄せ(センタリング)

Bootstrap4では、ブロック要素の左寄せ・右寄せ・中央寄せができるクラスが用意されています。 そのクラスを追加することで、ブロック要素を寄せることができます。 サンプルも作りました。 ブロック要 …

Bootstrap4 上部固定メニューヘッダを作るサンプル(fixed-top)

スマホ用のサイトを作成するときに固定メニューはよく使いますよね。 Bootstrap4でもクラスを追加するだけで固定メニューを作ることができます。 サンプルも作ってますので参考になると嬉しいです。 H …

Bootstrap4 YouTubeをレスポンシブで貼り付ける(普通の動画でもOK)

Bootstrap4を使えば、レスポンシブなYouTubeリンクを貼り付けることができます。 レスポンシブというのがミソです。 普通にYouTubeリンクを貼ると、固定サイズになってしまいますからね。 …

Bootstrap4 PCでは2カラムで、スマホ画面では1カラム(サンプル)

Bootstrap4で画面サイズによってレイアウトのカラム数を変えたい場合のサンプルを作成しました。 画面サイズに対応したクラスを追加してあげるだけで、簡単に実現可能です。 サンプルを作成しましたので …


  1. […] 参考サイト Bootstrap4 PCとスマホで画像を切り替える方法 […]

comment

メールアドレスが公開されることはありません。