質問編集履歴

2 tuika

Boston12121

Boston12121 score 10

2020/01/22 18:36  投稿
【HTML, CSS, Rails】showアクションが実行されるとなぜかレイアウトが崩れる
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 %>  
 
 
```
  • HTML

    24147 questions

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

  • CSS

    17238 questions

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

  • Ruby on Rails

    19351 questions

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

  • Bootstrap

    2587 questions

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

Boston12121

Boston12121 score 10

2020/01/22 18:15  投稿
【HTML, CSS, Rails】showアクションが実行されるとなぜかレイアウトが崩れる
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
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>
```
  • HTML

    24147 questions

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

  • CSS

    17238 questions

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

  • Ruby on Rails

    19351 questions

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

  • Bootstrap

    2587 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る