Vue CSS バインディング

Volardev 編集部 April 28, 2026

v-bind を使用して、style および class 属性から CSS を変更する方法について詳しく学びましょう。

v-bind で style や class 属性を操作するというコンセプト自体は非常にシンプルですが、その構文（シンタックス）には少し慣れが必要かもしれません。

1. Vue における動的な CSS

すでにこのチュートリアルの v-bind のセクションやいくつかの例で、Vue がどのように CSS を変更するかを見てきました。

ここでは、Vue を使って CSS を動的に変更する方法をより詳しく解説します。まずは、以前に紹介した2つのテクニック、すなわち v-bind:style によるインラインスタイルと、v-bind:class によるクラスの割り当てをおさらいしましょう。

1.1 インラインスタイル (Inline Styling)

Vue でインラインスタイルを適用するには、v-bind:style を使用します。

実装例<input type="range"> 要素を使用して、インラインスタイルで <div> 要素の オパリティ（不透明度） を変更します。

<input type="range" v-model="opacityVal">
<div v-bind:style="{ backgroundColor: 'rgba(155,20,20,'+opacityVal+')' }">
  上のレンジ入力をドラッグして、ここの不透明度を変更してください。
</div>

1.2 クラスの割り当て (Assign a Class)

Vue で HTML タグにクラスを割り当てるには、v-bind:class を使用します。

実装例
食べ物の画像を選択する例です。選択された食べ物は、v-bind:class によってハイライトされ、何が選択されているかが視覚的に示されます。

<div v-for="(img, index) in images">
  <img v-bind:src="img.url"
       v-on:click="select(index)"
       v-bind:class="{ selClass: img.sel }">
</div>

2. クラスとスタイルのその他の指定方法

これまでのチュートリアルでは触れてこなかった、v-bind:class と v-bind:style の高度な活用方法をいくつか紹介します。

クラスのマージ: class="" と v-bind:class="" が併用されている場合、Vue はそれらを統合（マージ）します。
オブジェクトによる複数指定: v-bind:class="{}" を使用して1つ以上のクラスを含むオブジェクトを割り当て、各クラスのオン・オフを切り替えることができます。
表記法の使い分け: インラインスタイル（v-bind:style）では、キャメルケース（camelCase）が推奨されますが、引用符で囲めばケバブケース（kebab-case）も使用可能です。
配列構文: 配列（Array）形式のシンタックスを使用してクラスを割り当てることができます。

これらのポイントを詳しく見ていきましょう。

3. 詳細解説

3.1 Vue による 'class' と 'v-bind:class' のマージ

HTML タグに対して、通常の class 属性でクラスが割り当てられており、さらに v-bind:class でもクラスが指定されている場合、Vue はこれらを自動的にマージしてくれます。

実装例
この <div> 要素は 'impClass' と 'yelClass' の両方に属することになります。'impClass' は通常の class 属性で、'yelClass' は v-bind:class によって設定されています。

<div class="impClass" v-bind:class="{yelClass: isYellow}">
  この div は 'impClass' と 'yelClass' の両方に属しています。
</div>

3.2 'v-bind:class' で複数のクラスを割り当てる

v-bind:class="{}" を使用して要素にクラスを割り当てる際、カンマ区切りで複数のクラスを指定できます。

実装例<div> 要素は、Vue インスタンス内の ブーリアン（Boolean） プロパティである isYellow と isImportant の状態に応じて、'impClass' と 'yelClass' の両方、またはいずれかに属することができます。

<div v-bind:class="{yelClass: isYellow, impClass: isImportant}">
  このタグは 'impClass' と 'yelClass' の両方のクラスに属する可能性があります。
</div>

3.3 'v-bind:style' におけるキャメルケースとケバブケースの表記法

Vue でインラインスタイルを修正する場合、CSS プロパティには キャメルケース（camelCase） 表記を使用することが推奨されます。ただし、プロパティ名を引用符 ' ' で囲めば、ケバブケース（kebab-case） も利用可能です。

実装例
ここでは background-color と font-weight を2つの異なる方法で設定しています。推奨されるキャメルケース（backgroundColor）と、引用符を用いたケバブケース（'font-weight'）です。どちらも正しく動作します。

<div v-bind:style="{ backgroundColor: 'lightpink', 'font-weight': 'bolder' }">
  この div タグは背景がピンクで、テキストが太字です。
</div>

用語解説：

キャメルケース (Camel case): backgroundColor のように、最初の単語は小文字で始め、以降の単語の先頭を大文字にする書き方です。大文字がラクダ（Camel）の背中のコブのように見えることからこう呼ばれます。
ケバブケース (Kebab case): background-color のように、単語間をハイフン - でつなぐ書き方です。ハイフンが「シシカバブ（Kebab）」の串のように見えることからこの名がつきました。

3.4 'v-bind:class' における配列構文

配列構文を使用して複数のクラスを追加することもできます。この方法では、Vue のプロパティに依存するクラスと、常に適用される固定のクラスを混在させることが可能です。

実装例
配列構文を使用して 'impClass' と 'yelClass' を設定しています。'impClass' は isImportant プロパティの状態に依存しますが、'yelClass' は常にこの <div> 要素に付与されます。

<div v-bind:class="[{ impClass: isImportant }, 'yelClass' ]">
  この div タグは、isImportant プロパティに応じて1つまたは2つのクラスに属します。
</div>