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

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

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

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

CSS

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

Q&A

1回答

1181閲覧

【Ruby】cssテキストを読み込めない...

hh4437

総合スコア14

Ruby

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

CSS

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

0グッド

0クリップ

投稿2017/02/14 13:56

編集2022/01/12 10:55

###前提・実現したいこと

【加筆】
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

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}

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

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

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

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

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

guest

回答1

0

パス(ファイルを置いた場所)が間違っているとかでしょうか。
cssの場所を絶対パスで指定してみてください。

投稿2017/02/15 00:56

otn

総合スコア84423

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

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

hh4437

2017/02/15 03:34

有難うございます。 パスを下記に変更してみてもcssファイルを読み込めずにおります... 質問を修正致しましたので、もし宜しければご確認頂ければ幸いです。 【修正前】 <link rel="stylesheet" type="text/css" href="default.css"> 【修正したパス】 <link rel="stylesheet" type ="text/css" href="http://localhost:8099/default.css">
otn

2017/02/15 03:57

再現しませんので、何らかの勘違いがあると思われます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問