先日のお題を Ruby on Rails で再現した(ソース公開・その 2)

View で使う変数を定義したいので Controller から作る。

app/controllers/major_cities_controller.rb

class MajorCitiesController < ApplicationController
  def index
    @cities = City.all
  end

  def show
    @city = City.find(params[:id])
  end
end

View を作る。

app/views/major_cities/index.html.erb

<table id="list">
  <caption>日本の政令指定都市一覧</caption>
  <thead>
    <tr>
      <th id="no">No.</th>
      <th id="pref">都道府県</th>
      <th id="name">都市名</th>
      <th class="button"></th>
    </tr>
  </thead>
  <tbody>
    <% @cities.each { |city| %>
    <tr style="background-color : <%= cycle '#b0e0e6', '#e6e6fa' %>">
      <td><%= city.id %></td>
      <td><%= city.pref_name %></td>
      <td><%= city.name %></td>
      <td class="button"><%= button_to '詳細', major_city_path(city.id), method: :get %></td>
    </tr>
    <% } %>
  </tbody>
</table>

cycle を使って行ごとに色を交互に指定する。

app/views/major_cities/show.html.erb

<table id="detail">
  <caption><%= @city.name %>のデータ</caption>
  <tr>
    <th>指定日</th>
    <td><%= @city.designated_day.strftime('%Y 年 %-m 月 %-d 日') %></td>
  </tr>
  <tr>
    <th>地方</th>
    <td><%= @city.district.name %></td>
  </tr>
  <tr>
    <th>都道府県</th>
    <td><%= @city.pref_name %></td>
  </tr>
  <tr>
    <th>面積</th>
    <td><%= number_with_delimiter(@city.area) %>km&sup2;</td>
  </tr>
  <tr>
    <th>人口</th>
    <td><%= number_with_delimiter(@city.population) %> 人</td>
  </tr>
</table>
<p><%= link_to '一覧に戻る', major_cities_path %></p>

number_with_delimiter 便利〜。

後はスタイルシート(SCSS)。

app/assets/stylesheets/major_cities.css.scss

table { margin : auto }

caption { font-size : 20pt }

table#list {
  border : 1px outset black;

  caption { color : #008b8b }

  thead {
    background-color : #008b8b;
    color : #e6e6fa;
    font-size : 14pt
  }

  th, td { border : 1px inset black }

  th {
    &#no { width : 30px }
    &#pref { width : 100px }
    &#name { width : 120px }
    &.button { width : 80px }
  }

  td {
    text-align : left;
    &.button { text-align : center }
  }
}

table#detail {
  caption { color : #6a5acd }

  th, td {
    text-align : left;
    font-size : 14pt
  }

  th {
    background-color : #6a5acd;
    color : #e6e6fa
  }

  td {
    background-color : #e6e6fa;
    color : #6a5acd;
    width : 180px
  }
}

p { text-align : center }

いやぁ、Ruby on Rails っていいものですね(ステマ)

2013/11/25 追記 : SCSS(Sass) には親要素を参照する & という記法があった模様。何これ簡単すぎて普通の CSS 書く気失せるわ本当にw