あっさり読むrails③（クラス）

はじめに

前回の記事にて、
もちろんこのままだと味気ないので、実際にはclassを設定したり、他のメソッドを使用することになりますと書きました。
本記事では、そのclassを設定するの部分を実行しようと思います。

実行

前回使用したコードを改良しようと思います。今の所、コードは下記の通りです。

- @products.each do |product|
  = product.name
  = product.price
  = image_tag(product.image)

まずは、name,price,imageをひとまとめにするクラスを作ります。

index.html.haml

- @products.each do |product|
  .product
    = product.name
    = product.price
    = image_tag(product.image)

これで、テーブルに登録してあるだけの、name,price,imageの3要素を持ったproductclassのオブジェクトが作られます。
この状態では、nameとpriceでフォントを変えたり、imageの大きさを変更したり、といったことが難しいので、要素毎にclassを設定します。

index.html.haml

- @products.each do |product|
  .product
    = product.name, class: "product__name"
    = product.price, class: "product__price"
    = image_tag(product.image, class: "product__image")