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