【Vuetify】画面サイズで要素の表示・非表示を切り替える

こんにちは、ryohei(@ityryohei)です!

本記事では、Vuetifyで画面サイズによって要素の表示・非表示を切り替える方法をご紹介しています。

Vuetifyで要素の表示と非表示を切り替えたいんだけど、良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

Vuetifyのbreakpoint

Vuetifyはマテリアルデザインにおけるブレイクポイントが用意されています。それぞれのブレイクポイントでは予めコードが設定されています。それらを利用することで簡単にコンテンツの表示・非表示を制御することが可能となっています。

Vuetifyにおけるブレイクポイントは下記の通りです。xsxlのコードとそれぞれの画面サイズを記載しています。

xs(Extra small) スマホ ~ 600px
sm(Small) 小~中型タブレット 600px ~ 960px
md(Medium) 大型タブレット~ノートパソコン 960px ~ 1264px*
lg(Large) デスクトップパソコン 1264px ~ 1904px
xl(Extra large) 4k、ウルトラワイド ~ 1904px

上記のコードとdisplayプロパティを組み合わせることで、画面サイズによってコンテンツを制御することができます。主要デバイスはしっかり対応しているので助かりますね。

では続いて使い方を見ていきましょう!

displayのプロパティで指定する

displayのプロパティを使用する方法では、下記のような形式でクラスが用意されています。

.d-{value}
.d-{breakpoint}-{value}

breakpointvalueに指定することができる値は下記の通りです。上記でご紹介したbreakpointのコードとdisplayのプロパティになります。

{breakpoint} ・xs
・sm
・md
・lg
・xl
{value} ・none
・inline
・inline-block
・block
・table
・table-cell
・table-row
・flex
・inline-flex

実際にコンポーネント側で記述する場合は.(ドット)は必要ありません。要素のclass属性に下記のような形でセレクタをに指定するだけです。

<div id="app">
<v-app>
<div class="d-none d-md-block">
<!-- mdで表示、それ以外では非表示 -->
</div>
</v-app>
</div>

上記例ではdisplaynoneblockを指定していますが、flextableでも問題ありませんし、下記の表のように各ブレイクポイントにおける画面サイズで要素の表示・非表示を切り替えることも可能です。

各ブレイクポイントの画面サイズでのみ表示する

all すべてのブレイクポイントで表示する
.d-block
xs(Extra small) xsのみ表示する
.d-block .d-sm-none
sm(Small) smのみ表示する
.d-none .d-sm-block .d-md-none
md(Medium) mdのみ表示する
.d-none .d-md-block .d-lg-none
lg(Large) lgのみ表示する
.d-none .d-lg-block .d-xl-none
xl(Extra large) xlのみ表示する
.d-none .d-xl-block

各ブレイクポイントの画面サイズでのみ非表示する

all 常に非表示
.d-none
xs(Extra small) xsのみ非表示
.d-none .d-sm-block
sm(Small) smのみ非表示
.d-sm-none .d-md-block
md(Medium) mdのみ非表示
.d-md-none .d-lg-block
lg(Large) lgのみ非表示
.d-lg-none .d-xl-block
xl(Extra large) xlのみ非表示
.d-xl-none

実際に要素に指定する場合は.(ドット)は必要ありませんので、その点だけご注意ください!

コンディションによって非表示にする

Vuetifyにはもう一点コンディションよって要素を非表示にする方法があります。ブレイクポイントで表示するのではなく、ブレイクポイントで非表示にしたい場合に有効な方法です。

指定方法は上記でご紹介した方法とほとんど同じです。.hiddenから始まるのでわかりやすいかなと思います。

.hidden-{breakpoint}-{condition}

conditionには下記の値を指定することができます。

.hidden-{breakpoint}-only
.hidden-{breakpoint}-and-down
.hidden-{breakpoint}-and-up

意味合いは下記の表の通りです。

.hidden-{breakpoint}-only 指定したブレイクポイントの画面サイズでのみ非表示にする
.hidden-{breakpoint}-and-down 指定したブレイクポイントの画面サイズ以下であれば非表示にする
.hidden-{breakpoint}-and-up 指定したブレイクポイントの画面サイズ以上であれば非表示にする

使用方法も同様で要素のclass属性に指定するだけです!

<div id="app">
<v-app>
<div class="hidden-md-only">
<!-- mdで非表示、それ以外では表示 -->
</div>
<div class="hidden-md-and-down">
<!-- md以下であれば非表示、それ以外では表示 -->
</div>
<div class="hidden-md-and-up">
<!-- md以上であれば非表示、それ以外では表示 -->
</div>
</v-app>
</div>

以上がコンディションによる指定方法になります。

最後に

久しぶりにブートストラップライクなフレームワークを触りましたが、予め用意されているクラスを指定するだけで済むのは素晴らしいですね!シンプルなデザインであればCSSを書くことなくコードに落とし込めるのではないでしょうか。案件でVueを採用するのであれば積極的に使っていきたいなと思います!

以上、Vuetifyの画面サイズで要素の表示・非表示を切り替える方法のご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら