Vuetifyとは

VuetifyとはVue.jsやNuxt.jsのプロジェクトで使用することのできるUIライブラリです。
※Vuetify

実際に私もよく使っていて、とても気に入っています。
Vuetifyの書き方は少し特殊なので慣れるまではちょっとややこしいかもしれませんが、慣れるとパパッとUIの実装ができるのでオススメです！

本題

本題のmarginやpaddingの設定ですが、
実際どんな感じで書くのかというと、こんな感じ。

index.vue

<divclass="my-5"/>

ん？....マイ？ - 5？

って感じですよね。

実はこれは一文字一文字に意味があります。

感の鋭い方はもうお分かりかもしれませんが、
最初の「m」はmarginの「m」です。

ということは...

paddingの場合は「p」と書きます。

それだけです。

そして、次の「y」という文字。
これはy軸方向の「y」という意味です。
つまり上下を対象に適用させるということです。

となると、「x」は左右を対象とします。

他にも、
・「t」 Top
・「b」 Bottom
・「l」 Left
・「r」 Right
・「a」全方向
などがあります。

※「-（ハイフン）」に関してはただのハイフンです。
　特に意味はありません。

最後の「5」という数字、これはsizeを表すもので、
「1」が4pxを表しています。

なので「5」の場合は5×4で20pxです。

上下にマージンを20px適用するという意味になります！

そして個人的にめっちゃイイ！と思ったのが、
ネガティブ（マイナス）な値も設定できるという点です！

これはとても便利！！

ネガティブを設定するには、
size（数字の部分）の前に、「n」を追加します。

なので「my-n5」と書くと、
上下にネガティブマージンを20px適用するという意味になります。

少しでもVuetifyに興味を持っていただけましたでしょうか？

Vuetifyを使うと直接タグ内に書けるので、
わざわざCSSをstyleに分けて書かなくて済みますし、
コード量も肥大化しにくく且つ、開発スピードも上がるのでメリットは大きいかと思います！

また今回紹介したmarginとpadding以外にもたくさんの機能があるので、他の機能も是非見てみてください。
ある程度のことはVuetifyで再現できるかと思います。
※Vuetify

ただVuetifyも完璧ではないので、
私も基本Vuetifyで書いて、どうしてもVuetifyでは再現できないところに関してだけCSSを書いているという感じで開発しています。

ご参考になれば幸いです！

最後までご覧下さり、ありがとうございました。