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

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

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

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

HTML5

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

Ruby on Rails

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

Bootstrap

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

Q&A

解決済

2回答

1618閲覧

[rails] html↔erbの変換がしたい

Ayustak

総合スコア30

Ruby

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

HTML5

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

Ruby on Rails

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

Bootstrap

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

0グッド

0クリップ

投稿2020/09/26 04:01

rails6
bootstrap4

テンプレからコピペしたモーダルウィンドウを開くボタンと、erbで記述したボタンをグループ化してきれいに並べるために、html↔erbの変換を行いたいです。
現在は画像のように角に隙間ができてしまっています。
イメージ説明

<div class="btn-group btn-group-sm mt-1">  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModalScrollable">参加者一覧</button> <%= button_to "参加する", recruit_leave_path, method: :delete, class: "btn btn-info" %> </div>

erbの記述を<button type="button">で囲むと角の隙間が無くなることは確認したので、erbの中でhtmlタグを<button>に指定するか、モーダルボタンの記述をerbに変換出来れば解決すると思ったのですが、どちらも調べつつ色々試しましたが、うまくいきませんでした。アドバイス頂けると助かります。

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

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

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

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

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

guest

回答2

0

とりあえず角にすきまなどの見た目の問題は、CSSの設定がほとんどとなります。
今回Bootstrapをご利用とのことなので、下記を参考に各ボタンのクラスを適宜設定いただければ、勉強にもなりつつ、期待通りの結果を得ることができるかと思います。

https://getbootstrap.jp/docs/4.2/utilities/borders/#border-radius

投稿2020/09/26 04:11

no1knows

総合スコア3365

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

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

0

自己解決

button_toをlink_toに変更したら普通に直りました。。

<%= link_to "参加する", recruit_join_path, method: :post, class: "btn btn-info" %>

投稿2020/09/26 23:15

Ayustak

総合スコア30

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問