文字が表示されなくなってしまいます

Question

今の状況と解決したいこと

ruby on rails, bootstrapを使ってブログアプリを作成しています。
ブログ一覧のcontentの中身が表示されなくなってしまいました。（最初は表示されていた）

一覧のソースコードは以下の通りです。

<div class="list">
  <p id="notice"><%= notice %></p>

  <h1>Murmurs List</h1>
<div>
  <table class="table">
    <thead>
      <tr>
        <th>Content</th>
        <th colspan="3"></th>
      </tr>
    </thead>

    <tbody>
      <% @murmurs.each do |murmur| %>
        <tr>
          <td><%= murmur.content %></td>
          <td><button type="button" class="btn btn-outline-warning"><%= link_to 'Show', murmur %></button></td>
          <td><button type="button" class="btn btn-outline-info"><%= link_to 'Edit', edit_murmur_path(murmur) %></button></td>
          <td><button type="button" class="btn btn-outline-danger"><%= link_to 'Destroy', murmur, method: :delete, data: { confirm: 'Are you sure?' } %></button></td>
        </tr>
      <% end %>
    </tbody>
  </table>
<div>
  <br>

  <button type="button" class="btn btn-warning"><%= link_to 'New Murmur', new_murmur_path %></button>
</div>

試したこと

topページの文字も消えてしまったのですが、そちらは<p>タグを<h6>タグに変えることで解決できました。
しかしテーブルは代替タグが思いつかず…

調べたところ、cssで背景色を設定しているか、bodyのwidthがautoになっていると同じ現象が出るとわかりました。
確認してみましたが、その条件には当てはまらないみたいなので他に原因があるのかと思うのですが。。
以下がcssのコードです。

header {
  width: 100%;
  background-color: #66BAB7;
  height: 54px;
}

header ul {
  margin: 0 auto;
  list-style: none;
}

header .a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: orange;
}

header li {
  float: left;
  width: auto;
}

header ul:after {
  content: "";
  display: block;
  clear: both;
}

footer {
  width: 100%;
  background-color: #66BAB7;
  padding: 20px 0 10px 0;
  color: white;
  margin: 0;
  padding-bottom: 10px;
  font-size: 12px;
  position: absolute;
  bottom: 0;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  text-align: center;
}

.main-header {
  padding: 20%;
  width:100%;
  background-size: cover;
  background-image: url("main-header.jpg");
  background-attachment: fixed;
}

.main-header img {
  display: block;
  margin: 0　auto;
  width: 25%;
  padding-top: 15%;
}

.list, .new, .about {
  padding: 10%;
}

.table {
  text-align: center;
}

h4, h5 {
  color: #64363C
}

h6 {
  line-height: 25px;
}

初心者の拙い質問で恐縮ですが、どなたか知恵をお貸しください(><)

Comments

[dit.]

直接の関係があるかわからないのでこちらで指摘します。tableを囲むdivが閉じられていない（</table>の直後が<div>になっている）ので、</div>に書き換えてみてください。

[nchugzOiCRwyV38]

ご指摘ありがとうございます！！修正したところ、文字は戻りませんでしたが、footerがずれるという問題は解決しました！

[dit.]

提示のコードよりも後で閉じてたら失礼な指摘だった…と投稿してから気づきましたが、少しでも意味があったようでよかったです

[nchugzOiCRwyV38]

はい!ありがとうございました！問題の、文字が消えてしまう方も、解決いたしました！

Answer 1

おそらくですが、rails側でなく、html,css側の問題ですね。

chromeディベロッパーツールの使い方を習得するほうが早いと思います。
（今後も同様の事象が発生すると思いますので）

ディベロッパーツールを開いて、あやしそうなstyleをいじってみると自己解決できると思いますよ。

どうしてもわからない場合は、回答者側からもデバッグできるように
CodePenなどで同様の事象が再現できる環境をつくって質問するほうが良いかと思います。そうしないと、回答者側も答えようがないと思いますよ。
CodePenはこんな感じで自分が作ったhtml, css, jsをのページを、実行可能なかたちで、他の人に簡単にシェアできるサービスです

がんばってください！

Comments

[nchugzOiCRwyV38]

なるほど、ありがとうございます！
ディベロッパーツール、勉強してみます！
質問の仕方のご指摘も、ありがとうございます！
どうしてもの時はそうしてみます！！

[h_daido]

ディベロッパーツールはとても便利ですよ！エンジニア的にはマストなツールです。
（普通はChromeを使いますが、他ブラウザも同等の機能を提供しています。）

まだ、CodePenなどのシェアサービスもフロントエンドの質問をする上では知っておくととても便利です。
サンプルを回答につけておいたので、是非ごらんになってみてください。

[nchugzOiCRwyV38]

ご丁寧な返答、本当にありがとうございます(T T)
初心者の味方ですね????
使えるようになって出直します????

[nchugzOiCRwyV38]

検証で検証していったところ、問題の記述を発見できました！！！！
答えの導き方を教えていただけたことで、今後の課題解決能力の向上にもつながりました！
本当にありがとうございました！

Answer 2

Chromeの検証から、問題箇所のCSSをみたところ、bootstrapでテーブルの背景がwhiteに設定されていたことがわかり、その部分を削除したら文字が表示されるようになりました！