🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2267閲覧

Railsにおいて、bootstrapでリンクの文字が白くならない理由を知りたい

k499778

総合スコア599

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/03/11 22:41

前提・実現したいこと

現在Railsを勉強中です。
Bootstrapでのデザイン適用をしていて、少し疑問に思ったことがあります。

RailsでBootstrapでボタンのデザインをしていましたが、クラス属性btn btn-primaryのみですと、リンク作成時にテキストの色が黒くなってしまいました。白くなってほしいのに。その理由が知りたいです。

発生している問題

イメージ説明

▼index.html.erb

html

1<a href="/questions/new" class="btn btn-primary text-white">New Question</a> 2<a href="/questions/new" class="btn btn-primary">New Question</a> 3<a href="#" class="btn btn-primary">New Question</a>

上記のようにBootstrapを使って、リンクをボタンに見せています。
・その際、クラス属性btn btn-primaryのみですと、文字色が黒くなってしまっています。(2つ目)
・クラス属性btn btn-primary text-whiteとして、color: #fff!important;が設定されると、さすがに文字色は白になります。(1つ目)
・href属性にパスが設定されず、となっていると、文字色は白くなります。(3つ目)

これを単純なHTMLで試すと、問題なく、3パターンとも文字色が白くなりました。
なのでRails環境内で行っていることが作用しているのかなと予想します
それがSCSSだから、コンパイルするからなのか、Rails特有の処理だからなのかは特定できていません。

デバッグツールで確認すると、2つ目のボタンもCSS自体はcolor:whiteが適用されています。
イメージ説明
なのに黒文字になるのが不思議です。

この現象を理解したいです。
もしわかる方がいれば教えていただけると助かります。
よろしくお願い致します。

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

bootstarap v5.0
ruby '2.6.6'
rails '6.1.3'

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

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

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

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

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

m.ts10806

2021/03/12 00:42

確かに提示のhtmlだけでは現象再現しませんね。テキストは白です。 一通りコード提示されたほうが良いかと思います。 Rails自体の仕様とは考えにくいです。あくまでバックグラウンドの話なので。
m.ts10806

2021/03/12 01:03

あれそんなに多いですか? ご自身が(設定も含め)書いたところで良いのですが
k499778

2021/03/12 01:13 編集

現在開発中のアプリの一部で起きた問題のためです。 今合間時間で対応しているため、少し他のファイルを削ぎ落とすのは時間がかかりそうです。後ほど対応します。 bootstrapに関わるところは以下です。 ・https://github.com/k49977/overseasQa/blob/master/app/views/questions/index.html.erbhttps://github.com/k49977/overseasQa/blob/master/app/views/layouts/application.html.erb#L12,#L18 スタイルシートに記述はしていますが、該当タグにはとくにスタイルは当てていないつもりです。 ・https://github.com/k49977/overseasQa/tree/master/app/assets/stylesheets
neko_daisuki

2021/03/12 09:00

heroku にアクセスしたらみっつのボタン全部のテキストが白になってます。 chrome 88.0.4324.190 firefox 86.0.1 edge 89.0.774.45 全部白でした。
k499778

2021/03/12 09:07

あれなんででしょう。 午前中にChromeで確認した際は真ん中だけ黒文字のはずだったのですが。。 ますます動きがわからない。。
k499778

2021/03/12 09:10

とスマホは確かに白になっていたのですが、 こちらのパソコンで真ん中だけ黒になっていますね。 Chromeです。バージョン: 89.0.4389.82
k499778

2021/03/12 09:11

今見たらスマホ(Safari)でみても真ん中は黒になっていますね
k499778

2021/03/12 09:13

ホバーしたら白文字になりますが、初期表示は黒文字になっています。
neko_daisuki

2021/03/12 09:33

application.css の a:visited { color: #666 } が効いてるみたいです。 いちどボタンをクリックしたらこの色になりました。 .text-white > a:visited > .btn-primary の順で優先されてるみたいです。
k499778

2021/03/12 09:37

おーありがとうございます!まさにそれっぽいですね! 修正してみます。visited擬似クラスはあまり馴染みがなかったです。 確認してみます!
k499778

2021/03/12 09:39

確認したところまさにそのとおりでした。ありがとうございます!
guest

回答1

0

自己解決

scaffold.scssで定義されていた

scss

1a:visited { 2 color: #666; 3}

が効いていました。訪問したことがあるリンクのスタイルを変えます。
あまり馴染みがなく、また擬似クラスのためデバッグツールでも確認が抜け落ちていました。

neko_daisukiさんに教えていただきました。ありがとうございます。

投稿2021/03/12 09:42

k499778

総合スコア599

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問