Chapter 06無料公開

Container (v-container)

超Lチカ団編集局
超Lチカ団編集局
2024.01.08に更新
このチャプターの目次

Container (v-container)

<v-container> は内側にある要素をひとまとまりのグループのように扱えます。機能的には <div> とほぼ同じですが、デフォルトでマージン、パディング、幅が指定されている点が異なります。

コード:

<template>
<v-app>
  <v-app-bar color="primary">
    <v-app-bar-title>
      Application
    </v-app-bar-title>
  </v-app-bar>
  <v-main>
    <v-container>
      <p>Hoge 1</p>
      <p>Hoge 2</p>
      <p>Hoge 3</p>
      <p>Hoge 4</p>
      <p>Hoge 5</p>
    </v-container>
    <div>
      <p>Hoge 1</p>
      <p>Hoge 2</p>
      <p>Hoge 3</p>
      <p>Hoge 4</p>
      <p>Hoge 5</p>
    </div>
  </v-main>
</v-app>
</template>

結果:

image.png

<v-container> で囲った文字は、周囲に少しスペースが開きます。<div> のほうはそれがありません。また <v-container> は横幅の最大値が指定されています。ブラウザを横に大きく広げると、文字列が中央寄せで表示されます。

image.png

<v-container> の幅やスペース(パディング、マージン)は指定きます。指定方法については、Spacing の項目で説明します。