Railsで架空のCafeのHPを作ってみよう!【10日目】『deviseのform_forにクラス名をつける』編

概要

基本Railsの記法に則り書いていきます！
１から全ての説明ではなく
その中であれ？どうやるの？と
疑問に思った点や実装に困った箇所を
ピックアップして紹介していきます♩

設定と準備

・Rails
・HTML
・CSS
・Javascript(jQuery)

↑上記の言語とフレームワークを使い
架空(自分で考えたテキトーなもの)のCafeの
HPを作っていこうと思います！

10日目の作業内容

・ビューの作成

10日目の気になった箇所

deviseを導入しdeviseで用意されたviewを使いつつ
自分でレイアウトしたいがclass名の付与がうまくいかない。

仮説

<%= %>←railsの記法であるこの形は

タグと同じ扱いになるため
クラス名を付与すればcssファイルを使い編集することことが可能なため

views/registrations/new.html.erb

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>

  <%= f.email_field :email, autofocus: true, autocomplete: "email" %>

  <%= f.password_field :password, autocomplete: "new-password" %>

  <%= f.password_field :password_confirmation, autocomplete: "new-password" %>

  <%= f.submit "Sign up" %>

<% end %>

これらにクラス名を付与していけば編集が可能だと思われる。
しかし、上手くclass名が付与できない。
(上記のマークダウンはsign inするのに最小限必要なものだけを抜き出して記述しております)

結論

今回の場合、
class名の書き方が<%= form_for %>と<%= f. %>で異なることがわかった。

views/registrations/new.html.erb

form_forの場合

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: {class:"sample"}) do |f| %>

<% end %>

このように html: {class:""} という記述が必要になる。
(今回の場合sampleというclass名を付与)

views/registrations/new.html.erb

f. の場合
  <%= f.submit "Sign up", class:"sample" %>

こちらはclass:""とすることでclass名の付与ができる。

今回formのブロック変数であるfを使った場所に対してのclass名付与でしたが
railsの記法である<%= %>も同じようにclass名を付与できます。

例)
<%= @sample.name, class:"sample" %>

form_forの場合や私が確認した中ですとactive hashを使ったものの場合などは
class名の付与が違う場合があるので気をつけましょう！