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

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

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

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

Ruby on Rails

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

解決済

【Rails】部分テンプレートが思い通りの位置に挿入できない

prodaigo
prodaigo

総合スコア31

Ruby

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

Ruby on Rails

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

1回答

0評価

0クリップ

80閲覧

投稿2022/05/08 03:28

前提

現在、RubyonRailsを用いてオリジナルのアプリケーションを作成しています。
その作成中にタイトルのようなことで躓いています。
言葉足らずで申し訳ございませんが、解決に繋がる意見が欲しいです。
よろしくお願いします。

実現したいこと

div要素の外にfooterが挿入されている状態
イメージ説明

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

直前に記述したでdiv要素の外でfooterの部分テンプレートを呼び出しているのに、
特定のビューだけ上に記述したdiv要素(hair-style-detail)に含まれてしまう。
イメージ説明

該当のソースコード

失敗しているビューの記述

show.html.erb

<%= render 'shared/header' %> <div class="hair-style-details"> <h1 class="hair-style-title">HAIR STYLE</h1> <div class="hair-style-detail"> <div class="top-detail"> <div class="left-hair-image"> <%= image_tag @hair.image, class: "main-hair-image" %> <h2>FRONT</h2> </div> <div class="right-hair-image"> <%= image_tag @hair.image, class: "sub-hair-image" %> <h2>SIDE</h2> <%= image_tag @hair.image, class: "sub-hair-image" %> <h2>BACK</h2> </div> </div> <div class="bottom-detail"> <div class="style-name"> <i class="fa-solid fa-scissors"></i><%= @hair.style_name %> </div> <div class="style-genre"> <%= @hair.gender.name %> / <%= @hair.genre.name %> <div> </div> </div> <% if user_signed_in? && current_user.admin? %> <div class="hair-style-detail-btn"> <div class='edit-delete-btn'> <%= link_to 'Edit', "#" %> </div> <div class='edit-delete-btn'> <%= link_to 'Delete', "#", method: :delete %> </div> </div> <% end %> </div> <%= render 'shared/footer' %>

成功しているビューの記述

show.html.erb

<%= render 'shared/header' %> <div class="staff-details"> <h1 class="staff-detail-title">STAFF</h1> <div class="staff-detail"> <div class="left-detail"> <%= image_tag @staff.image, class: "staff-detail-image" %> </div> <div class="right-detail"> <div class="staff-detail-name"> <%= @staff.name %> </div> <div class="staff-detail-position"> <%= @staff.position.name %> </div> <div class="staff-detail-hobby"> <i class="fa-solid fa-scissors"></i>hobby: <%= @staff.hobby %> </div> <div class="staff-detail-introduction"> <i class="fa-solid fa-scissors"></i>comment:<br><%= @staff.introduction %> </div> <div class="staff-detail-sns"> <div class="upper-sns"> <div class="staff-twitter"> <a href="#"><i class="fa-brands fa-twitter fa-fw"></i>Twitter</a> </div> <div class="staff-facebook"> <a href="#"><i class="fa-brands fa-facebook fa-fw"></i>facebook</a> </div> </div> <div class="bottom-sns"> <div class="staff-instagram"> <a href="#"><i class="fa-brands fa-instagram fa-fw"></i>Instagram</a> </div> <div class="staff-youtube"> <a href="#"><i class="fa-brands fa-youtube fa-fw"></i>YouTube</a> </div> </div> </div> </div> </div> <% if user_signed_in? && current_user.admin? %> <div class="staff-detail-btn"> <div class='edit-delete-btn'> <%= link_to 'Edit', edit_staff_path(@staff.id) %> </div> <div class='edit-delete-btn'> <%= link_to 'Delete', staff_path(@staff.id), method: :delete %> </div> </div> <% end %> </div> <%= render 'shared/footer' %>

共通部分

application.html.erb

<!DOCTYPE html> <html> <head> <title>SalonApp</title> <meta name="discription" content="おしゃれなサロンのサイトです"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet"> </head> <body> <%= yield %> </body> </html>

試したこと

・他のビューとの比較
→違うのはクラス名くらいで間違いには気づかず

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

Rails 6.0.4.7
ruby 2.6.5

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Ruby

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

Ruby on Rails

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