[Vuetify3]Vuetifyに存在するcssのclass[display系統, ブレークポイント(Breakpoints)]

2022年11月1日に満を持してリリースされたVuetify 3 (コードネーム：Titan)。
この記事を書いている現在(2022年12月6日)、早くも version 3.0.3 に更新されている様です。

当サイトでは、いつもは Vuetify 3 のUIコンポーネントについて書いている記事が多いですが
今回は趣向を変えて、Vuetify 3 が備えているcssクラスについて書いていきたいと思います。

なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( v16.10以降 )を使用することをお勧めします。

Vuetify には、Bootstrapのように数々の定義済みclassが備わっている

VuetifyのUIコンポーネントは多機能かつ見た目も優れており
ついついそればかりに目が行きがちですが、

タイトルの通り Vuetify には、単体で
Bootstrap のようにも扱えるような、数多くのclassが定義されています。

UIコンポーネントを使ってページを作成しているとき、

「ここはもう少し間隔をあけたいな」
「ここは display: flex をかけて並列に並べたい」

そんな要望に応えてくれます。

Vuetify に定義されているclass: display系統

それではVuetifyに定義されているclassについて書いていきたいと思います。
まずは、要素の表示自体を定義する display 系統のclassから。

Vuetifyに定義されているdisplay系統のclassは、
.d-{display種類} の形で使用する事ができます。
具体的には次のように指定します。

<div class="d-block">block要素になります</div>

<div class="d-inline-block">inline-block要素になります</div>

<div class="d-flex">
  <v-card title="flexboxとなりv-cardが並びます"></v-card>
  <v-card title="flexboxとなりv-cardが並びます"></v-card>
  <v-card title="flexboxとなりv-cardが並びます"></v-card>
</div>

↑上記の例では
d-block, d-inline-block, d-flex
の使用例を記載しました。

Vuetifyで指定できるdisplay系統のclassは、次のとおりです。
d-none
d-inline
d-inline-block
d-block
d-table
d-table-cell
d-table-row
d-flex
d-inline-flex

↑この様に、想定できる display は
すべて定義され済みなので、特段あたらしくcssを書かなくとも
Vuetifyを入れるだけで使用が可能という事です。

Vuetifyに定義されたブレークポイント(Breakpoints)

上のセクションでは、.d-{display種類} の形で使用する事ができる
Vuetifyの display 系統のclassについて書きました。

今度は、
「スマホサイズの時だけ flex 状態を解除したい」
「画面サイズが大きくなったら flex 状態を付与したい」
といった要望に対応する事についての内容です。

まず、Vuetifyには次の形式でブレークポイントが設定されています。

xs( < 600px )...600pxまでのスマートフォンサイズ想定
sm( 600px > , < 960px )...スマートフォンより大きく、960px未満のタブレット想定
md( 960px > , < 1264px )...大きめのタブレット〜1264px未満のノートPC想定
lg( 1264px > , < 1904px )...1264px〜1904px未満までのdesktop想定
xl( > 1904px )…lgを超えるサイズの大サイズモニター想定

※ md や lg、 xl の 1264px と言う数字は、
1280px からブラウザのスクロールバー分の幅(16px)を引いた値。
同様に
1904px と言う数字も一般に「フルHD」と呼ばれている
1920px のモニタサイズの横幅から、ブラウザのスクロールバー分の幅(16px)を引いた値との事です。
ただし、後述しますが実際に定義されている値は min-width: 1280px; の様に実値なので、あまり気にしなくて良いかもしれません。

上記のブレークポイントを、先程のセクションでご紹介した
display系統のclassと組み合わせて使用することで、

「スマホサイズの時だけ flex 状態を解除したい」
「画面サイズが大きくなったら flex 状態を付与したい」
↑こういった要望を実現する事ができます。

具体的には、次のように書きます。

<div class="d-flex d-sm-block">
基本はflex、スマホサイズを超えた場合(min-width: 600px以上)は block という定義になります。
</div>

<div class="d-block d-lg-flex">
基本はblock、1280px(min-width: 1280px以上)を超えた場合に flex という定義になります。
</div>

↑この様に指定する事で、
「スマホサイズの時だけ flex 状態を解除したい」
「画面サイズが大きくなったら flex 状態を付与したい」
といった要望を実現する事ができるというわけです。（上のコードの様に基本はflexで、スマホサイズを超えたらblockを付与、の様にすることも可能）

このほかの組み合わせも Vuetify 公式サイトの次のページで詳しく記載があるので、
一読するとより細かな設定ができる事がわかるかと思います。
Display helpers #visibility — Vuetify

ブレークポイントの表も、同じページの一番上にまとめて記載があります。
Display helpers — Vuetify