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

Bootstrap

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

2019年02月02日 8:00 2019年09月06日

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以上)

 

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

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

超小型デバイス(<544px) スモールデバイス(544px以上 – 768px以下) 中型デバイス(≧768ピクセル – <992ピクセル) 大型デバイス(≥992px – <1200px) 特大サイズ・デスクトップPC(1200px以上)
.hidden-xs-down 見える 見える 見える 見える
.hidden-sm-down 見える 見える 見える
.hidden-md-down 見える 見える
.hidden-lg-down 見える
.hidden-xl-down
.hidden-xs-up
.hidden-sm-up 見える
.hidden-md-up 見える 見える
.hidden-lg-up 見える 見える 見える
.hidden-xl-up 見える 見える 見える 見える

 



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

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

クラス ブラウザ 印刷する
.visible-print-block 見える
.visible-print-inline 見える
.visible-print-inline-block 見える
.hidden-print 見える

 

まとめ

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

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

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

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!