みなさま、こんにちは。どんぶラッコです。
先日、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の方の記事も更新していくので、ある程度ネタがまとまったらまたこちらにも投稿しようと思います♪
[…] […]