【Vuetify】フォントカラー(color)とdarken・lightenを指定する方法

こんにちは、ryohei(@ityryohei)です!

本記事では、Vuetifyでフォントカラーとdarkenとlightenで色の明暗を指定する方法をご紹介しています。

Vuetifyでフォントカラーの変更を変更したいけど、どうすればいいんだろう?

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

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

Vuetifyで使用できる色

Vuetifyはマテリアルデザインの仕様に沿ったUIフレームワークです。そのためマテリアルカラーを使用することができます。実際の色は下記のリンク先で確認できます。

フォントカラーを変更は予め用意されているclassを指定するだけです。色の明暗も変更できますので、併せてご紹介できればと思います!

フォントカラーを変更する

フォントカラーの変更は、色を変更したい要素のclass属性に下記を指定することで実現できます。

text--{color}

{color}の部分には前項でご紹介したリンク先のマテリアルカラー名(redやblue等)を指定します。そうすることで簡単にフォントカラーを変更することができます。

下記は実際にフォントカラーを変更する例です。フォントカラーをマテリアルカラーの赤に変更しています。

<p class="red--text">Into the Program</p> 

少ない記述でやりたいことができるのはフレームワークの長所ですね。強調表示する場合はビビッドな色を使うことが多いため、新しくスタイルを定義する必要がないので助かります。

これでフォントカラーを変更することができました。続いて色の明暗を指定する方法をご紹介します。

フォントカラーの明暗を指定する

冒頭でご紹介したリンク先に記載されているマテリアルカラー一覧には、各色に対して明暗が5段階ずつ設けられています。明るい色はlighten、暗い色はdarkenと表示されています。Vuetifyではこれらの色も使用することができ、フォントカラーと同様に予めclassが用意されています。

明暗の指定方法はとても簡単で、下記のように明るさ暗さと値を指定するだけです。

text--{lighten|darken}-{value}

実際に要素に指定する場合はフォントカラーも一緒に指定します。それぞれの使用例は下記の通り。

Lighten Color

<p class="red--text text--lighten-1">Into the Program</p> 

Darken Color

<p class="red--text text--darken-1">Into the Program</p> 

これでフォントカラーと明暗を指定することができます。めちゃ楽ですね!

最後に

最近案件でVuetifyを使用させてもらっていますが…まじで良きです!グリッドシステムもわかりやすいし、余白関連も直感的に指定することができます。何より複数人で扱っても品質に大きな差がでないのが魅力ですよね。しばらくはお世話になりそうな予感!Vuetify系の記事も増やしていければと思います!

以上、Vuetifyでフォントカラーとdarken・lightenを指定する方法のご紹介でした!

おすすめの書籍

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