こんにちは、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-familyfont-weightfont-sizeletter-spacing
h1Roboto3006rem-.015625em
h2Roboto3003.75rem-.0083333333em
h3Roboto4003remnormal
h4Roboto4002.125rem.0073529412em
h5Roboto4001.5remnormal
h6Roboto5001.25rem.0125em
subtitle-1Roboto4001rem.009375em
subtitle-2Roboto5000.875rem.0071428571em
body-1Roboto4001rem.03125em
body-2Roboto4000.875rem.0178571429em
buttonRoboto5000.875rem.0892857143em
captionRoboto4000.75rem.0333333333em
overlineRoboto5000.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 Vuetify Example Pen by ryohei (@intotheprogram) on CodePen.31883

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

最後に

そういえば!私が携わっていたVuetifyを使用したウェブアプリ開発の案件は無事に構築が完了し、納品となりました。関係者の皆さん、誰も見ていないと思いますがお疲れ様でした!

それ以降はVuetifyを触っていなかったのですが、最近個人的にウェブアプリを開発していて、そちらでVuetifyを採用しようかなと考えています。Vuetifyはもちろんですが、Vueにも詳しくなりたいので、一石二鳥!しばらくはコードとにらめっこする日々が続きそうです……頑張ろう!

以上、Vuetifyのフォントサイズのクラスの種類と指定方法のご紹介でした!