当サイトでは、いつもは Vuetify 3 のUIコンポーネントについて書いている記事が多いですが
今回は前回に続いて、Vuetify 3 があらかじめ備えているcssクラスについて書いていきたいと思います。

前回はdisplay系統に関する内容をご紹介しましたが、
今回は「ここはもう少し間隔をあけたい」、「要素をセンタリングしたい」というような場合に使える
「余白調整系」のcssクラスについてです。

なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( v16.10以降 )を使用することをお勧めします。

Vuetifyに定義されている、余白調整系のclass

それでは早速、Vuetifyに定義されている、余白調整系のcssクラス群について書いていきます。

cssで余白調整をする際、
「要素の外側」で余白調整する場合はmargin。
「要素の内側」で余白調整する場合はpadding。

こういった使い分けをするのが一般的です。内、外、というのは
要素にborderを付けて考えてみるとわかりやすい概念かと思います。
(もちろん一口に余白調整と言っても、要素そのものを強制的に動かすposition系統や、親要素に指定してガターを生成する gap などによるアプローチ方法もありますが、今回は要素と要素の間をあける、という点にフォーカスした記事ですので、基礎的な margin と padding についての話をしています。)

Vuetifyでは、次の様な記法で、marginとpaddingによる余白調整が可能です。

m-{余白をつけたい方向}-{値} … marginの場合
p-{余白をつけたい方向}-{値} … paddingの場合

「余白をつけたい方向」には、次のいずれかを指定できます。
t … 上方向
b … 下方向
l … 左方向
r … 右方向

「左右同時」「上下同時」「全方向」の場合は、次の指定ができます。
x … 左右
y … 上下
a … 全方向

「値」は、指定値 × 4pxで最大16段階までの指定が可能です。

これらをつなげると、具体的には次の様な書き方になります。

<div class="ma-0 pa-0">
これは全方向に内外余白すべてなしの状態
</div>

<div class="mt-3">
上方向に12pxのmargin
</div>

<div class="mx-5">
左右に20pxのmargin
</div>

<div class="my-8">
上下に32pxのmargin
</div>

<div class="pa-16">
上下左右に64pxのpadding
</div>

↑と言った具合に、要素間の余白調整を行う事が可能となっています。
BootstrapなどのUIフレームワークにも存在しますが、
Spacing helper などと呼ばれる事が多いcssクラス群で、地味な様ですが小回りが効いて実際便利です。

前回も言いましたが、Vuetify には
この Spacing helper 以外にも定義され済みのcssクラス群が数多くあるので、
Bootstrap などの有名なフレームワークと同様に
「それ単体でUIフレームワークとしての運用が可能」ということですね。

マイナス方向のSpacing helper

Web制作をしていると、さまざまな要素同士の影響が複雑に絡み合い、
単純に上下左右の調整だけではうまくいかないケースもあったりします。

Vuetifyには、「マイナス方向」の余白調整系のcssクラスも存在します。

と言っても単純で、
上でご紹介した通常の(順方向の)余白調整の書き方の「値」の前に、
n
をつけるだけです。具体的には次のとおり。

<div class="mt-n3">
上方向に -12px のmargin
</div>

<div class="ml-n5">
左に -20px のmargin
</div>

↑…と言った具合です。ただし
安易なマイナスマージン(ネガティブマージン)の多用は、

特に
前任者からの引き継ぎ案件などで無用な混乱を生みやすく
(書いた人間以外、意図が分かりづらいコードになりやすいため)、

あまり歓迎される手法ではありませんが
実際の制作現場でも、たまに登場するのを見かけるので
知識として覚えておくと、対応しやすくなるかと思います。

モバイルサイズではこのくらいの余白、ワイドモニタではこのくらいの余白、と言った調整(breakpoints)

続いて、「特定の画面サイズにおける個別の余白調整」に関してです。

こちらも、前回のdisplay系統のcssクラス群の記事でご紹介した
「Vuetifyに定義されたブレークポイント」による、「画面サイズごと個別」での余白調整が可能です。
具体的には、次の様に書きます。

<div class="pa-16 pa-lg-8">
基本は上下左右に64pxのpadding、
1280pxを超えたら32pxのpaddingになる
</div>

<div class="mt-3 mt-sm-8 mt-lg-12 mt-xl-16">
この様に、複数の画面サイズでの同時指定も可能です。
この場合、
基本が12pxの余白、
600pxを超えたら32px、
1280pxを超えたら48px、
1920pxを超えたら64px
の上方向のmargin指定となります。
</div>

Vuetifyに定義されているブレークポイントの一覧は、Vuetify公式サイトの次のページに掲載されていますので、
上記のサンプル以外の他の組み合わせも見てみると理解が深まることと思います。

CSS Spacing helpers — Vuetify

補足：要素そのもののセンタリング

Webサイト制作時、

ページの横方向にその要素しかない様な場合で、
width を指定しておいて
左右に margin: auto;
を指定する事で、その要素そのものをセンタリングする事ができますよね。

ここまでのセクションでは、
m-{余白をつけたい方向}-{値}
の様に、値の部分に実値をいれる記法について書いてきましたが、補足として
margin: auto を使用したい場合。その様な場合は、次の様な指定をすれば良いです。

<v-btn class="mx-auto" width="480px">
横幅480pxの v-btn が、横方向にセンタリングされます。
</v-btn>

↑この例では v-btn の width という prop に値を渡して横幅を定義していますが
この部分は、横幅を持ったcssクラスを定義しておいて付与する形でももちろん構いません。

Spacing helper に関するVuetify公式解説ページ

要素間の余白を柔軟に制御する事ができる
Spacing helper に関しての、Vuetify公式解説ページは次になります。

CSS Spacing helpers — Vuetify

この記事のまとめ

当サイトでは、いつもは Vuetify 3 のUIコンポーネントを中心に記事を書いていますが
前回の記事 に引き続いて今回も
「Vuetify 3 にあらかじめ定義されているcss class」についての内容を書いてみました。

前回も書いた事ですが、Vuetify には、
今回ご紹介した Spacing helpers の様にあらかじめ定義されているcssクラス群が多数あるので
それ単体で、Bootstrapのように
文字通り「UIフレームワーク」として運用する事が可能です。

今回は
・Spacing helpers と位置付けられた、余白調整用のcssクラス群
・それらと組み合わせて使用できる、ブレークポイント

などについてご紹介しましたが

今後また、この他にもたくさんあるcssクラス群についても、続編として記事を書いていければと考えています。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。