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

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

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

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

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

717閲覧

【HTML, CSS, Rails】showアクションが実行されるとなぜかレイアウトが崩れる

Boston12121

総合スコア10

Ruby on Rails

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

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2020/01/21 19:06

編集2020/01/22 09:36

index 投稿一覧表示
show 各ユーザーの投稿一覧

indexページは正常にレイアウトが反映されるのですが、
showページに遷移するとなぜかカラム落ちが発生します。
CSSにはmargin等の設定はしていないので、Bootstrapの幅100%はこえていることはないと思います。
showアクションでの処理内容はユーザーが投稿したデータを取得してビューで詳細表示させています。

showだけ崩れるのはRails特有のものなんでしょうか?

showアクション、ビューに関係する何らかが影響していると思うのですが、原因がわかりません。

controllers/users_controller.rb class UsersController < ApplicationController before_action :authenticate_user!, only: [:show] def index @user = User.find(params[:id]) @images = @user.images end def show @user = User.find(params[:id]) @images = @user.images end end
config/routes devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' } resources :users get "/users/:id" => "users#show" end
users/show.html.erb (yieldから) <%=current_user.id%>.<%=current_user.name%>さんの投稿履歴 <!--show.html.erbは今回の現象と関係ないかもです。-->

**追記**
すみません。yieldで表示されてるところしか載せていませんでした。
application.html.erbを追加しました。

<!DOCTYPE html> application.html.erb <html> <head> <div id="headerbg"> <!--<img src="../assets/title.jpg">--> <title>railsサイト</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <!--lightbox--> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <!-- Stylesheets --> <link rel="stylesheet" href="assets/style.css"/> </div> <!--js読み込み--> <%= javascript_include_tag 'application' %> <%= javascript_include_tag 'acc.js' %> </head> <body><div class="wrap"> <div class="container"> <div class="row"> <header> <div class="col-xs-12 col-sm-12 col-md-12"><%= link_to root_path do%><%=image_tag "image.png"%><%end%></div> </header> </div> <div class="row"> <!--content ここにshowとindex--> <div class="content content_post col-md-8 offset-md-1"> <%= yield %> </div> <div class="sidebar col-md-4 d-none d-lg-block "> <!--ログイン--> <div class="side-1 sidebar msr_box03 "> <h3 class="ttl"><div style="font-weight: bold; font-size: 23px;">ログイン</div></h3><br> <div class="inside"> <%if user_signed_in? %> <%=current_user.id%>.<%=current_user.name%>さん<br> <%= link_to "ログアウト",destroy_user_session_path, method: :delete,:style=>"color:#007BBB;" %> <%= link_to "マイページ","/users/#{current_user.id}" %> <%else%> <%= link_to 'Twitterでログイン', user_twitter_omniauth_authorize_path,:style=>"color:#007BBB;" %> <%end%> </div> </div> <!--サイド--> <div class="side-2 sidebar msr_box03 "> <h3 class="ttl"><div style="font-weight: bold; font-size: 23px;">サイド</div></h3> <div class="inside"> サイド </div> </div> <!--サイド--> <div class="side-3 sidebar msr_box03 "> <h3 class="ttl"><div style="font-weight: bold; font-size: 23px;">サイドタイトル</div></h3><br> <div class="inside">サイド <%= link_to "詳細確認", "/intro",:style=>"color:#007BBB;" %></div> </div> </div> <div id="footerWrap"> <div id="footer"> フッター </div><!--id="footer"--> </div><!--id="footerWrap"--> </div><!--class="row"--> </div><!--class="container"--> </body> </html>
_flash.html.erb <% flash.each do |message_type, message| %> <div class="alert alert-<%= message_type %>" role="alert" style="text-align:center"><%= message %></div> <% end %>

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

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

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

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

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

maisumakun

2020/01/21 22:36

show.html.erbで表示されるものはこれだけなのでしょうか。 「カラム落ちする」というのであれば、崩れるタグを表示できるコードは書いてください(現状では、HTMLタグすら出力されていません)。
guest

回答1

0

自己解決

すみません。自己解決しました。
結構無理やり感がありますが、コントローラー毎にレイアウトファイル作成、指定してあげたら、うまくいきました。

controllers/users_controller.rb #追加 layout 'レイアウトファイル名'

何故コントローラー毎にlayoutファイルを設定しないといけないのかわかりませんが。。
layoutファイルはコントローラ毎に指定してあげないといけないんでしょうか。わかる方がいらっしゃいましたら教えてほしいです。

投稿2020/01/22 10:17

Boston12121

総合スコア10

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問