div, v-container, v-sheet, v-card の各要素の違い
ページ内にボックス(領域)を確保する要素としては、以下があります。
-
span
: 改行なしで(inlineで)テキストなどを配置したい時 -
div
: 副作用なくスペースを取りたい時 -
v-container
: 装飾なしのちょっとしたスペースを取りたい時 -
v-sheet
: 高さ、影、枠線付きのスペースが欲しい時 -
v-card
: テキストやイメージを綺麗に(お仕着せだけど)配置したいとき
この中で span
だけは inline
要素で、サイズ指定が無視されるため、根本的に使い方が異なります。詳しくは下記リンク先の記事を見てください。
他については、以下の違いがあります。
<template>
<v-container>
<div class="text-h6 mt-2">共通</div>
<span>幅(width)の指定は有効</span><br/>
<div class="text-h6 mt-2">div</div>
<div height="200px"
max-width="500px"
class="bg-black rounded-lg"
elevation="3">
<span>height 指定は無視される</span><br/>
<span>max-width 指定は無視される</span><br/>
<span>デフォルトでpaddingが設定されていない</span><br/>
<span>影(elevation)の指定ができない</span><br/>
<span>背景色、文字色の指定は class で行う</span><br/>
<span>角(rounded)の指定は有効</span><br/>
</div>
<div class="text-h6 mt-2">v-container</div>
<v-container height="200px"
max-width="500px"
class="bg-green-lighten-3 rounded-lg"
elevation="3">
<span>height 指定は無視される</span><br/>
<span>max-width 指定は無視される</span><br/>
<span>デフォルトでpaddingが設定されている</span><br/>
<span>影(elevation) の指定ができない</span><br/>
<span>背景色、文字色の指定は class で行う</span><br/>
<span>角(rounded)の指定は有効</span><br/>
</v-container>
<div class="text-h6 mt-2">v-sheet</div>
<v-sheet height="200px"
max-width="500px"
class="bg-red-lighten-3 rounded-lg"
elevation="3">
<span>height 指定は有効</span><br/>
<span>max-width 指定は有効</span><br/>
<span>デフォルトでpaddingが設定されていない</span><br/>
<span>影(elevation) の指定ができる</span><br/>
<span>背景色、文字色の指定は class で行う</span><br/>
<span>角(rounded)の指定は有効</span><br/>
</v-sheet>
<div class="text-h6 mt-2">v-card</div>
<v-card height="200px"
max-width="500px"
color="blue-lighten-3"
tonal>
<span>height 指定は有効</span><br/>
<span>max-width 指定は有効</span><br/>
<span>デフォルトでpaddingが設定されていない</span><br/>
<span>色の指定は <b>color</b> で行う(背景色、文字色は自動で決まる)</span><br/>
<span>影(elevation)の指定はできるが variant と競合することがある</span><br/>
<span>角(rounded)は指定はできるが variant と競合することがある</span><br/>
</v-card>
</v-container>
</template>
結果:
div
はスタイルが何も指定されていないので、要素を単純にまとめたいだけの目的ならば div
を使うのがよさそうです。要素をまとめたうえで、それらの要素にマージンやパディングをお手軽に設定したいときは v-container
を、サイズ(高さ、最大幅など)を細かく指定したい場合は v-sheet
を使います。