Vueフレームワークにおけるコンポーネントのスタイリング

コンポーネントをスタイリングするには、コンポーネントファイル内に styleタグを記述する必要があります:

<script>
	
</script>
<template>
	
</template>
<style>
	
</style>

このタグ内にCSSコードを記述でき、そのスタイルはそのコンポーネントのHTMLコードにのみ適用され、外部には適用されません。これは利便性のために特別に設計されています。

例を見てみましょう。いくつかの段落があるとします:

<template>
	<p>
		1
	</p>
	<p>
		2
	</p>
</template>

それらを赤色に変えてみましょう:

<style>
	p {
		color: red;
	}
</style>

コンポーネントのタグをスタイリングしてください。