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

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

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

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

Ruby on Rails 6

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

CSS

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

Q&A

解決済

1回答

892閲覧

[Ruby on Rails] CSSが反映されません

SRDR_never_myDT

総合スコア8

Ruby

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

Ruby on Rails 6

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

CSS

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

0グッド

0クリップ

投稿2020/05/31 04:29

前提・実現したいこと

Ruby on Railsにて簡単なwebサイトを作成しています。
『改訂4版 基礎Ruby on Rails』という書籍を参考にしています。(Chapter5.2)
選手名簿のテーブルのCSSを参考書通りに反映させたいのですが、読み込まれません。

発生している問題・エラーメッセージ

完成図

現状

該当のソースコード

table.css

css

1/*表:一覧表示,詳細表示*/ 2table.list, table.attr { 3 font-size: 90%; 4 width: 100%; 5} 6 7table.list th, table.attr th { 8 background-color: #499; 9 color: white; 10 font-weight: normal; 11} 12 13table.list td, table.list th, 14table.attr td, table.attr th { 15 padding: 4px; 16} 17 18table.list th { 19 text-align: left; 20} 21 22table.attr th { 23 text-align: right; 24} 25 26table.list td, table.attr td { 27 background-color: #cee; 28}

application.css

css

1/* 2 * This is a manifest file that'll be compiled into application.css, which will include all the files 3 * listed below. 4 * 5 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's 6 * vendor/assets/stylesheets directory can be referenced here using a relative path. 7 * 8 * You're free to add application-wide styles to this file and they'll appear at the bottom of the 9 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 10 * files in this directory. Styles in this file should be added after the last require_* statement. 11 * It is generally better to create a new file per style scope. 12 * 13 *= require_tree . 14 *= require_self 15 */ 16 17/*ページ全体*/ 18body { 19 background-color: white; 20 color: black; 21 margin: 0;padding: 0; 22 font-family: Meiryo, sans-serif; 23} 24 25/*リンク*/ 26a:link { color: #00c;} 27a:visited {color: #00c;} 28a:hover { color: #00c;} 29a img { border: none;} 30 31/* ブロック要素 */ 32p, h1, h2, h3, table, ul { 33 margin: 0 0 1em; 34} 35 36/* ナビゲーション */ 37nav ul, 38ul.toolbar, 39ul.links { 40 list-style-type: none; 41 margin: 0; 42 padding: 0; 43} 44 45nav ul li, 46div.toolbar li, 47ul.toolbar li, 48ul.links li { 49 display: inline; 50} 51 52/*全体の枠*/ 53div#container { 54 margin: 0 auto; 55 padding-top: 5px; 56 width: 780px; 57} 58 59/*左の枠(コンテンツをいれる)*/ 60main { 61 float: left; 62 width: 530px; 63 padding: 10px 10px 10px 0; 64} 65 66/*右の枠(サイドバーをいれる)*/ 67aside#sidebar{ 68 float: left; 69 width: 230px; 70 background-color: #e8ffff; 71 padding: 5px; 72 font-size: 86%; 73} 74 75/* ヘッダー */ 76header { 77 border-top: 4px solid #6bb; 78 padding-top: 4px; 79} 80 81ul.account-menu { 82 text-align: right; 83} 84 85/* フッター */ 86footer { 87 clear: both; 88 font: 11px Verdana; 89 color: #888; 90 padding: 8px 0; 91 border-top: 4px solid #6bb; 92 text-align: center; 93} 94 95footer nav ul li:not(:last-child):after { 96 color: #888; 97 content: " | "; 98 margin: 0 5px; 99} 100 101/* メニューバー */ 102nav.menubar { 103 padding: 2px; 104 background-color: #000; 105 color: #ccc; 106 font-size: 80%; 107 padding: 8px 16px; 108} 109 110nav.menubar ul li:not(:last-child):after { 111 color: #ccc; 112 content: " | "; 113 margin: 0 2px; 114} 115 116/* メニューバーのリンク */ 117nav.menubar a { text-decoration: none; } 118 119/* メニューバーのリンク(未訪問) */ 120nav.menubar a:link { color: #ccc; } 121 122/* メニューバーのリンク(訪問済) */ 123nav.menubar a:visited { color: #ccc; } 124 125/* メニューバーのリンク(マウスを合わせたとき) */ 126nav.menubar a:hover { 127 color: #f88; 128 text-decoration: underline; 129} 130 131/* メニューバーのリンク(現在のページ) */ 132nav.menubar span { 133 color: #ff8; 134 font-weight: bold; 135} 136 137/* メインコンテンツ */ 138main h1 { 139 color: #88c; 140 font-weight: normal; 141 font-size: 150%; 142 border-bottom: 2px solid #88c; 143 margin-bottom: 0.5em; 144} 145 146main h2 { 147 color: #99d; 148 font-weight: bold; 149 font-size: 120%; 150 margin-bottom: 0.5em; 151 border-bottom: 1px solid #ccf; 152} 153 154main p { 155 font-size: 90%; 156 line-height: 1.5; 157} 158 159ul.toolbar, 160div.toolbar { 161 padding: 15px 0; 162 font-size: 90%; 163 text-align: right; 164} 165 166ul.toolbar li:not(:last-child):after { 167 color: #888; 168 content: " | "; 169 margin: 0 2px; 170} 171 172/* サイドバー */ 173form#login-form { 174 font-size: 12px; 175} 176 177form#login-form div { 178 padding: 2px; 179 text-align: center; 180} 181 182form#login-form label { 183 display: inline-block; 184 width: 80px; 185 text-align: center; 186} 187 188form#login-form input[type="text"], 189form#login-form input[type="password"] { 190 width: 120px; 191} 192 193aside#sidebar h2 { 194 color: #080; 195 font-weight: bold; 196 border-bottom: 1px dotted #080; 197 margin-bottom: 0.5em; 198 font-size: 100%; 199} 200 201aside#sidebar ul { 202 padding-left: 1em; 203 list-style-type: none; 204} 205 206aside#sidebar li { 207 margin-bottom: 0.3em; 208} 209 210

index.html.erb

erb

1<% @page_title = "会員名簿" %> 2<h1><%= @page_title %></h1> 3 4<% if @members.present? %> 5 <table> 6 <thead> 7 <tr> 8 <th>背番号</th> 9 <th>ユーザー名</th> 10 <th>氏名</th> 11 </tr> 12 </thead> 13 <tbody> 14 <% @members.each do |member| %> 15 <tr> 16 <td style="text-align: right"><%= member.number %></td> 17 <td><%= member.name %></td> 18 <td><%= member.full_name %></td> 19 </tr> 20 <% end %> 21 </tbody> 22 </table> 23<% else %> 24 <p>会員情報がありません</p> 25<% end %>

試したこと

・application.html.erbの<head>タグ内に
<%= stylesheet_link_tag 'table' %>
を追加

・rake assets:precompileコマンドを実行

補足情報(FW/ツールのバージョンなど)

Rails : 6.0.3.1

よろしくお願いします

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

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

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

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

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

guest

回答1

0

自己解決

tableタグのclassを指定できていなかったのが原因でした。
閲覧してくださった方々、ありがとうございました!

投稿2020/05/31 06:13

SRDR_never_myDT

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問