Chapter 09無料公開

div, v-container, v-sheet, v-card の各要素の違い

超Lチカ団編集局
超Lチカ団編集局
2024.01.08に更新

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>

結果:

image.png

div はスタイルが何も指定されていないので、要素を単純にまとめたいだけの目的ならば div を使うのがよさそうです。要素をまとめたうえで、それらの要素にマージンやパディングをお手軽に設定したいときは v-container を、サイズ(高さ、最大幅など)を細かく指定したい場合は v-sheet を使います。