Vuetifyであれこれ

画像が（横に）はみ出す問題

BootStrapではimg-fluidでうまいことレスポンシブになってくれていたが、該当するclassやプロパティーが存在しないので自分でcssを当てる

何で画像の枠がはみ出すの！？max-width:100%だけではダメ！そんなときの解決法 | ビバ★りずむ

<template>
  <div>
    <v-container>
      <v-row>
        <v-col>
          <!-- img-woman という名前のclassを作成してcssで調整する -->
          <img src="@/assets/image/fuga.jpg" class="img-woman" />
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>
<script>
:
省略
:
</script>
<style>
.img-woman {
  max-width: 100%;
  height: auto;
}
</style>

画像などをブラウザの高さに合わせる

個人的には100vhがお手軽で好き。

ボックスの高さをブラウザの高さにフィットさせる方法 | 外注・下請け専門のホームページ制作会社 RunLand(ランランド)
【CSSとjQuery】ボックスの高さをブラウザの高さに合わせるテク3つ！ | WEBDESIGNDAY

vw、vhがあいまいなのでわかりやすいリンクを探した。

【CSS】vw、vh、vmin、vmaxとは？基本的な使い方 | JAJAAAN

必ず使うやつ

文字の大きさ、太さ、配置、装飾（打ち消しなど）、透過など

Text and typography — Vuetify
【Vuetify】フォントサイズのクラスの種類と指定方法｜Into the Program

ボタン

公式

Button component — Vuetify

以下が端的でとてもわかりやすい

Vuetify.js 2.2のButtonコンポーネントについて - Qiita

margin、padding、ブレイクポイント

CSS スペーシング・ヘルパー — Vuetify

レスポンシブデザイン

レイアウト調整。
v-container、v-row、v-col、v-spacer、flexbox関連がメイン

Grid system — Vuetify

色の指定

purpleなどがなぜ使えるかわからなかった。ここにその答えがある。

Material color palette — Vuetify
Material color palette — Vuetify

以下のリンクで知った。

Vuetifyを使っているときによく見に行くページと情報 - Qiita