テーブルの偶数行又は奇数行の背景色を変えて縞模様にする

YahooのCSSフレームワーク「Pure」のストライプテーブルは、実現のさせ方がちょっと面倒(全部の奇数行のtrに「class=”pure-table-odd”」をつける)だったので、tableにclassを設定すればOKな記述を、Pureと併用する自作の方のCSSに追加することにしました。

■Pure使ってる人のテーブル記述

<table class="pure-table stripe-table">
<tr><th>列1</th><th>列2</th></tr>
<tr><td>項目1-1</td><td>項目1-2</td></tr>
<tr><td>項目2-1</td><td>項目2-2</td></tr>
<tr><td>項目3-1</td><td>項目3-2</td></tr>
<tr><td>項目4-1</td><td>項目4-2</td></tr>
</table>

■Pure使ってない人のテーブル記述

<table class="stripe-table">
<tr><th>列1</th><th>列2</th></tr>
<tr><td>項目1-1</td><td>項目1-2</td></tr>
<tr><td>項目2-1</td><td>項目2-2</td></tr>
<tr><td>項目3-1</td><td>項目3-2</td></tr>
<tr><td>項目4-1</td><td>項目4-2</td></tr>
</table>

■奇数行のみ背景色を変えたい場合のストライプテーブルのCSS記述

.stripe-table tr:nth-child(odd) td, .stripe-table tr:nth-child(odd) th {
  background-color:#f9f9f9;
}

■偶数行のみ背景色を変えたい場合のストライプテーブルのCSS記述

.stripe-table tr:nth-child(even) td, .stripe-table tr:nth-child(even) th {
  background-color:#f9f9f9;
}

※使いたい方(奇数か偶数か)のCSS記述のみを、自分のCSSファイルに追記して下さい。
※背景色(上の例では「#f9f9f9」)は、ご自分で好みの色に変えて下さい。

こんな感じで、使うtableのclassに「stripe-table」を設定すればOKです。
(Pureのテーブルのデザインも併用するので、実際の記述は「<table class=”pure-table stripe-table”>」となってます。)

ただし、IE8以下はnth-childが未対応なのでご注意を。
(IE9以上とFireFoxやクローム等の他ブラウザは対応してます。)

YahooのCSSフレームワーク「Pure」

ちょっと前に知った、Yahooが公開しているjavascript不要で軽量なCSSフレームワーク「Pure」関連のメモ。
Pureという、他でもわんさか使われてるような単語が名前になってるので、検索に引っかかりにくいということもあり、このページにメモっておくことにしました。

Pure(公式)
Pure自体が欲しい方は、ここにいけばOKです。

Pureを使うには、

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css">

と1行書くだけで大丈夫です。これに全機能が入ってます。
※2013年6月11日に0.2.0が公開されました。

全機能入ったもの(pure-min.css)で20KB程度です。
Bootstrap2.x系は100KB位なので、ずいぶん軽いですね。もちろんその分シンプル(出来ること、デザイン・色のパターンは少ない)ですが、フレームワークは必要最低限のもので、後は自分で作るという人には選択肢の一つとしてありかと思います。

Pureで出来ることの内主なものは、

  • Grids
    グリッドデザイン、レスポンシブデザインなど
  • Forms
    フォームデザイン(横並び、縦並び、マルチカラム、グループ化、input欄のサイズ指定、入力必須、フォーム項目無効化など)
  • Buttons
    ボタンデザイン(色、サイズ、ボタン無効化、ボタンにアイコンをつける)
  • Tables
    テーブルデザイン(表の枠、背景色、横線のみ表示、ストライプ)
  • Menus
    メニューデザイン(横並びメニュー、縦並びメニュー、ドロップダウンメニュー、ページング)

な感じです。
公式サイトの左メニューを押せば、それぞれの書き方が出てきます。

レイアウトに関しては、公式のLayoutsに掲載されているページと、そのソースを見つつ、試行錯誤してみるのが良いかと思います。

日本語で、という方は以下のページが参考になります。
Pure を使って 5分でレスポンシブな Blog テンプレートを作る(WWW WATCH)

apple-touch-icon.pngとは?

私が運営しているサイト(ウェブアラカルトではない別サイト)のエラーログをチェックしていたら、

「apple-touch-icon.png」が見つからないよ!(意訳)

という行があったものの、うちのサイト(HTML、CSS共に)にはそもそもそんなファイルを表示する記述は無いよ、と思っていたのですが、このファイルはiPhoneやiPadのホーム画面用アイコンのことらしく。
つまり、閲覧者のどなたかがiPhoneなどで「ホーム画面に追加」をして頂いている、ということでしょうか。それは大変ありがたいことで。

なのですが、エラーログがたまるのは避けたいですので、「apple-touch-icon.png」なるファイルを設置することにしました。
作業の参考にしたのはこちらのサイト。

iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう(Web担当者Forum)

まあすごくざっくりいえば、
「apple-touch-icon.png」という名前の画像ファイル(png)を作り、サイトのルートディレクトリにアップする。
というだけです。

画像のサイズは
○57px × 57px
 →ファイル名は「apple-touch-icon.png」「apple-touch-icon-precomposed.png」
○72px × 72px
 →ファイル名は「apple-touch-icon-72×72.png」「apple-touch-icon-72×72-precomposed.png」
○114px × 114px
 →ファイル名は「apple-touch-icon-114×114.png」「apple-touch-icon-114×114-precomposed.png」
○144px × 144px
 →ファイル名は「apple-touch-icon-144×144.png」「apple-touch-icon-144×144-precomposed.png」
の8種類を作りました。
(「precomposed」がついているファイルがあると、端末によるハイライト系の自動処理が行われないので、あわせて作ってアップしました。)

私は、ツイッター用のアイコンをそのままリサイズしてアップしただけです。
ロゴやfaviconを流用しても良いかもしれませんね。

まあ時間はそんなにかからないので、スマホ向けサイト(又はレスポンシブレイアウト等でスマホでも見れるサイト)を作っている方は、こういうファイルを用意してみては如何でしょうか。