hh4437 score 12
2017/02/15 12:26 投稿
| 【Ruby】cssテキストを読み込めない... |
| ###前提・実現したいこと |
| 【加筆】 |
| F12で状況を確認したところ、 |
| ①そもそもRubyファイルの内、下記より後半のみしかソース（F12で右側に表示されるエリア)に表示されていない。 |
| <tr> |
| <td><%= name %></td> |
| <td><input type="text" name="<%= name %>" size="60" /></td> |
| ...(省略) |
| ②CSSファイルを全く読み込めてない。 |
| 上記2つのバグが存在していないRubyコード（同じアプリ内の他ページ）を追加したので、ダメなものとどこが違っているのかを教えて頂きたいです。 |
| 【元の質問】 |
| いつもお世話になっております。 |
| 本（『作りながら学ぶRuby入門』）を参考に、Rubyで簡単なWebアプリケーションを作成していますが、アプリケーション内の1ページを作成した際に、CSSファイルを読み込めず、見た目が簡素なWEBページとなってしまっております。 |
| CSSファイルは同じアプリケーション内の他ページで無事読み込めているので、CSSファイル自体には問題はないと思われます。 |
| RubyのコードとCSSのコードは下記になります。 |
| 呼び出す側のRubyコードのどこが問題なのか、ご教示願いたいです。 |
| ###発生している問題・エラーメッセージ |
| エラーは出ておりません。 |
| ###該当のソースコード |
| ###途中からしか表示されない＆CSSを読み込めないRubyコード |
| ```ruby |
| <% #-*- coding: utf-8 -*- %> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; |
| charset=UTF-8" /> |
| <link rel="stylesheet" type="text/css" href="default.css"> |
| <title>蔵書管理</title> |
| </head> |
| <body> |
| <h1>蔵書管理</h1> |
| <h2>蔵書の登録</h2> |
| <p>蔵書データを入力してください| |
| <a href ="list.erb">蔵書の表示</a>| |
| <a href ="index.html">メニュー画面に戻る</a> |
| </p> |
| <hr> |
| <% #[データを入力するフォームを表示。アクションはentry] %> |
| <form method="post" action="entry" > |
| <table> |
| <tr> |
| <th>項目名</th><th>入力データ</th> |
| </tr> |
| <% ['id','title','author','page','p_date'].each do |name| %> |
| <tr> |
| <% #ここからしか表示されない！ %> |
| <tr> |
| <td><%= name %></td> |
| <td><input type="text" name="<%= name %>" size="60" /></td> |
| </tr> |
| <% end %> |
| </table> |
| <input type="submit" value="登録を実行" /> |
| </form> |
| <hr> |
| </body> |
| </html> |
| ``` |
| ###表示も完璧でCSSも読み込めている他ページ（同じアプリ内）のRubyコード |
| ```ruby |
| <% # -*- coding: utf-8 -*- %> |
| <% require 'rubygems' %> |
| <% require 'dbi' %> |
| <% dbh = DBI.connect('DBI:SQLite3:bookinfo_sqlite.db') %> |
| <% sth = dbh.execute("select * from bookinfos;") %> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content ="text/html; |
| charset=UTF-8" /> |
| <link rel="stylesheet" type ="text/css" href="default.css"> |
| <title>蔵書管理</title> |
| </head> |
| <body> |
| <h1>蔵書管理</h1> |
| <h2>蔵書データの表示</h2> |
| <p>処理する蔵書データを選択してください| |
| <a href="entry.erb">蔵書データの登録</a>| |
| <a href="retrieve.erb">蔵書データの登録</a>| |
| <a href="index.html">メニュー画面に戻る</a> |
| </p> |
| <hr> |
| <form method="post" action="list"> |
| <table> |
| <tr> |
| <th>削除</th><th>修正</th> |
| <% sth.column_names.each do |name| %> |
| <th><%= "#{name}" %></th> |
| <% end %> |
| </tr> |
| <% sth.each do |row| %> |
| <tr> |
| <% row.each_with_name do |val,name| %> |
| <% if name == 'id' then %> |
| <td><input type="radio" name="operation" value= <%= "#{val}.delete" %> /></td> |
| <td><input type="radio" name="operation" value= <%= "#{val}.edit" %> /></td> |
| <% end %> |
| <td><%= "#{val.to_s}" %></td> |
| <% end %> |
| </tr> |
| <% end %> |
| </table> |
| <input type="submit" value="選択した処理を実行" /> |
| <hr> |
| </body> |
| </html> |
| <% sth.finish %> |
| <% dbh.disconnect %> |
| ``` |
| ###読み込みたいCSSコード |
| ```css |
| body{ |
| background-color: #fff8dc; |
| } |
| h1,h2,h3{ |
| border-with : 0 0 0 8px; |
| boder-style : solid; |
| padding-left : 0.3em; |
| padding-right : 0.5em; |
| } |
| h1{ |
| margin: 0em 0em 0em 0em; |
| font-size : 1.2em |
| color : white; |
| border-color : #fff8dc; |
| background-color : maroon; |
| border-width: 0.1em 0em 0.1em 0.1em; |
| padding-left : 0.3em; |
| padding-right : 0.5em; |
| padding-top: 0.2em; |
| padding-bottom : 0.2em; |
| } |
| h2{ |
| font-size: 1.2em; |
| color: navy; |
| border-color : navy |
| } |
| h3{ |
| font-size: 1em; |
| color: darkgreen; |
| border-color : darkgreen; |
| } |
| table{ |
| border-width: 1px,2px,2px,1px; |
| border-type: solid; |
| border-colo : gray; |
| padding: 0; |
| background-color : gray; |
| } |
| th, td { |
| border-width : 1px,0px,0px,1px; |
| border-type : solid; |
| border-color : gray; |
| padding: 4px; |
| background : #ffffef; |
| } |
| th { |
| text-align : center; |
| font-weight:bold; |
| background-color : #a0b8c8; |
| } |
| ``` |
