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 |