【Vuetify】text-align: left, center, rightをクラスで指定する

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

本記事では、Vuefityでテキストの配置位置を指定する方法をご紹介しています。

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

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

本記事でやりたいこと

Vuetifyには、標準で多くのクラスが用意されています。グリッドシステムに始まり背景やカラー、フォントサイズの変更など種類は豊富です。もちろんその中にはテキストの水平方向に対する配置位置を指定するクラスもあり、左寄せ、中央寄せ、右寄せと好きな値を指定することができます。

本記事では、Vuetifyに用意されているクラスを用いてテキストの配置位置を自由自在に指定できるようになることがゴールです。

では、早速やっていきましょう！

テキストの配置位置を指定する方法

Vuetifyには、テキストの配置を指定することができるクラスが用意されています。適用されるスタイルはtext-alignになります。

構文は下記の通りです。

text-{position}
text-{size}-{position}

{position}と{size}には下記の値を指定します。

position	テキストの配置位置を指定 left、center、right
size	ビューポートサイズを指定 sm、md、lg、xl

{position}はtext-alignに指定する値と同様です。{size}にはビューポートを指定します。{size}を指定すると、ビューポートが指定したサイズ以上になった場合にテキストの配置位置が変更されます。

指定方法がわかったところで、コードを書いて実践してみましょう。

テキストの配置位置を変更する

Vuetifyで実際にテキストの配置を指定します。{position}だけのパターンと{position} + {size}で作成してみましょう。

<v-app id="app">
  <p class="text-left">Into the Program</p>
  <p class="text-center">Into the Program</p>
  <p class="text-right">Into the Program</p>

  <p class="text-sm-center">Into the Program(sm)</p>
  <p class="text-md-center">Into the Program(md)</p>
  <p class="text-lg-center">Into the Program(lg)</p>
  <p class="text-xl-center">Into the Program(xl)</p>
</v-app>

実際の表示は下記のようになります。

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

上記の埋め込みではビューポートによる変化が確認できないので、変化を確認されたい方はお手数ですが埋め込み右上の「EDIT ON 」からCodePenのサイトに移動してご確認ください。

本記事でご紹介した内容は下記の公式ドキュメントで解説されていますので、より詳しい情報はリンク先を見ていただければと幸いです！

https://vuetifyjs.com/ja/styles/text-and-typography/#text

最後に

Vuetifyを使い始めて大体1ヵ月くらい経ちました。感覚的にはある程度は使えるようになったかなーという印象です。Vueの導入を検討していて、Bootstrapをかじったことがある人であれば違和感なく導入できると思いますので、ぜひ使ってみてくださいね！

余談ですが、本記事から今まで避けるように生きてきたWordPressのブロックエディターを導入しました。慣れるまで時間かかりそうだけど慣れれば結構使いやすいかも！執筆に集中できるのはもちろんですが、再利用ブロックが神すぎる……過去記事も少しずつ移行していきたいと思います！

以上、Vuetifyでtext-align: left, center, rightをクラスで指定する方法のご紹介でした！