まだ少し気になる点があるので修正します。
まず、ボタンの文字が黒くなってしまって見えない部分があります。
これは調べてみた所、プロジェクトフォルダのapp\assets\stylesheetsにある
scaffolds.css.scssが原因です。
この中のaタグの指定が効いてしまっているので、これをコメントアウトしておきます。
[scaffolds.css.scss]
/*
a {
color: #000;
&:visited {
color: #666;
}
&:hover {
color: #fff;
background-color: #000;
}
}
*/
a {
color: #000;
&:visited {
color: #666;
}
&:hover {
color: #fff;
background-color: #000;
}
}
*/
ついでにscssファイルについて説明。
scssファイルはSassというCSSを簡易的に書く言語で使われるファイルです。
SassはCSSを階層的に書くことで同じ指定を省略できたり
計算や変数等使えるようです。
詳しく知りたい方は調べてみて下さい。
修正した結果、文字部分が白くなり見やすくなりました。
次に全体的に中央に寄せるとともにテーブル内も調整してみました。
修正したCSSの内容は以下です。
[index.html.erb]
<div class="container-fluid">
<div class="row">
<h1 class="col-md-11 col-md-offset-1">Listing tasks</h1>
</div>
<div class="row">
<div class="table-responsive col-md-10 col-md-offset-1">
<table class="table table-striped">
<thead class="row">
<tr>
<th class="col-md-1">Title</th>
<th class="col-md-1">Priority</th>
<th class="col-md-2">Start</th>
<th class="col-md-2">End</th>
<th class="col-md-1">Location</th>
<th class="col-md-1">Person</th>
<th class="col-md-1">Tag</th>
<th class="col-md-3"></th>
</tr>
</thead>
<tbody>
<% @tasks.each do |task| %>
<tr>
<td><%= task.title %></td>
<td><%= task.priority %></td>
<td><%= task.start %></td>
<td><%= task.end %></td>
<td><%= task.location %></td>
<td><%= task.person %></td>
<td><%= task.tag %></td>
<td><%= link_to 'Show', task, :class => 'btn btn-primary' %>
<%= link_to 'Edit', edit_task_path(task), :class => 'btn btn-primary' %>
<%= link_to 'Destroy', task, method: :delete, :class => 'btn btn-warning', data:
{ confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
<br>
</div>
<div class="row">
<div class="col-md-11 col-md-offset-1">
<%= link_to 'New Task', new_task_path, :class => 'btn btn-primary' %>
</div>
</div>
</div>
<div class="row">
<h1 class="col-md-11 col-md-offset-1">Listing tasks</h1>
</div>
<div class="row">
<div class="table-responsive col-md-10 col-md-offset-1">
<table class="table table-striped">
<thead class="row">
<tr>
<th class="col-md-1">Title</th>
<th class="col-md-1">Priority</th>
<th class="col-md-2">Start</th>
<th class="col-md-2">End</th>
<th class="col-md-1">Location</th>
<th class="col-md-1">Person</th>
<th class="col-md-1">Tag</th>
<th class="col-md-3"></th>
</tr>
</thead>
<tbody>
<% @tasks.each do |task| %>
<tr>
<td><%= task.title %></td>
<td><%= task.priority %></td>
<td><%= task.start %></td>
<td><%= task.end %></td>
<td><%= task.location %></td>
<td><%= task.person %></td>
<td><%= task.tag %></td>
<td><%= link_to 'Show', task, :class => 'btn btn-primary' %>
<%= link_to 'Edit', edit_task_path(task), :class => 'btn btn-primary' %>
<%= link_to 'Destroy', task, method: :delete, :class => 'btn btn-warning', data:
{ confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
<br>
</div>
<div class="row">
<div class="col-md-11 col-md-offset-1">
<%= link_to 'New Task', new_task_path, :class => 'btn btn-primary' %>
</div>
</div>
</div>
重要部分を緑の文字で表記しました。
それぞれ説明します。
■class="container-fluid"
領域が画面いっぱいに広がり、中のコンテンツは中央に寄ります。
似たものにcontanerがあり、どちらも中央寄せになるが、
画面いっぱいになる点が異なる。
■class="row"
行。container/container-fluidの中に書く。
■class="col-md-xx"
列。xx部分が幅を指す。画面を12分割にした値を入れるので
col-md-1ならば1/12の広さになる。
col-md-xxはデスクトップPC用。タブレット用のcol-sm-xxや
携帯用のcol-xs-xxもある。
■class="col-md-offset-xx"
指定したタグの前に入れるスペースの広さ。
12分割だったりcol-sm-offset-xx/col-xs-offset-xxがあるのは
col-md-xxと同じ。
■class="table"
Bootstrapの表形式を使う場合に指定。
線が間に引かれたり、見栄えがよくなる。
■class="table-responsive"
レスポンシブ対応のテーブルにする。
画面が拡大されてテーブルが入りきらなくなった時にスクロールバーが
あらわれる。