【Vuetify】フォントサイズのクラスの種類と指定方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vuetifyでデフォルトで用意されているフォントサイズのクラスと指定方法をご紹介しています。

Vuetifyのフォントサイズのクラスは何種類あって、どうやって指定すればいいの？

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

用意されているフォントサイズのクラス

Vuetify（ver2.4.5時点）には全部で13種類のフォントサイズのクラスが用意されています。HTMLのclass属性に用意されているフォントサイズのクラス名を指定することでスタイルを適用することができます。

フォントサイズの指定方法はととても簡単で、ブレイクポイントとフォントサイズのクラス名を下記のように指定するだけです。

//ブレイクポイント指定なし
text-{value}

//ブレイクポイント指定あり
text-{breakpoint}-{value}

breakpointにはBootstrap等でおなじみのsm～xlのブレイクポイントを指定します。breakpointを指定すると、ブレイクポイント以上の画面サイズの場合にスタイルが適用されます。デフォルトのブレイクポイントはxsとなっているので、xsは省略可能です。ちなみにxsは全画面サイズで適用される値です。

valueには下記表のクラス名を指定します。各クラスには予めマテリアルデザインの仕様に基づいたスタイルが定義されています。全部で13種類用意されているので、デザインカンプに近いフォントを選ぶことができますね。

クラス名	font-family	font-weight	font-size	letter-spacing
h1	Roboto	300	6rem	-.015625em
h2	Roboto	300	3.75rem	-.0083333333em
h3	Roboto	400	3rem	normal
h4	Roboto	400	2.125rem	.0073529412em
h5	Roboto	400	1.5rem	normal
h6	Roboto	500	1.25rem	.0125em
subtitle-1	Roboto	400	1rem	.009375em
subtitle-2	Roboto	500	0.875rem	.0071428571em
body-1	Roboto	400	1rem	.03125em
body-2	Roboto	400	0.875rem	.0178571429em
button	Roboto	500	0.875rem	.0892857143em
caption	Roboto	400	0.75rem	.0333333333em
overline	Roboto	500	0.75rem	.1666666667em

マテリアルデザインテキストの仕様につきましては下記のサイトで確認することができます。とても見やすくまとめられているので、一度目を通しておくと良いかもしれません。

https://material.io/design/typography/the-type-system.html

では、実際にVuetifyでフォントサイズのクラスを使ってみましょう。

フォントサイズのクラスを使ってみる

ブレイクポイントの挙動も確認したいので、ブレイクポイントなし・ありのパターンでクラスを指定してみます。h1はサイズが大きすぎるので、h4より小さいサイズを指定してみます。

<v-app id="app">
  <!-- ブレイクポイント指定なし -->
  <p class="text-h4">Into the Program</p>
  <p class="text-h6">Into the Program</p>
  <p class="text-subtitle-1">Into the Program</p>
  <p class="text-body-2">Into the Program</p>
  <p class="text-caption">Into the Program</p>

  <!-- ブレイクポイント指定あり -->
  <p class="text-sm-h4">Into the Program(sm)</p>
  <p class="text-md-h6">Into the Program(md)</p>
  <p class="text-lg-subtitle-1">Into the Program(lg)</p>
  <p class="text-xl-body-2">Into the Program(xl)</p>
</v-app>

表示は下記のようになります。指定したクラス名のフォントサイズが反映されているかと思います。

See the Pen 6721 by ryohei (@intotheprogram) on CodePen.

ブレイクポイントの挙動を確認したい場合は、上記デモの右上にある「EDIT ON CODEPEN」からCodePenに移動し、ブラウザのウィンドウサイズを変更してみてくださいね！