Vue Scoped CSS

1. グローバルなスタイリング (Global Styling)

Vue コンポーネント内、あるいは App.vue 内の <style> タグで定義された スタイリング は、実はデフォルトですべてのコンポーネントに対して グローバル（Global） に適用されます。

特定のコンポーネント内だけに スタイリング を限定し、他のコンポーネントに影響を与えないようにするには、<style scoped> のように scoped 属性を使用する必要があります。

2. CSS のデフォルトの挙動

任意の *.vue ファイル内に記述された CSS は、プロジェクト全体で機能します。
例えば、一つの *.vue ファイルで <p> タグの背景色をピンクに設定した場合、そのプロジェクトに含まれるすべての *.vue ファイル内の <p> タグが影響を受け、背景がピンクになります。

2.1 実装例：スタイルの干渉（グローバル）

このアプリケーションには、App.vue、そして2つのコンポーネント CompOne.vue と CompTwo.vue の合計3つのファイルがあると仮定します。
CompOne.vue 内で定義された CSS が、3つすべてのファイルの <p> タグに影響を与える様子を見てみましょう。

CompOne.vue のコード:

<template>
  <p>この p タグは 'CompOne.vue' に属しています</p>
</template>

<script></script>

<style>
  /* scoped がないため、プロジェクト全体の p タグに適用される */
  p {
    background-color: pink;
    width: 150px;
  }
</style>

3. スコープ付きスタイリング (Scoped Styling)

一つのコンポーネント内の スタイリング が他のコンポーネントの要素に影響を与えるのを避けるために、<style> タグに scoped 属性を付与します。

3.1 実装例：スタイルのカプセル化

CompOne.vue の <style> タグに scoped 属性を追加することで、背景色の指定をこのコンポーネント内部の要素だけに限定できます。

scoped を適用した CompOne.vue:

<template>
  <p>この p タグは 'CompOne.vue' に属しています</p>
</template>

<script></script>

<style scoped>
  /* このコンポーネント内の p タグだけに限定される */
  p {
    background-color: pink;
    width: 150px;
  }
</style>

このように scoped を活用することで、コンポーネントごとに独立したデザインを定義できるようになり、意図しないデザイン崩れ（スタイルの汚染）を防ぐことができます。これは、大規模な Web アプリケーションを スケーラブル に保つための重要なテクニックです。