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

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

ただいまの
回答率

90.34%

  • Ruby

    8158questions

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

  • CSS

    6176questions

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

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 244

hh4437

score 8

前提・実現したいこと

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

<% #-*- 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>
                        <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コード

<% # -*- 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コード

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;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/15 12:34

    有難うございます。
    パスを下記に変更してみてもcssファイルを読み込めずにおります...
    質問を修正致しましたので、もし宜しければご確認頂ければ幸いです。

    【修正前】
    <link rel="stylesheet" type="text/css" href="default.css">

    【修正したパス】
    <link rel="stylesheet" type ="text/css" href="http://localhost:8099/default.css">

    キャンセル

  • 2017/02/15 12:57

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

    キャンセル

同じタグがついた質問を見る

  • Ruby

    8158questions

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

  • CSS

    6176questions

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