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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

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

Q&A

0回答

831閲覧

【Rails 初心者】Bootstrapのcardを使ってユーザー情報を表示させたい

T_akaki

総合スコア0

Ruby on Rails 6

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

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

0グッド

0クリップ

投稿2020/11/17 04:24

前提・実現したいこと

  • bootstrapのcardを使ってユーザー情報をページに表示したい

Rails6でオリジナルアプリを開発しています。
bootstrapで全体の見た目を作っていますが、cardを使ってトップページにユーザーの画像やプロフィール情報を反映させようとhtml.erbを編集したところ、ブラウザに編集内容が表示されません。エラーメッセージも出ていません。下記解決にご協力いただけますと幸いです。

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

・編集したerbの内容がブラウザに表示されない ・エラーメッセージ:なし

該当のソースコード

html

1<% if @users.present? %> 2 <% @users.each do |user| %> 3 <div class="card flex-sm-md-lg-xl-fill bd-highlight" style="width: 18rem;"> 4 <%= image_tag user.image, class:"bd-placeholder-img card-img-top", width:"100%", height:"180" %> 5 <ul class="list-group list-group-flush"> 6 <li class="list-group-item"><%= user.nickname %></li> 7 <li class="list-group-item"><%= user.genre %></li> 8 </ul> 9 <div class="card-body"> 10 <p class="card-text"><%= user.profile %></p> 11 </div> 12 <div class="card-body"> 13 <a href="#" class="card-link">Users page</a> 14 <a href="#" class="card-link">Like</a> 15 </div> 16 </div> 17 <% end %> 18 <% end %>

###上記の元になったbootstrapのソースコード(表示確認済み)

html

1<div class="card flex-sm-md-lg-xl-fill bd-highlight" style="width: 18rem;"> 2 <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">User image</text></svg> 3 <ul class="list-group list-group-flush"> 4 <li class="list-group-item">User name</li> 5 <li class="list-group-item">User genre</li> 6 </ul> 7 <div class="card-body"> 8 <p class="card-text">User profile</p> 9 </div> 10 <div class="card-body"> 11 <a href="#" class="card-link">Users page</a> 12 <a href="#" class="card-link">Like</a> 13 </div> 14 </div>

試したこと

  • '='がERBテンプレートからから抜けていないか確認
  • 該当ページに関連するcontroller.rb内で@userを正しく定義できているか確認
  • 元のソースコードと各要素のクラス名が合っているか確認
  • rails sでサーバーを再起動

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

  • 環境

Rails: 6.0.0
Ruby: 2.6.5
Bootstrap: 4.5
OS: macOS catalina 10.15.6

  • その他

元のソースコードや同ページのヘッダー、フッター、カルーセルなどはブラウザで問題なく表示されていましたので、bootstrapは導入できていると思われます。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問