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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

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

Bootstrap

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

CSS

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

Q&A

解決済

2回答

3583閲覧

Railsでスタイルが崩れた対処法

minipe555

総合スコア18

Ruby on Rails 5

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

Bootstrap

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

CSS

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

0グッド

0クリップ

投稿2019/08/14 05:27

前提・実現したいこと

Railsで家計簿アプリを作成中です。
レイアウトが崩れてしまった原因を教えて頂けますでしょうか。

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

それまで正常に反映されていたスタイルが崩れました。
崩れる前に、最後に実施したことは以下です。

・homebrewでyarnのインストール
・chart-js-rails gemを追加・インストール
・yarnでchart.jsをインストール

現在は、

・chart-js-railsの削除・アンインストール
・chart.jsのアンインストール

を実施済みです。

###キャプチャ
・正しく表示されている画面
イメージ説明
・スタイルが崩れた画面
イメージ説明

該当のソースコード

View

<div class="container pt-3 text-center"> <h2>家計簿一覧</h2> </div> <div class="row py-3 h-75 justify-content-center"> <div class="card" style="width:calc(20% - .25rem)"> <div class="card-body"> <p><%= link_to "前月",payments_path(month: @month.prev_month) %></p> <% if @month < Date.today %> <p><%= link_to "次月",payments_path(month: @month.next_month) %></p> <% end %> <h3><%= @month.month %>月</h3> </div> </div> </div> <div class="container"> <div class="row px-0 py-3 justify-content-center"> <div class="col-sm-3 px-0"> <div class="card"> <div class="card-body"> <h3 class="text-center">支払総額</h3> </div> </div> </div> <div class="col-sm-3 px-0"> <div class="card"> <div class="card-body"> <h3 class="text-center"><%= sum_payment %>円</h3> </div> </div> </div> </div> </div> <%= link_to "支払い登録", new_payment_path, class: "btn btn-warning w-25 mx-3" %> <a class="btn btn-success w-25 mx-3" href="signup" role="button">傾向チェック</a> <div class="container"> <div class="row"> <div class="col-sm-6 px-0 mt-3"> <div class="text-right"> <a class="btn btn-warning w-50 mx-3" href="payments/new" role="button">支払い登録</a> </div> </div> <div class="col-sm-6 px-0 mt-3"> <div class="text-left"> <a class="btn btn-success w-50 mx-3" href="payments/new" role="button">傾向チェック</a> </div> </div> </div> </div> <div class="row py-3 justify-content-center"> <div class="card" style="width:calc(50% - .25rem)"> <div class="card-body"> <div class="table-responsive"> <table class="table table-bordered mb-3"> <thead class="thead-dark"> <tr> <th class="text-center"><%= Payment.human_attribute_name(:created_at) %></th> <th class="text-center"><%= Payment.human_attribute_name(:item) %></th> <th class="text-center"><%= Payment.human_attribute_name(:price) %></th> <th class="text-center"><%= Payment.human_attribute_name(:category) %></th> <th></th> <th></th> </tr> </thead> <% @payments.each do |payment| %> <tr> <td class="text-center"><%= payment.created_at.strftime('%Y/%m/%d') %></td> <td class="text-center"><%= payment.item %></td> <td class="text-right"><%= payment.price %></td> <td class="text-center"><%= payment.category %></td> <td class="text-center"><%= link_to '編集', edit_payment_path(payment) %></td> <td class="text-center"><%= link_to '削除', payment, method: :delete, data: { confirm: "本当に削除しますか?"} %></td> </tr> <% end %> </table> </div> <div class="row py-3 justify-content-center"> <%= paginate @payments %> </div> </div> </div> </div>

application.css.scss

@import "bootstrap";

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's // vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require rails-ujs //= require activestorage //= require turbolinks //= require_tree . //= require bootstrap //= require jquery3 //= require popper //= require bootstrap-sprockets

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

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

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

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

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

guest

回答2

0

自己解決

app/stylesheets配下に不要なcssファイルが存在していました。
それらを削除することで解決しました。

ただし、不要なファイルが存在していても、正常にスタイルが反映されていた時期もあったため、
何の拍子に不要ファイルが読み込まれ始めたのかが不明です。

投稿2019/08/14 06:10

minipe555

総合スコア18

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

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

0

見た感じBootStrapがあたっていない感じがします。
インストールしたりアンインストールしたりされているようですが、
何かの拍子に削除してしまったとかではないですか?

投稿2019/08/14 05:54

編集2019/08/14 05:54
m.ts10806

総合スコア80765

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

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

minipe555

2019/08/14 06:02

ありがとうございます。 一応、gem listをしたところ、インストールはされているようです。 bootstrap (4.3.1, 4.1.3) bootstrap-sass (3.4.1, 3.3.7) bootstrap-will_paginate (1.0.0) *stylesheetでもimport済み 微妙に当たっている部分(緑のボタン)もある感じなのですが、他にお心当たりございますでしょうか。
m.ts10806

2019/08/14 06:06

一部だけあたるというのは考え難いですね。 ブラウザのデベロッパツールのコンソールにエラーが出ていませんか?
minipe555

2019/08/14 06:12

上記に記載した方法で解決しました。 ご親切に相談に乗ってくださり、ありがとうございまいます。 デベロッパツールは触っていなかったです。 そこを見れば、もっと早く解決に至ったかもしれないので、今後、見てみようと思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問