◯上記のような投稿フォームを実装したい！ 【模範解答】 ☆app/views/messages/_main_chat.html.erb のformクラス以下 <div class="form"> <div class="form-input"> <input class="form-message" placeholder= "type a message"> </div> <input class="form-submit" type="submit" value="送信"> </div> ☆app/assets/stylesheets/messages.cssのform部分 .form {…

◯上記のようなデザインを作成したい！！ 【模範解答】 ☆app/views/messages/_side_bar.html.erb <div class="side-bar-header"> <div class="header-name"> <a href="#">Tom</a> </div> <div class="create-room"> <a href="#">チャットを作成する</a> </div> </div> <div class="rooms"> </div> 3行目と6行目ですが、現時点ではリンクは仮置きのため「#」としている。 ☆app/assets/stylesheet…

◯上記のようにページをデザインしたい！ 【模範解答】 ☆app/views/messages/_main_chat.html.erb <div class="chat-header"> </div> <div class="messages"> </div> <div class="form"> </div> ☆app/views/messages/_side_bar.html.erb <div class="side-bar-header"> </div> <div class="rooms"> </div> ☆app/assets/stylesheets/messages.css wrap…

①完成形 ○上記デザインになるようにHTMLとCSSを記述したい！ 【模範解答】 ☆app/views/messages/index.html.erb <div class="wrapper"> <div class="side-bar"> <%= render "side_bar" %> </div> <div class="chat"> <%= render "main_chat" %> </div> </div> ☆app/assets/stylesheets/messages.css .wrapper { display: flex; } .side-bar { …

部分テンプレートとは、複数のビューファイルの中で使われている部分を一つのビューファイルとして管理する時に使う。 ○部分テンプレートを作成する ・部分テンプレートとしてビューファイルを作成する時は「_sidemenu.html.erb」のようにファイル名の前に_…