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

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

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

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

Ruby on Rails

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

Q&A

解決済

1回答

209閲覧

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

prodaigo

総合スコア38

Ruby

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

Ruby on Rails

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

0グッド

0クリップ

投稿2022/05/08 03:28

前提

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

実現したいこと

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

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

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

該当のソースコード

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

show.html.erb

1<%= render 'shared/header' %> 2 3<div class="hair-style-details"> 4 <h1 class="hair-style-title">HAIR STYLE</h1> 5 <div class="hair-style-detail"> 6 <div class="top-detail"> 7 <div class="left-hair-image"> 8 <%= image_tag @hair.image, class: "main-hair-image" %> 9 <h2>FRONT</h2> 10 </div> 11 <div class="right-hair-image"> 12 <%= image_tag @hair.image, class: "sub-hair-image" %> 13 <h2>SIDE</h2> 14 <%= image_tag @hair.image, class: "sub-hair-image" %> 15 <h2>BACK</h2> 16 </div> 17 </div> 18 <div class="bottom-detail"> 19 <div class="style-name"> 20 <i class="fa-solid fa-scissors"></i><%= @hair.style_name %> 21 </div> 22 <div class="style-genre"> 23 <%= @hair.gender.name %> / <%= @hair.genre.name %> 24 <div> 25 </div> 26 </div> 27 <% if user_signed_in? && current_user.admin? %> 28 <div class="hair-style-detail-btn"> 29 <div class='edit-delete-btn'> 30 <%= link_to 'Edit', "#" %> 31 </div> 32 <div class='edit-delete-btn'> 33 <%= link_to 'Delete', "#", method: :delete %> 34 </div> 35 </div> 36 <% end %> 37</div> 38 39<%= render 'shared/footer' %>

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

show.html.erb

1<%= render 'shared/header' %> 2 3<div class="staff-details"> 4 <h1 class="staff-detail-title">STAFF</h1> 5 <div class="staff-detail"> 6 <div class="left-detail"> 7 <%= image_tag @staff.image, class: "staff-detail-image" %> 8 </div> 9 <div class="right-detail"> 10 <div class="staff-detail-name"> 11 <%= @staff.name %> 12 </div> 13 <div class="staff-detail-position"> 14 <%= @staff.position.name %> 15 </div> 16 <div class="staff-detail-hobby"> 17 <i class="fa-solid fa-scissors"></i>hobby: <%= @staff.hobby %> 18 </div> 19 <div class="staff-detail-introduction"> 20 <i class="fa-solid fa-scissors"></i>comment:<br><%= @staff.introduction %> 21 </div> 22 <div class="staff-detail-sns"> 23 <div class="upper-sns"> 24 <div class="staff-twitter"> 25 <a href="#"><i class="fa-brands fa-twitter fa-fw"></i>Twitter</a> 26 </div> 27 <div class="staff-facebook"> 28 <a href="#"><i class="fa-brands fa-facebook fa-fw"></i>facebook</a> 29 </div> 30 </div> 31 <div class="bottom-sns"> 32 <div class="staff-instagram"> 33 <a href="#"><i class="fa-brands fa-instagram fa-fw"></i>Instagram</a> 34 </div> 35 <div class="staff-youtube"> 36 <a href="#"><i class="fa-brands fa-youtube fa-fw"></i>YouTube</a> 37 </div> 38 </div> 39 </div> 40 </div> 41 </div> 42 <% if user_signed_in? && current_user.admin? %> 43 <div class="staff-detail-btn"> 44 <div class='edit-delete-btn'> 45 <%= link_to 'Edit', edit_staff_path(@staff.id) %> 46 </div> 47 <div class='edit-delete-btn'> 48 <%= link_to 'Delete', staff_path(@staff.id), method: :delete %> 49 </div> 50 </div> 51 <% end %> 52</div> 53 54<%= render 'shared/footer' %>

共通部分

application.html.erb

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>SalonApp</title> 5 <meta name="discription" content="おしゃれなサロンのサイトです"> 6 7 <%= csrf_meta_tags %> 8 <%= csp_meta_tag %> 9 10 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 11 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 12 <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"> 13 <link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet"> 14 </head> 15 16 <body> 17 <%= yield %> 18 </body> 19</html>

試したこと

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

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

Rails 6.0.4.7
ruby 2.6.5

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

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

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

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

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

guest

回答1

0

自己解決

失敗しているビューの25行目が間違ってました。

<div>→</div>

投稿2022/05/09 02:01

prodaigo

総合スコア38

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問