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

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

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

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

Ruby

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

746閲覧

#textがHTMLに表示される

tomomomo

総合スコア22

Ruby on Rails 5

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

Ruby

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/10/05 00:55

編集2021/10/05 00:59

問題

eachメソッドで各ユーザーのpostを表示させるページで、投稿した時に全てのカラムが#textという形で表示されているのを検証ツールで見つけました。
each文の部分をコメントアウトしたときに消えたので問題はその中にあると考えられます。
以下該当コードです。

HTML

1<%= @posts.each do |post| %> 2 <div class="project-box-wrapper "> 3 <div class="project-box " style="background-color: #fee4cb; "> 4 <div class="project-box-header "> 5 <span><%= link_to_if post.user, post.user.name, user_path(post.user.id) %></span> 6 <div class="more-wrapper "> 7 <button class="project-btn-more "> 8 <svg xmlns="http://www.w3.org/2000/svg " width="24 " height="24 " viewBox="0 0 24 24 " fill="none " stroke="currentColor " stroke-width="2 " stroke-linecap="round " stroke-linejoin="round " class="feather feather-more-vertical "> 9 <circle cx="12 " cy="12 " r="1 " /> 10 <circle cx="12 " cy="5 " r="1 " /> 11 <circle cx="12 " cy="19 " r="1 " /> 12  </svg> 13  </button> 14 </div> 15 </div> 16 <div class="project-box-content-header"> 17 <p class="box-content-header "><%=safe_join(post.body.split("\n"),tag(:br))%></p> 18 </div> 19 <div class="box-progress-wrapper "> 20 <p class="box-progress-header ">Progress</p> 21 <div class="box-progress-bar "> 22 <span class="box-progress " style="width: 60%; background-color: #ff942e "></span> 23 </div> 24 <p class="box-progress-percentage ">60%</p> 25 </div> 26 <div class="project-box-footer "> 27 <div class="participants "> 28 <%= link_to attachment_image_tag(post.user, :profile_image, format: 'jpeg', size: "50x50", fallback: "no_image.jpg", size:'100x100'), user_path(post.user.id) %> 29 </div> 30 <div class="days-left " style="color: #ff942e; "> 31 2 Days Left 32 </div> 33 </div> 34 </div> 35 </div> 36<% end %>

インデントが少し汚くてすみません。。。

画像と余談

各レコードが表示されています。

本題とは少しそれますが、各投稿で改行が適用されるように

<%=safe_join(post.body.split("\n"),tag(:br))%>

のように本文を表示しているのですが、フォームで改行せずに文字を羅列した場合にeachで表示している枠から飛び出してしまいます。
何かいい方法がありましたらご提案いただきたいです。

以上、何卒よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

<%= @posts.each do |post| %>と書くと、最後に@postsそのものも出力されます。

<% @posts.each do |post| %>のように、ここの=は削ってください。

投稿2021/10/05 01:10

maisumakun

総合スコア145121

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

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

tomomomo

2021/10/05 01:49 編集

とても馬鹿なことをしていました。 ありがとうございます。再度見直しは徹底するようにいたします。 余談についてですが、 word-wrap: break-word; を親要素に追加して改行を自動にしたのですが、開業のあるなしによってbox-wrapperの大きさが変わってしまいます。 見た目的にどうなのかなと思いまして、この場合heightを固定などした方が良いのでしょうか? もちろんベストアンサーにさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問