Vuetifyではルールに従ったクラス名を設定するとCSSを書かなくてもスタイルが適用されることを知りました。
そんな便利なCSSのクラスを書き溜めていきます。
文字
スタイル
クラス名の書き方
例
参考リンク
文字色
{色名}--text
red--text
カラーネーム一覧
濃さ
text--{lighten｜darken}-{n}
text--lighten-1
マテリアルカラーパレット — Vuetify
Display
設定したいこと
クラス名の書き方
例
参考リンク
画面用
d-{breakpoint(省略可)}-{value}
d-lg-none
Display helpers — Vuetify
印刷用
d-print-{value}
d-print-table-row
Flexbox
設定したいこと
クラス名の書き方
例
参考リンク
コンテナの幅
d-{breakpoint(省略可)}-{flex｜inline-flex}
d-sm-flex
FlexBoxの使い方（４）〜display:inline-flexについて（動画あり）｜IT工房｜AI入門とWeb開発
方向(flex-direction)
flex-{breakpoint(省略可)}-{row｜column}-{reverse(省略可)}
flex-column-reverse
CSS Flex helpers — Vuetify
横方向の寄せ(justify-content)
justify-{breakpoint(省略可)}-{start｜end｜center｜space-between｜space-around}
justify-sm-start
【CSS】Flexboxの各プロパティの挙動を確認してみる｜KuzLog
縦方向の揃え(align-items)
align-{breakpoint(省略可)}-{start｜end｜center｜baseline｜stretch}
align-sm-start
折返し(flex-wrap)
flex-{breakpoint(省略可)}-{nowrap｜wrap}-{reverse(省略可)}
flex-wrap-reverse
順番(order)
order-{breakpoint(省略可)}-{first｜last｜{n(1~12)}}
order-md-first
marginとpadding
設定したいこと
クラス名の書き方
例
参考リンク
margin
m{direction}-{breakpoint(省略可)}-{size｜auto}
ma-auto
CSS スペーシング・ヘルパー — Vuetify
padding
p{direction}-{breakpoint(省略可)}-{size｜auto}
pa-md-4
Vue.js】Vuetify初心者が知っておきたい便利な知識5選｜まさきのエンジニア図書館
size
4px毎に増えて、0~16まで指定可能
nをつけると負の値になる
direction : 適用対象の位置指定
凡例) o:適用される x:適用されない
direction
上
下
左
右
t
o
x
x
x
b
x
o
x
x
l
x
x
o
x
r
x
x
x
o
x
x
x
o
o
y
o
o
x
x
a
o
o
o
o
↧