質問編集履歴

1 バグが発生していないコードを追記させて頂きました。ダメなものと良いものの違いを教えて頂きたいです。

hh4437

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;
}
```
  • CSS

    9239 questions

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

  • Ruby

    11007 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る