<<前 [TOP] 次>>
まずはスタイルシートを実装します。
実装するスタイルシートは「C:\Rails6\work\shop\app\assets\stylesheets」フォルダにある「goods.scss」ファイルです。
【C:\Rails6\work\shop\app\assets\stylesheets\goods.scss】
// Place all the styles related to the goods controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: https://sass-lang.com/ h1:first-letter { font-size: 2em; color: #7172ac; } h1 { position: relative; color: #333333; text-shadow: 0 0 2px white; } h1:before { content: ""; position: absolute; background: #9de5ff; width: 50px; height: 50px; border-radius: 50%; top: 50%; /* border: dashed 1px white; */ left: -15px; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; } table { width: auto; border-spacing: 0; font-size:14px; } table th { color: #fff; padding: 8px 15px; background: #7172ac; background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%); background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9))); font-weight: bold; border-left:1px solid #258; border-top:1px solid #258; border-bottom:1px solid #258; line-height: 120%; text-align: center; text-shadow:0 -1px 0 rgba(34,85,136,0.9); box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset; } table th:first-child { border-radius: 5px 0 0 0; } table th:last-child { border-radius:0 5px 0 0; border-right:1px solid #258; box-shadow: 2px 2px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset; } table tr td { padding: 8px 15px; border-bottom: 1px solid #84b2e0; border-left: 1px solid #84b2e0; text-align: center; } table tr td:last-child { border-right: 1px solid #84b2e0; box-shadow: 2px 2px 1px rgba(0,0,0,0.1); } table tr { background: #fff; } table tr:nth-child(2n+1) { background: #f1f6fc; } table tr:last-child td { box-shadow: 2px 2px 1px rgba(0,0,0,0.1); } table tr:last-child td:first-child { border-radius: 0 0 0 5px; } table tr:last-child td:last-child { border-radius: 0 0 5px 0; } table tr:hover { background: #fffafa; cursor:pointer; } .btn { position: relative; display: inline-block; font-weight: bold; padding: 12px 0 8px; text-decoration: none; color: #67c5ff; transition: .4s; } .btn:before{ position: absolute; content: ''; width: 100%; height: 4px; top:100%; left: 0; border-radius: 3px; background:#67c5ff; transition: .2s; } .btn:after{ position: absolute; content: ''; width: 100%; height: 4px; top:0; left: 0; border-radius: 3px; background:#67c5ff; transition: .2s; } .btn:hover:before { top: -webkit-calc(100% - 3px); top: calc(100% - 3px); } .btn:hover:after { top: 3px; } body { background-color: #fff; color: #333; margin: 33px; font-family: verdana, arial, helvetica, sans-serif; font-size: 13px; line-height: 18px; } p, ol, ul, td { font-family: verdana, arial, helvetica, sans-serif; font-size: 13px; line-height: 18px; } pre { background-color: #eee; padding: 10px; font-size: 11px; } div { &.field, &.actions { margin-bottom: 10px; } } #notice { color: green; } .field_with_errors { padding: 2px; background-color: red; display: table; } #error_explanation { width: 450px; border: 2px solid red; padding: 7px 7px 0; margin-bottom: 20px; background-color: #f0f0f0; h2 { text-align: left; font-weight: bold; padding: 5px 5px 5px 15px; font-size: 12px; margin: -7px -7px 0; background-color: #c00; color: #fff; } ul li { font-size: 12px; list-style: square; } } label { display: block; } tr.list_line_odd { background: #effeef; } td.action { ul { padding: 0; list-style: none; } li { padding: 0.5em 0.5em; } } td.description { h1 { font-size: 1.4em; } }
これだけでも外観がかなり変わります。
ブラウザで「http://localhost:3000/goods」にアクセスして確認してみます。
Railsはすべてのスタイルシートを一度に読み込むので、そのコントローラに関連するページだけに制限するための制約が必要になります。
そのためには「controller_name」をclass属性の値として使うのが簡単です。
「C:\Rails6\work\shop\app\views\layouts」フォルダにある「application.html.erb」ファイルを以下のように編集します。
文字コードを「UTF-8」で保存するのを忘れないようにしてください。
【C:\Rails6\work\shop\app\views\layouts\application.html.erb】
<!DOCTYPE html> <html> <head> <title>Railsはじめてマート</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <main class='<%= controller.controller_name %>'> <%= yield %> </main> </body> </html>
続いて表ベースのテンプレートを編集します。
「C:\Rails6\work\shop\app\views\goods」フォルダにある「index.html.erb」を以下のように編集します。
【C:\Rails6\work\shop\app\views\goods\index.html.erb】
<% if notice %> <aside id="notice"><%= notice %></aside> <% end %> <h1>Railsはじめてマート</h1> <br> <table> <thead> <tr> <th colspan="3">商品一覧</th> </tr> </thead> <tfoot> <tr> <td colspan="3"> <h2><%= link_to '商品登録', new_good_path %></h2> </td> </tr> </tfoot> <tbody> <% @goods.each do |good| %> <tr class="<%= cycle('list_line_odd', 'list_line_even') %>"> <td class="image"> <%= image_tag(good.image_url, class: 'list_image', width: 180) %> </td> <td class="description"> <h1><%= good.goods_id %></h1> <h2><%= good.title %></h2> <p> <%= truncate(strip_tags(good.description), length: 50) %> </p> <p><%= (good.price).to_i %>円</p> <p><%=h ((good.date).to_date).strftime('%Y年%m月%d日') %></p> <p><%= good.maker %></p> <p><%= good.category %></p> </td> <td class="action"> <ul> <li><h2><%= link_to '詳細', good %></li></h2> <li><h3><%= link_to '編集', edit_good_path(good) %></h3></li> <li><h3> <%= link_to '削除', good, method: :delete, data: { confirm: '本当に削除しますか？' } %> </h3></li> </ul> </td> </tr> <% end %> </tbody> </table>
画像ファイルを格納する場所は「C:\Rails6\work\shop\app\assets\images」フォルダです。
リストの各行の背景色が交互に変化するようにRailsの「cycle()」ヘルパーメソッドを使用しています。
各行にCSSクラスの「list_line_even」または「list_line_odd」を設定する時に連続する行に対するスタイル名を自動的に交互に切り替えています。
「truncate()」ヘルパーを使用しているのは、説明の最初の５０文字だけを表示するためです。
「truncate()」を呼び出す前に「strip_tags()」を呼び出して説明の内容からHTMLタグを削除しています。
ブラウザで「http://localhost:3000/goods」にアクセスして外観が変わったのを確認します。
↓↓クリックして頂けると励みになります。
