質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

844閲覧

Vue.jsのプロジェクトでCSSフレームワークを用いて期待通りのスタイルを実現したい

aa316316

総合スコア39

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

1クリップ

投稿2019/02/14 08:22

編集2019/02/14 08:25

前提・実現したいこと

Vue CLI 3(vue create xxx)を用いて作成したプロジェクト内で、
CSSフレームワークのBuefy(vue + Bulma)を使用し、期待通り当りのスタイルを実現したいと考えています。

発生している問題・エラーメッセージ

現在、views以下のHome.vue, About.vue内で単純なhtml, cssのコーディングを行っており、
Buefyのサンプルをコピペ+その要素にclassを付与して、スタイルをあてていました。

その後、styleにscopedを付与したところ、Buefyから持ってきた要素上に.control.is-clearfix等のクラスが付与されており、
以前は当たっていたスタイルが当たっている部分、当たっていない部分ができてしまいました。
(例えば、Buefyのinputに付属しているlabel要素に付与されているclassは.labelのままだったのですが、以前.labelに当てていて期待通り動作していたスタイルが当たらなくなってしまいました。)

scoped追加後、具体的には以下の要素に下記のようなclassが付与されていました。
・labelには
label
・b-selectには
is-empty
・b-input要素には
control is-clearfix

現在はHome.vueのstyleタグにはscopedを指定し、About.vueのstyleタグにはscopedを指定していません(後で気づいたため)
scopedをつけなければ競合してしまうstyleがあるため、各ページのstyleタグにscopedを指定したいと思っています。

また、styleにscopedを付与しないことで、scoped有りの時には動作しているページ内のrouter-linkが動作しなくなってしまい、こちらも困っています。

具体的な質問

  • Vue CLI 3を使用して作成したプロジェクトでCSSフレームワークを使う際、styleタグにscopedをつけるとclassが当たらなくなってしまう要素があり、その挙動への対処方法
  • styleタグにscopedを付与するとrouter-linkによる画面遷移が動作しなくなることに対する対処方法(scopedをつけなければ正常通り動きます)
  • そもそもですが、CSSのフレームワークから持ってきた要素に、classを付与してスタイルを上書きするのは正しいことなのでしょうか?それなら、はじめから自分でスタイルを作ったほうがいいのではないか、とも思っています。

上記に関して、なにかアドバイス等いただけますでしょうか。
よろしくお願いいたします。

ディレクトリ構成

ディレクトリ構成は以下ですが、vue create xxxで作成したものから構成に関してはほとんど変わっていません。
変更点として、グローバルCSSとしてcommon.cssreset.cssを読み込んでいます。
イメージ説明

該当のソースコード

views/About.vue
以下はstyleタグにscopedを付与していないため、指定しているスタイルが当たっている状態です。
scopedを付与したところで、classが追加されスタイルが当たらなくなってしまいます。

<template> <section class="about"> <div class="container"> <form action="#" class="form"> <div class="input__item-wrapper"> <!-- Buefy Input --> <b-field label="インプット" class="input__item"> <b-input v-model="name" class="input"></b-input> </b-field> <!-- Buefy Select --> <b-field label="セレクト" class="input__item"> <b-select placeholder="Select a name"> <option v-for="option in data" :value="option.id" :key="option.id" >{{ option.document }}</option > </b-select> </b-field> </div> </form> </div> </section> </template> <script> export default { name: "home", data() { const data = [ {document: "doc1"}, {document: "doc2"}, {document: "doc3"} ]; return { data, name }; } }; </script> <style> <!-- 例ですが、以下のようなスタイルが当たらなくなります --> .label { color: #fff; font-size: 1.6rem; } .input { padding: 20px 0; width: 200px; height: 30px; padding: 0; text-indent: 8px; font-size: 1.4rem; } select { width: 200px; padding: 0; text-indent: 8px; padding: 20px; } </style>

試したこと

グローバルのcssが影響しているのかと思い、すべてコマンドアウトしてみましたが関係なさそうでした。
styleタグににscopedを付与したのち、新たに追加されていたclassにスタイルを当ててみましたが、当たるもの、当たらないものがありました。

補足情報(FW/ツールのバージョンなど)

"buefy": "^0.7.2", "vue": "^2.5.22", "vue-router": "^3.0.1"

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

scopedをつけて、子コーポネント(buefy)へスタイルを当てたい時は
>>> をつけてみてはいかがでしょうか。

ディープセレクタについて

投稿2019/06/15 12:46

sofu

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問