Q&A
railsで記事投稿アプリを作っています。触れて3ヶ月程度の初学者です。
トップページ（index.html.erb）に対して左にメニューを表示、右にコンテンツを表示させ、左のメニューをクリックすると右のコンテンツが切り替わる、というページを作りたいです。
さまざまにHTMLやCSSを書き換えてみているのですが、左にリンクを用意してクリックすると画面全体が遷移してしまい、右側に表示させる事ができずに困っています。
htmlのフレーム要素を使えば恐らく一発なのですが、可能な限り使いたくありません（おそらくスマートな仕上がりにならないと思っているので）。
また、表示させる内容に使い回しが多いのと、個人的に作りやすく感じるという理由で、indexへの表示物は部分テンプレートで内容を別々に作ったものをrenderメソッドで呼び出すという方法を取っています。
この制作環境でこの要件を満たせるいい方法はなにかありませんでしょうか…。ご教授お願いいたします。
index.html.erb
<!DOCTYPE html> <html> <head> ~略~ </head> <%= render "shared/header" %> <%# ヘッダー読み込み%> <body> <div class="layout-frame"> <div class="main"> <%= render "shared/main" %> </div> <div class="content-frame"> <div class="side-bar"> <%= render "shared/side_bar" %> </div> <div class="main-contents"> <%= render "shared/contents" %> </div> </div> </div> </body> <%= render "shared/footer" %> <%# フッター読み込み%> </html>
※現在はshared/mainという大枠にshared/side_bar（左）とshared/contents（右）を置いているイメージの作りになっている
CSS
.layout-flame { display: block; } .content-frame{ display: flex; } .main-contents{ width: calc(100% - 250px); } .side-bar { background-color: #253141; width: 250px; height: 100vh; text-align: center; } .main { width: calc(100vw - 250px); }
回答1件
0
ベストアンサー
画面を遷移させない方法も有りますが、最初は遷移させたほうが作りやすいでしょう。
遷移先も同じviewを使えば見た目は同じになりますが、それではだめですか？
このviewをコピペしてもよいですが
このviewを views/applidation におき、render file: 'そのfile名'
コンテンツ部分を各々のcontrollerに応じたviewに置いておけばよいです。
ただ
<div class="main-contents"> <%= render "shared/contents" %> </div>
この部分は
<div class="main-contents"> <%= render @それぞれの名前 %> </div>
という具合にpartialファイル名を渡すことにします。
投稿2020/11/30 13:38
総合スコア23567
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。