Webデザイン初心者でも簡単に使える！Bootstrap4基本の使い方【表示・非表示編】

おはようございます！社員Aです👩

連載しております「Bootstrapシリーズ」ですが、第5回目になりました！

Bootstrap4基本の使い方シリーズ

複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していきますので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。

第5回目の今回は「表示・非表示編」！メディアクエリを介してデバイスごとにコンテンツを表示および非表示にする方法に関して解説していきたいと思います。Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターしてみませんか？

Bootstrap4の表示・非表示

Bootstrap4では、クラスを付与することで、デバイス（画面サイズ）ごとに切り替えることができます。

基本のルールについて

• .hidden-*-upビューポートが指定したブレークポイントまたは広いの時にクラスが要素を非表示にします。たとえば、.hidden-md-up中、大、特大のビューポートで要素を非表示にします。
• .hidden-*-downビューポートが指定したブレークポイント以下であるときのクラスは、要素を非表示にします。たとえば、.hidden-md-down超小型、小型、中型のビューポートで要素を非表示にします。

画面サイズについて

1. 超小型デバイス（<544px）
2. スモールデバイス（544px以上 – 768px以下）
3. 中型デバイス・タブレット（≧768ピクセル – <992ピクセル）
4. 大型デバイス（≥992px – <1200px）
5. 特大サイズ・PC（1200px以上）

画面サイズごとの表示・非表示のクラス付与について

画面サイズごとに表示・非表示を切り替えるには、要素に下記のクラスを付与することで適用されます。

印刷用のコンテンツの表示・非表示

通常のレスポンシブクラスと同様に、印刷用のコンテンツの表示・非表示もクラス付与することで切り替えられます。

まとめ

今回は表示・非表示編ということで、様々な画面サイズでの表示・非表示の設定方法をご紹介しました。

クラス付与だけで、特定の画面サイズのコンテンツを表示・非表示に切り替えられるのが魅力ですね。

これは制作の際、結構よく使うので覚えておくと便利です！