【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をクラスで指定する方法のご紹介でした!

おすすめの書籍

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マスター講座はこちら