◆当ページにはプロモーションが含まれています

JavaScript

Vuetifyで役に立つプリセットCSSクラス達!【テキスト編】

みなさま、こんにちは。どんぶラッコです。

先日、Qiitaに“Vuetifyでよく参照する項目”という投稿をしました。

まだまだ情報を追加して、チートシートになればいいな、と思っています。

VuetifyはVueと同様に仮想DOMを使うことができます。

しかし、その一方で他のCSSフレームワークと同様に、お役立ちCSSクラスが沢山用意されています。

今回は、そんなお役立ちCSSクラス名についてまとめてみようと思います!

文字の色を変えたいなら .***–text を使え!

まずは、文字の色を変えたい場合ですね。

VuetifyはMaterialDesignに基づいたカラーパターンを所有しています。

例えばインディゴカラーを文字に指定したい場合、

<span class="indigo--text"> 変わるよ </span>

でOKです。簡単ですね!

もし、indigoの中でもlighten-3の色にしたいとなった場合は、.text–[明るさ]-[数字] のクラスを追加すればOK!

<span class="indigo--text text--lighten-3"> 変わるよ </span>

簡単ですね!

“text–” の位置が逆なのが混乱するところではありますが、、

文字の太さを変えたい? ならば .font-weight-*** だ!

これは直感的に分かりやすいですね。

細くしたければ .font-weight-thin を、太くしたければ .font-weight-bold を使えばいいのです。

文字の大きさは display, title を覚えておく!

また、文字の大きさもclassによって制御できます。

たくさんありますが、ポイントは

  • 大きくしたかったら .display-*** を使う! 数字が大きいほど大きくなる!
  • タイトルにしたい文章には .titleを使う!

の2つの法則を覚えておけば当面は困りません。


いかがだったでしょうか?

この他にも、お役立ち系CSSはたくさん存在します。

Qiitaの方の記事も更新していくので、ある程度ネタがまとまったらまたこちらにも投稿しようと思います♪

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です