Vue の公式チュートリアル 表示する文字に色をつける

Vue の公式チュートリアル　表示する文字に色をつける

Vue の公式チュートリアルの第３回目です。ステップ３では、表示する文字に色を付けるやり方を学びます。これまで、Vue の「部品」のファイル「.vue」ファイルに HTML と Javascript を埋め込むやり方を学んできました。今回は、CSS を使って文字に色をつけます。

前回までのポイントをもう一度

まずは、前回までの復習です。 Vue の「部品」として表示する内容をまとめたファイルが「.vue」ファイルです。 このファイルには、三つの部分があります。

＊　HTML を書く部分：「template」のタグの部分に書きます

＊　Javascript のプログラムを書く部分：「script」のタグの部分に書きます

＊　CSS を書く部分：「style」のタグの部分に書きます。

Javascript で、表示に使うデータを指定することもできます。 Vue のフレームワークでは、標準の HTML とは少し書き方が違っています。また、Javascript も特有の書き方で書くので、まずは標準的な書き方を覚えてしまう方法で学習を進めます。

今回の学ぶのは？

ステップ３で学ぶのは「表示する文字に色をつける」やり方です。

標準的な HTML の文字も CSS を使うと、「体裁（見た目）」を整える事ができます。Vue でも、同じコンセプトで、表示のデータの「体裁（見た目）」を整える事ができます。

これまでの復習で書いた通り、Vue の部品の「.vue」ファイルの中は、三つの部分から構成されていて、HTML/CSS/Javascript を記述できます。

<template>HTMLの記述</template>

<script>

Javascriptのプログラム;

</script>

<style>

CSSの記述

</style>

では、ステップ 3 のサンプルコードです。 今回は、新たに「style」のタグが使われています。

<script>

export default {

  data() {

    return {

      titleClass: "title",

    };

  },

};

</script>

<template>

  <h1 :class="titleClass">Make me red</h1>

</template>

<style>

.title {

  color: red;

}

</style>

ここでは、この三つの部分が連携して表示を実現しています。

＊　HTML の記述で、「class」を指定しています。ただし、標準の HTML とは記述方法が少し違います。「":class"」で書きます。（標準の HTML では、「class」）

＊　CSS の記述では、HTML の「class」のタグによって表示の仕方を指定します。CSS では、class の値を使う場合には、「.」を前につけます。

＊　この例題では、Javascript のプログラムの変数で、HTML の「:class」の値を指定しています。（変数：titleClass）この値が、CSS で使われている「title」になっています。

＊　CSS で「color」を使うと、色を指定できます。今回は「red」を指定しています。

これが、今回のコードサンプルです。

標準の記述方法との違いは？

既に説明していますが、Vue で使う、HTML の記述方法は、一般的に使われている標準の HTML の記述とは少し違っています。

基本は同じなのですが、微妙に違います。

Vue のフレームワークを学びながら、HTML/CSS/Javascript の必要な部分から学ぶ方法ならば、「Vue」での書き方に集中できるので、初心者でも混乱するのを避ける事ができます。

＊　CSS で使う、class の指定は、「:class」を使う

＊　class のタグの値の指定に、Javascript の変数を指定できる

もう一つは、HTML で指定している、「:class」の値を Javascript で指定する事ができるので、プログラムで、「体裁（見た目）」も指定できる事になります。

今回の応用は？

今回は、サンプルコードでは文字の色を赤（red）に指定しています。 この部分を変更して、他の色を指定して色を変えてみてください。実際に、コードを変更して、色が変わる様子を体験してください。

ここで、もう少し色の指定のやり方を解説しておきます。 基本的な色は、「red」のように、英語で色を指定することで指定が可能です。しかし、実際は、中間色のような色の指定をしたい場合もたくさんあります。

その場合は、色の三原色（RGB:赤・緑・青）の濃さを数値で指定します。 形式は「#XXXXXX」で、指定します。各色２桁づつの１６進数で指定します。

色の指定の例です。インターネットで検索すれば詳細がわかります。

シンプルな青の場合 #0000FF

ライム #00FF00

シンプルな赤 #FF0000

黄色の場合 #FFFF00

白 #FFFFFF

黒 #000000

グレー #808080

まとめ

今回の学習では、Vue の部品のファイルの最後の部分、「CSS」を使うやり方をしています。 これで、Vue の部品を構成する、HTML/CSS/Javascript を記述するための、基本がわかりました。

これまでで、分かったことは、特に HTML は、標準の HTML の記述方法とは微妙に違っています。今後の学習で大切なことは、Vue での記述方法をしっかりマスターする事です。

あとは、書き方のバリエーションを増やしていけば、もっと色々な事ができるようになります。

次回は、日本時間の 2022 年 2 月 18 日にお届けします！