1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vueの単一ファイルコンポーネントにCSSのネイティブ変数を使う

Posted at

目標物

独自コンポーネント<hoge>font_colorというタグに色を指定するとhogeという文字の色が変わるものを作って行きます。

CSSのネイティブ変数とは

cssにはsassと同じように変数というものが存在します。

style.css
.hoge{
    --color:red;
}
.hoge h1{
    color: var(--color);
}

この場合、h1は赤くなります。

Chromeなどのブラウザで確認すると、確かに.hoge h1{ }のところのカラーが赤くなっています。

基本的に注意するのは上の画像の通りです。

Vueの単一ファイルコンポーネント

この記事を見ている人の多くは、もしかしたらVueについて私より、知見を深めた人かもしれません。それかVueについて最近学び始めた方かもしれません。Vueの魅力でもある単一ファイルコンポーネントについてはVueを使う人ならほとんど誰でも扱うものです。

コンポーネントとは日本語で部品という言葉です。Webサイトのページ内で共通するボタンのデザインや、記事のサムネイルも全てコンポーネントです。

単一ファイルコンポーネントのテンプレートは基本的に次のようになります。

<template>

</template>

<script>
export default {


}
</script>

<style>

</style>

<template>タグで囲まれたところにHTMLを書きます。<template lang="pug">と書くことでpugも扱うことができます。

<script>の中に汎用的なJavaScriptやexport default { }の中にVue.jsを記述します。その気になればjQueryも記述することができます

<style>はスタイルを指定します。<style scoped>と書くとその単一ファイルコンポーネント内でしか効かないスタイルを指定でき、スタイル汚染を防ぎます。また<template>タグと同じように<style lang="scss">でscss記述ができますが、webpackで設定しないといけません。

本題

フォルダの構成はこのようにします。

Index.jsにはimportでVueとhoge.vueを呼び出しておきます

import Vue from 'vue';
import hoge from './components/hoge.vue';

new Vue({
  el: "#contents",
  components: {
    'hoge': hoge
  },
});

そしてindex.htmlでhoge.vueとscript.jsを呼び出します

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>hoge</title>
  </head>
  <body>
    <div id="contents">
      <main>
        <hoge font_color="red"></hoge>
        <hoge font_color="yellow"></hoge>
        <hoge font_color="#73e6c7"></hoge>
      </main>
    </div>
  </body>
  <script type="text/javascript" src="script.js"></script>
</html>

そして今回は以下のような単一ファイルコンポーネントファイルhoge.vueを作成します。

hoge.vue
<template lang="html">
  <div class="hoge" :style="{'--color': this.font_color}">
    <h1>hoge</h1>
  </div>
</template>

<script>
export default {
  props:{
    font_color: {}
  }
}
</script>

<style lang="scss">
.hoge{
  margin:30px;
  --color:red;
  h1{
    color: var(--color);
  }
}
</style>

<div class="hoge" :style="{'--color': this.font_color}">の部分、:style={}はvueのv-bindの機能を使っています。

:style="{'プロパティ名':'値'}"とすることでタグ内にCSSを指定するstyle=プロパティ名:値と同じ効果になります。v-bindで指定したメソッド名(ここでは`font_color)はpropsで登録しておいてあげましょう。

前述した通り、:styleの記述をタグ内にすることでHTMLのインライン記述と同じ効果になります。なので:style="{'--color': this.font_color}"と書き、index.html

index.html
<hoge font_color="red"></hoge>
<hoge font_color="yellow"></hoge>
<hoge font_color="#73e6c7"></hoge>

と記述することでコンパイルされたHTMLコードは以下のようになります

index.html
<div class="hoge" style="--color:red">・・・</div>
<div class="hoge" style="--color:yellow">・・・</div>
<div class="hoge" style="--color:#73e6c7">・・・</div>

HTMLのインラインにstyleが記述されます。

今回は文字の色を変化させるだけでしたが、使いようによっては様々なインタラクションに適応させることができます。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?