質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Q&A

解決済

1回答

18348閲覧

Vuetifyのv-card-textの背景色を白もしくは、他の色に変更したい。

takochan1192

総合スコア100

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

0グッド

0クリップ

投稿2020/06/03 02:31

Vuetifyをして使用して、card-textを作っています。
下記の写真の通り、card-text内の背景色が現在、黒になっておりますが、
ホワイトやその他の色に変えたいと思っております。
どなたかご教示いただけませんでしょうか?

イメージ説明

Vuetify

1<template> 2 <v-card> 3 <v-toolbar 4 color="primary" 5 flat 6 >テスト 7 </v-toolbar> 8 9 <v-card-text> 10 <v-subheader><h3>テスト</h3> 11 </v-subheader> 12 <v-list> 13 <v-list-item> 14 <v-list-item-title>name 15 <v-form v-model="valid"> 16 <v-container> 17 <v-col 18 cols="12" 19 md="4"> 20 <v-text-field 21 v-model="name" 22 :rules="nameRules" 23 :counter="10" 24 label="name" 25 required 26 ></v-text-field> 27 </v-col> 28 29 </v-container> 30 </v-form> 31 </v-list-item-title> 32 33 </v-list-item> 34 </v-list> 35 </v-card-text> 36 </v-card> 37</template>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

v-cardコンポーネントのcolorプロパティで色を指定するとカード全体の背景色を変更できます。
例えば、以下のように色を指定した場合

vue

1<v-card color="blue lighten-4"> 2 <-- 省略 --> 3</v-card>

このようになります。
イメージ説明

この図で背景色が白で表示されている部分はv-listコンポーネントです。この部分も同じ背景色にしたい場合はv-listコンポーネントのcolorプロパティで色を指定します。

vue

1<v-card color="blue lighten-4"> 2 <v-toolbar color="primary" flat>テスト</v-toolbar> 3 <v-card-text> 4 <v-subheader><h3>テスト</h3></v-subheader> 5 <v-list color="blue lighten-4"> 6 <-- 省略 --> 7 </v-list> 8 </v-card-text> 9</v-card>

これでカード全体の背景色が変えられます。
イメージ説明

colorプロパティには任意のcssを指定できます。例えば下記のcustom-colorというcssを定義した場合

vue

1<style scoped> 2.custom-color { 3 background-color: aquamarine; 4 border-color: aqua; 5} 6</style>

colorプロパティにcustom-colorを指定することができます。

vue

1<v-card color="custom-color"> 2 <v-toolbar color="primary" flat>テスト</v-toolbar> 3 <v-card-text> 4 <v-subheader><h3>テスト</h3></v-subheader> 5 <v-list color="custom-color"> 6 <-- 省略 --> 7 </v-list> 8 </v-card-text> 9</v-card>

イメージ説明

投稿2020/06/03 11:53

rubytomato

総合スコア1752

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takochan1192

2020/06/03 13:10

rubytomato様 ご丁寧に回答いただきまして、本当にありがとうございます。中々、操作に慣れず困っておりました。 CSSの指定方法など、全く知りませんでした。 非常に勉強になりました。 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問