縞模様のリスト表示にしてみる。

Ruby on Rails

よく、クレジットカードの請求明細などに利用される書式で、行間を縞模様にして、横に長いリスト表示も、左右の項目を目で追い易くなっている。ソフトウェアブックもそんな書式にしてみたい。見た目はこんな感じだ。（薄い水色の縞なので、ちょっと分かり難いかも...。）

縞模様化の方法としては、＜tr＞タグに、以下のようなクラスを設定して、そのクラスのバックグランドカラーをスタイルシートで設定することにした。

<tr class="stripe_dark">
または、
<tr class="stripe_light">

実際の作業は、以下のようにした。

ヘルパーファイルの設定

縞模様の状態を判定するヘルパメソッドを作成した。stripe_darkとstripe_lightクラスを交互に返してくれる。

# ----- app/helpers/application_helper.rb -----
module ApplicationHelper
  def stripe
    @stripe = !@stripe
    @stripe ? "stripe_dark" : "stripe_light"
  end
...（途中省略）...

stripeで＜tr＞タグにクラスを設定

上記ヘルパメソッドを利用して、＜tr＞タグにクラスを設定する。

<%# ----- app/views/models/softwares/_listd.rhtml ----- %>
<!--[:]-->
    <tr class=<%= stripe %>>
...（途中省略）...

スタイルシートで、色を設定

stripe_darkとstripe_lightクラスのバックグランドカラーを設定している。

/* ----- app/public/stylesheets/scaffold.css ----- */
table tr.stripe_light td { 
  background-color: white;/*#FFFFFF*/
} 

table tr.stripe_dark td { 
  background-color: ghostwhite;/*#F8F8FF*/
}


以上の簡単な設定で、リスト表示が縞模様になる。