[[Vuetify3]]でテキストを装飾するときによく使うパターンのメモ。 ## ベース | Class | 特徴 | | --------------- | ------------------------- | | text-h1 | H1 | | text-h2 | H2 | | text-h3 | H3 | | text-h4 | H4 | | text-h5 | H5 | | text-h6 | H6. H5より太い | | text-subtitle-1 | H6より小さく 細い | | text-subtitle-2 | subtitle-1より小さく 太い | | text-body-1 | subtitle-1とほぼ同じ | | text-body-2 | 細いsubtitle-2 | | tex-button | 全部大文字 | | text-caption | 最も小さく細い | | text-overline | 全部大文字で小さめ | ## 太さ | Class | 特徴 | | ----------------- | ---------- | | font-weight-black | とても太い | | font-weight-bold | 太い | | font-medium-bold | 少し太い | | font-regular-bold | 普通 | | font-light-bold | 細い | | font-thin-bold | 極細 | ## 装飾 | Class | 特徴 | | ---------------------------- | ---------- | | text-decoration-none | 装飾を消す | | text-decoration-line-through | 取り消し線 | | text-decoration-overline | 上線 | | text-decoration-underline | 下線 | | font-italic | 斜体 | ## 透明度 | Class | 特徴 | | -------------------- | ------ | | text-high-emphasis | 濃い目 | | text-medium-emphasis | 普通 | | text-disabled | 薄目 | ## 変形 | Class | 特徴 | | -------------------- | ------ | | text-lowercase | 濃い目 | ## 色 | Class | 特徴 | | -------- | -------- | | text-red | 赤 | | bg-red | 背景が赤 | > [!info] > 使える色は [Material color palette — Vuetify](https://vuetifyjs.com/en/styles/colors/#material-colors) を参照。