2017.09 «  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 - - - - » 2017.11
TOP > railsを初めて動かす03【スタイルシートcssをいじる】

 ← StringとSymbolの違い | TOP | 新しいデザインにしました

スポンサーサイト 

--年--月--日 (--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


【広告】

[--.--.--(--) --:--] スポンサー広告 | Trackback(-) | Comment(-)
↑TOPへ

railsを初めて動かす03【スタイルシートcssをいじる】 

2007年05月22日 ()
この前作った

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とあんまり関係ないような気がしますが、まあ、いいや。


【広告】

[2007.05.22(Tue) 01:41] Railsを初めて動かすTrackback(0) | Comments(0)
↑TOPへ

 ← StringとSymbolの違い | TOP | 新しいデザインにしました

COMMENT

COMMENT POST















管理者にだけ表示

 ← StringとSymbolの違い | TOP | 新しいデザインにしました
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。