スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

画面サイズに応じて要素を表示・非表示にする書式:Bootstrap3コードまとめ



画面サイズに応じて要素を表示・非表示にする書式:Bootstrap3コードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回は、画面サイズに応じて要素を表示・非表示にする書式です。

特定の要素をPCからの閲覧時は表示しておいて、スマホでは非表示にしたり、その逆のパターンなどいろいろと応用できます。

例として、PCからの閲覧時にはスライドショーを表示させ、スマホでは非表示にする、などです。

~ 目次 ~

  1. 特定の要素を画面サイズに応じて表示する
  2. 特定の要素を画面サイズに応じて非表示にする

特定の要素を画面サイズに応じて表示する

要素を表示するクラス

画面幅 ~ 767px 768 ~ 991px 992 ~ 1199px 1200px ~
visible-xs 表示 非表示 非表示 非表示
visible-sm 非表示 表示 非表示 非表示
visible-md 非表示 非表示 表示 非表示
visible-lg 非表示 非表示 非表示 表示
  • クラス「visible-xs」を適用すると画面幅767px以下で表示
  • クラス「visible-sm」を適用すると画面幅768~991pxで表示
  • クラス「visible-md」を適用すると画面幅992~1199pxで表示
  • クラス「visible-lg」を適用すると画面幅1200px以上で表示

特定の要素を画面サイズに応じて非表示にする

要素を非表示にするクラス

画面幅 ~ 767px 768 ~ 991px 992 ~ 1199px 1200px ~
hidden-xs 非表示 表示 表示 表示
hidden-sm 表示 非表示 表示 表示
hidden-md 表示 表示 非表示 表示
hidden-lg 表示 表示 表示 非表示
  • クラス「hidden-xs」を適用すると画面幅767px以下で非表示
  • クラス「hidden-sm」を適用すると画面幅768~991pxで非表示
  • クラス「hidden-md」を適用すると画面幅992~1199pxで非表示
  • クラス「hidden-lg」を適用すると画面幅1200px以上で非表示