railsを初めて動かす03【スタイルシートcssをいじる】
http://localhost:3000/book
にブラウザでアクセスすると、book一覧が表示されますが、一覧表に枠線が付いていないので、枠線を付けてみようかと思います。
なんの指針も参考もなく、ただ独断でこうしてみよう、と思い立った今回のスタイルシート追加作戦ですので、正規のやり方ではないかも知れません。
あしからず…
まず、画面を表示しているとおぼわしきファイルを見つけます。
だいたい自分のアプリに関係ありそうなものは、appディレクトリに入っているようなので、
# cd myFirst/app
と移動してみます。
そうすると、appディレクトリには、
controllers
helpers
models
views
という複数形の名前のディレクトリと、
generate
というファイルがありました。
どーみても、viewsディレクトリが怪しいですね、ネーミングが。
というわけで
# cd views
とすると、viewsディレクトリの中に、bookディレクトリがありました。
# cd book
bookディレクトリの中には、
_form.rhtml
edit.rhtml
list.rhtml
new.rhtml
show.rhtml
ファイルがありましたとさ。
今回探しているのは、一覧画面だから、list.rhtmlでしょうね。
それにしても、
http://localhost:3000/book
にアクセスしたら、list.rhtmlが表示されるなんて、URLには何もlistという文字を指定していないのにふ・し・ぎ！
list.rhtmlを抜粋すると、
<table>
<tr>
<% for column in Book.content_columns %>
<th><%= column.human_name %></th>
<% end %>
</tr>
<% for book in @books %>
<tr>
<% for column in Book.content_columns %>
<td><%=h book.send(column.name) %></td>
<% end %>
<td><%= link_to 'Show', :action => 'show', :id => book %></td>
<td><%= link_to 'Edit', :action => 'edit', :id => book %></td>
<td><%= link_to 'Destroy', { :action => 'destroy', :id => book }, :confirm => 'Are you sure?', :method => :post %></td>
</tr>
<% end %>
</table>
となっていたので、この中のthタグとtdタグに、独自のスタイルシートのクラスを勝手に埋め込む決意をしました。
ところで、そのスタイルシートファイルをいじればいいのでしょうか。
ということを調べるのに、
http://localhost:3000/book
画面をもう一回表示させて、HTMLソースコードを見てみたら、
<link href="/stylesheets/scaffold.css?1175694043" media="screen" rel="Stylesheet" type="text/css" />
というcssファイルへリンクしている行が唯一のスタイルシートとの接点だったので、Webサーバのドキュメントルートであるpublicの下のこのスタイルシートファイルをいじってみよう、と思いました。
# cd
# cd myFirst/public/stylesheets/
この中の、scaffold.cssファイルの一番最後に、
.tableFrame {
background-color: #fff;
border: 1px solid #3e9;
}
を追加しまして、
先ほどのapp/views/book/list.rhtmlファイルの抜粋部分を、
<table>
<tr>
<% for column in Book.content_columns %>
<th class="tableFrame"><%= column.human_name %></th>
<% end %>
<th class="tableFrame"></th>
<th class="tableFrame"></th>
<th class="tableFrame"></th>
</tr>
<% for book in @books %>
<tr>
<% for column in Book.content_columns %>
<td class="tableFrame"><%=h book.send(column.name) %></td>
<% end %>
<td class="tableFrame"><%= link_to 'Show', :action => 'show', :id => book %></td>
<td class="tableFrame"><%= link_to 'Edit', :action => 'edit', :id => book %></td>
<td class="tableFrame"><%= link_to 'Destroy', { :action => 'destroy', :id => book }, :confirm => 'Are you sure?', :method => :post %></td>
</tr>
<% end %>
</table>
こんな感じに、tableFrameクラスのオンパレードで盛り上げてあげると、
http://localhost:3000/book
それなりにイケてる表示がされました。
なんだか今回はrailsとあんまり関係ないような気がしますが、まあ、いいや。
【広告】