Bulma viewportの幅に応じた表示と非表示 Responsive helpers [CSSフレームワーク]

Bulmaには、viewport（ビューポート）の幅に応じてコンテンツを表示するか、非表示にするかを切り替えるクラスが用意されています。

今回は、viewportの幅によってコンテンツ（要素）の可視性（Visibility）を操作できるレスポンシブヘルパーのクラスを紹介します。

レスポンシブヘルパーで利用できるクラス（スタイル）

レスポンシブヘルパークラスでは、以下の表示クラスのいずれかを使用することができます。

クラス	適用されるスタイル
is-block	display: block;
is-flex	display: flex;
is-inline	display: inline;
is-inline-block	display: inline-block;
is-inline-flex	display: inline-flex;

Bulmaでは、viewportの幅のブレークポイントとして以下の5つが用意されています。

ブレークポイント	サイズ
モバイル（Mobile）	～ 768px
タブレット（Tablet）	769px ～ 1023px
デスクトップ（Desktop）	1024px ～ 1215px
ワイドスクリーン（Widescreen）	1216px ～ 1407px
フルHD（FullHD）	1408px ～

viewportの幅によってコンテンツの表示・非表示を制御する幅の指定には、特定のviewportの幅のブレークポイントを満たす場合のみ適用されるものと、いくつかのviewportの幅のブレークポイントを満たす場合に適用されるものがあります。

特定のブレークポイントを満たす場合のみ適用されるもの

• mobile
• tablet-only
• desktop-only
• widescreen-only
• fullhd

mobileは、768px以下（モバイル）の場合に適用されます。
tablet-onlyは、769px ～ 1023px（タブレット）の場合に適用されます。
desktop-onlyは、1024px ～ 1215px（デスクトップ）の場合に適用されます。
widescreen-onlyは、1216px ～ 1407px（ワイドスクリーン）の場合に適用されます。
fullhdは、1408px以上（フルHD）の場合に適用されます。

いくつかのブレークポイントを満たす場合に適用されるもの

• touch
• tablet
• desktop
• widescreen

touchは、1023px以下（モバイルとタブレット）の場合に適用されます。
tabletは、769px ～ 1215px（タブレットとデスクトップ）の場合に適用されます。
desktopは、1024px ～ 1407px（デスクトップとワイドスクリーン）の場合に適用されます。
widescreenは、1216px以上（ワイドスクリーンとフルHD）の場合に適用されます。

viewportの幅の指定と、viewportの幅のブレークポイントによるコンテンツの表示、または非表示の適用有無を表にすると以下のようになります。

幅の指定	モバイル	タブレット	デスクトップ	ワイドスクリーン	フルHD
	～ 768px	769px ～ 1023px	1024px ～ 1215px	1216px ～ 1407px	1408px ～
mobile	適用あり	変更なし	変更なし	変更なし	変更なし
tablet-only	変更なし	適用あり	変更なし	変更なし	変更なし
desktop-only	変更なし	変更なし	適用あり	変更なし	変更なし
widescreen-only	変更なし	変更なし	変更なし	適用あり	変更なし
touch	適用あり	適用あり	変更なし	変更なし	変更なし
tablet	変更なし	適用あり	適用あり	適用あり	適用あり
desktop	変更なし	変更なし	適用あり	適用あり	適用あり
widescreen	変更なし	変更なし	変更なし	適用あり	適用あり
fullhd	変更なし	変更なし	変更なし	変更なし	適用あり

コンテンツの表示（Show）

特定のviewportの幅を満たす際にコンテンツ（要素）の表示形式（displayスタイル）を適用するかを制御するクラスは、表示形式を表すクラス
is-block
is-flex
is-inline
is-inline-block
is-inline-flex
の後にハイフン（-）で幅の指定
mobile
tablet-only
desktop-only
widescreen-only
touch
tablet
desktop
widescreen
fullhd
を追加します。

例えば、特定のviewportの幅を満たす際にis-blockを適用させる場合は、適用させたいviewportの幅に従って次のいずれかのクラスを指定します。

• is-block-mobile
• is-block-tablet-only
• is-block-desktop-only
• is-block-widescreen-only
• is-block-touch
• is-block-tablet
• is-block-desktop
• is-block-widescreen
• is-block-fullhd

表示形式を表すクラスが5種類、幅の指定が9種類ありますので、全部で45種類のクラスが用意されています。

• is-block-mobile
• is-block-tablet-only
• is-block-desktop-only
• is-block-widescreen-only
• is-block-touch
• is-block-tablet
• is-block-desktop
• is-block-widescreen
• is-block-fullhd
• is-flex-mobile
• is-flex-tablet-only
• is-flex-desktop-only
• is-flex-widescreen-only
• is-flex-touch
• is-flex-tablet
• is-flex-desktop
• is-flex-widescreen
• is-flex-fullhd
• is-inline-mobile
• is-inline-tablet-only
• is-inline-desktop-only
• is-inline-widescreen-only
• is-inline-touch
• is-inline-tablet
• is-inline-desktop
• is-inline-widescreen
• is-inline-fullhd
• is-inline-block-mobile
• is-inline-flex-tablet-only
• is-inline-flex-desktop-only
• is-inline-flex-widescreen-only
• is-inline-flex-touch
• is-inline-flex-tablet
• is-inline-flex-desktop
• is-inline-flex-widescreen
• is-inline-flex-fullhd
• is-inline-flex-mobile
• is-inline-flex-tablet-only
• is-inline-flex-desktop-only
• is-inline-flex-widescreen-only
• is-inline-flex-touch
• is-inline-flex-tablet
• is-inline-flex-desktop
• is-inline-flex-widescreen
• is-inline-flex-fullhd

コンテンツの非表示（Hide）

コンテンツの表示方法の変更と同様に、特定のviewportの幅を満たす際にコンテンツ（要素）を非表示にするクラスも用意されています。

viewportの幅に従ってコンテンツ非表示にするクラスは
is-hidden
の後にハイフン（-）で幅の指定
mobile
tablet-only
desktop-only
widescreen-only
touch
tablet
desktop
widescreen
fullhd
を追加します。

viewportの幅のブレークポイントによるコンテンツの非表示の適用有無を表にすると以下のようになります。

クラス	モバイル	タブレット	デスクトップ	ワイドスクリーン	フルHD
	～ 768px	769px ～ 1023px	1024px ～ 1215px	1216px ～ 1407px	1408px ～
is-hidden-mobile	適用あり	変更なし	変更なし	変更なし	変更なし
is-hidden-tablet-only	変更なし	適用あり	変更なし	変更なし	変更なし
is-hidden-desktop-only	変更なし	変更なし	適用あり	変更なし	変更なし
is-hidden-widescreen-only	変更なし	変更なし	変更なし	適用あり	変更なし
is-hidden-touch	適用あり	適用あり	変更なし	変更なし	変更なし
is-hidden-tablet	変更なし	適用あり	適用あり	適用あり	適用あり
is-hidden-desktop	変更なし	変更なし	適用あり	適用あり	適用あり
is-hidden-widescreen	変更なし	変更なし	変更なし	適用あり	適用あり
is-hidden-fullhd	変更なし	変更なし	変更なし	変更なし	適用あり

その他のコンテンツ（要素）の表示と非表示を制御するクラス

その他のコンテンツ（要素）の表示と非表示を制御するクラスには、以下の3つがあります。

• is-invisible
• is-hidden
• is-sr-only

is-invisibleは、非表示の可視性（visibility = hidden）を追加します。
is-hiddenは、要素を非表示にします。
is-sr-onlyは、要素を視覚的に非表示にしますが、スクリーンリーダーでアナウンスできるように要素を使用できるようにします。

上記のクラスを指定した場合に適用されるスタイルは以下の通りです。

クラス	適用されるスタイル
is-invisible	visibility: hidden;
is-hidden	display: none;
is-sr-only	border: none; clip: rect(0, 0, 0, 0); height: 0.01em; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 0.01em;

Bulma 入門 Tips 一覧