f:id:utouto97:20210725220657j:plain

Vueでスタイルを設定

Vueでスタイルを設定するには、<style></style>を追加してその中に書いていくことができます。
また、テンプレート内のタグにクラスやIDを設定して、クラスやIDに対するスタイリングを<style></style>に書くこともできます。

<template>
  <div>
    <h1>Vue あかいろ</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
h1 {
  color: red
}
</style>

<template></template>内でHTML要素を記述し、<style></style>内でスタイルを指定します。
上の例の場合だと、<h1>タグ内の文字色を赤にしています。

この場合、以下のようにレンダリングされます。

f:id:utouto97:20210910001710p:plain

また、BootstrapやTailwindなどのCSS フレームワークを利用することもできます。
BootstrapやTailwindなどのCSS フレームワークをインストールすれば、クラス名にbtn btn-primary等を指定すれば、そのスタイルが適用されます。

Vueで使えるUIフレームワーク

Vueでは、BootstrapやTailwindなどのCSS フレームワークを利用することができます。
しかし、それだけではなく、Vue用のUIフレームワークもいくつもあります。

いくつか例を示します。

それぞれ、レスポンシブ対応であったり、マテリアルデザインであったり、と様々な特徴があります。

今後、これらのUIフレームワークも利用していきたいと思っています。

終わり

WEB開発ノート

Vueでスタイリング

Vueでスタイルを設定

Vueで使えるUIフレームワーク