クルーデザインホームカラトルクルーデザインWebの勉強をしよう!Web制作の技術やサービス情報を発信します。2017年11月22日レスポンシブサイトでPC用画像とスマホ用画像を切り替えたい場合が多々あります。Bootstrap4ではクラスを指定するだけで実現可能です。便利ですね!例えば画面サイズが「md〜xl」の時はPC用の画像を表示したい場合は「d-none」と「d-md-block」の2つのクラスを指定するだけでOKです。/></div>「xs〜sm」の時にスマホ用の画像を表示したい場合は「d-md-none」を指定します。/></div>サンプルも作りましたので良ければ見てくださいね。画面サイズによってPC用の画像とスマホ用の画像が切り替わるはずです。Bootstrap4からはクラスの指定方法が変わった様でなかなか覚えにくくなっています。分かりやすく一覧表示にしました。「class名」のクラスを指定すると「x」が付いている画面サイズの時に表示されます。ついでに画面サイズの一覧も載せておきますね。画像を全画面に表示(レスポンシブでwidth100%)メインビジュアルを画面幅すべてを使って表示させたい時があります。Bootstrap4では、以下のように簡単に実現可能です。テーブル関連のクラス色々(table)Bootstrap4はテーブル関連のクラスも充実しています。クラスをいくつか追加するだけで、見栄えの良いテーブルを作成することができます。インライン要素の左寄せ・右寄せ・中央寄せ(センタリング)Bootstrap4では、インライン要素の左寄せ・右寄せ・中央寄せができるクラスがあらかじめ用意されています。CSSをその都度書く必要はありません。上部固定メニューヘッダを作るサンプル(fixed-top)スマホ用のサイトを作成するときに固定メニューはよく使いますよね。Bootstrap4でもクラスを追加するだけで固定メニューを作ることができます。サンプルも作ってますので参考になると嬉しいです。画像用クラスまとめBootstrap4の画像で使用できる基本的なクラスをまとめました。各クラスはimgタグに付加するだけで効果が発揮されます。基本的なクラスは以下の4種類です。コメントをキャンセルメールアドレスが公開されることはありません。上部固定メニューヘッダを作るサンプル(fixed-top)クルーデザインWebの勉強をしよう!Web制作の技術やサービス情報を発信します。