[[📗08 computedの使いどころ]] < [[📒Vue.jsクエスト]] > [[📗10 ホチキスの芯はv-bind]]
## Abstract
`.vue`ファイルで[[CSS]]を使って、見た目を装飾する方法を学びます。
## Lesson
### style属性の直接指定
[[HTML]]同様、[[Vue]]でも[[style属性 (HTML)|style属性]]を指定できます。たとえば以下のコードは[[divタグ]]の背景色を赤色に、文字を白色にします。
```html
<template>
<div style="color: white; background-color: red">Title</div>
</template>
```
### classによる指定
`.vue`ファイルに[[styleタグ]]を記載すると、[[CSSセレクター]]に対してスタイルを設定できます。以下のコードは先ほどのコードと同じスタイルになります。
```html
<template>
<div>Title</div>
</template>
<style>
div {
color: white;
background-color: red;
}
</style>
```
### [[Scoped CSS]]
[[styleタグ]]に`scoped`をつけると、そのコンポーネント(`.vue`ファイル)だけで[[CSS]]が有効になるよう設定できます。たとえば以下のコードについて。
```html
<template>
<div>Title</div>
<div>SubTitle</div>
</template>
<style scoped>
div {
color: white;
background-color: red;
}
</style>
```
[[Chrome devtools]]で実際に生成された[[HTML]]を確認すると以下のようになっています。
```html
<div id="app" data-v-app="">
<div data-v-7ba5bd90="">Title</div>
<div data-v-7ba5bd90="">SubTitle</div>
</div>
```
```css
div[data-v-7ba5bd90] {
color: white;
background-color: red;
}
```
`7ba5bd90`の部分がコンポーネント特有の値です。他のコンポーネントではこの値が変わるため、このファイルにおける[[styleタグ]]で指定した[[CSS]]は反映されません。
## Missions
### Misson 1
#😁EASY
以下のコードについて、`Title`のフォントサイズが2倍になるよう[[styleタグ]]を追加してください。
```html
<template>
<div>Title</div>
</template>
```
%%
回答例
```html
<template>
<div>Title</div>
</template>
<style scoped>
div {
font-size: 200%;
}
</style>
```
%%
### Misson 2
#😁EASY
[[#Misson 1]]の要件を==[[styleタグ]]を使わずに==実現してください。
%%
回答例
```html
<template>
<div style="font-size: 200%">Title</div>
</template>
```
%%
### Mission 3
#😵HARD
[[Scoped CSS]]を==使わない方がいいケース==を1つ紹介してください。
%%
コンポーネントに含まれるが、明示的に`.vue`ファイル内に登場しない[[DOM]]に対してスタイルを設定したい場合。
%%
## References
[SFC CSS Features \| Vue\.js](https://vuejs.org/api/sfc-css-features.html)