ふりぶろぐ
Web Engineer's Blog
JavaScript

【第5回】サンプルコードから基礎を学ぶ!Vue.js入門講座!【CSS適用編】

Vue.jsからクラスを適用するにはどうしたら良いんだろう?
style属性も適用できるのかな?

このような疑問にお答えします。

この記事の内容
  • 動的にクラスを適用してみよう!
  • 動的にインラインスタイルを適用してみよう!

超初心者向けVue.js入門講座です。
一緒にVue.jsを勉強して、Vue.jsを楽しみましょう!

今回は動的にCSSを適用する方法について解説していきます。

読んでほしい人
  • Vue.jsが初めての人
  • Vue.jsを復習したい人
  • Vue.jsを動かしてみたい人

動的にクラスを適用してみよう!

Moving forward

Vue.jsからクラスを適用したい!

こんなことを思った方もいるのではないでしょうか?
そこで今回は、Vue.jsから動的にクラスを適用する方法について解説します。

まずはVue.jsを使わない場合のクラスの適用方法について見てみましょう。

text-color,bg-colorというクラスを用意してみました。
こちらはHTMLとCSSを理解していれば何も問題ないと思います。

  • text-color:テキストの色を赤にする
  • bg-color:背景色を緑にする

ではこちらのクラスをVue.jsから適用してみましょう!
適用する方法は2つあります。1つずつ見ていきましょう。

オブジェクトを使用する方法

このようにオブジェクトを使用して、boolean型で有効にするかどうかを指定します。
今回の場合はtext-colortrueとなっているので赤色で文字が表示されていますね。

JavaScriptでケバブケース(ハイフン区切りの文字)を使用する場合はシングルクォートで囲う必要があります。

ボタンを追加して値を切り替える

この値を切り替えられるようにすることで、動的にクラスを適用できるようになります。

ボタンを押すことで切り替えられるようにしてみました。
これで動的になりましたね。

オブジェクトをJSに定義する

また、このオブジェクトはJS側に書くこともできます。
その場合にはcomputedプロパティを使用します。

注意としてはVueインスタンス内でdataプロパティを呼び出す場合はthisが必要なことです。
忘れないように注意しましょう。

配列を使用する方法

このようにして配列を渡してあげることで適用することも可能です。
こちらはHTMLで適用する方法に似ているので簡単ですね。

配列の中でオブジェクトを使用する

このようにして配列の中でオブジェクトを使用することもできます。
片方だけ動的にすることも可能です。

動的にインラインスタイルを適用してみよう!

Static website

インラインスタイルとはstyle属性を使用して直接スタイルを適用するものです。
まずはVue.jsを使わない方法について見てみましょう。

このように非常にシンプルにスタイルを適用することができます。

ではこちらをVue.jsを使ってバインディングしてみましょう。
classと同じでオブジェクトを使用する方法と配列を使用する方法の2つがあります。

オブジェクトを使用する方法

今回はbooleanではなく、Stringを指定します。
非常にCSSと似ているのでわかりやすいですね。

こちらもclassと同様にJS側に定義することができます。

オブジェクトをJSに定義する

このようにJS側に定義することも可能です。

一般的にはHTMLに直接書き込むより、JS側に切り出したほうが良いとされています。
動的にインラインスタイルを適用する場合は、このように適用しましょう。

配列を使用する方法

配列を使用することで複数のオブジェクトをスタイルに適用することができます。
配列を使用して複数のオブジェクトを適用してみましょう。

boldStyleという新しいオブジェクトを定義して適用してみました。
こちらは対象のテキストを太字にするオブジェクトです。

実際に色も設定されている上に太字になっていますよね。
このように複数のオブジェクトを適用したい場合は配列を使用します。

まとめ

動的にCSSを適用する方法はいくつかあります。
この中でどの方法が一番良いのか見極める必要がありますね。

一般的にはJS側に定義することが多いです。
特にこだわりがなければJS側に定義しましょう。

動的にCSSを適用して、すばらしいデザインのウェブページを作ってみてください!

ABOUT ME
りーふ
たまにブログを書いてるWebエンジニア。 サーバーサイドメインでインフラとフロントエンドもたまにやります。 Javaが得意。 Play Frameworkが好き。 本業は迷惑をかけない程度に手を抜くスタイル。 意識高い系は苦手。