« 2005年9月 | トップページ | 2005年11月 »

2005-10-23

表組みのための CSS サンプル

今日は表組み CSS について、備忘録かねがね情報共有用です。まじめに書くと長くなるので、一般的な説明はかなり省いてます。もしここで紹介している事柄に興味が湧いたけど、細かいところがよく分からないという方がいらっしゃいましたら、どうぞ遠慮なく聞いてください。逆にもっと良い方法をご存知の方がいらっしゃったら、是非ご教示くださいませ。

CSS TABLE GALLERY

 http://icant.co.uk/csstablegallery/

最近見つけたページで、色んな人が作成した表組み(テーブル)デザインのサンプル CSS(スタイルシート)を集めたサイトです。ただし、スタイル名をクリックすると即座にそのスタイル(というか CSSファイル)が適用されて外観が変わります(表組みの HTML 自体は固定で、本当に CSS が切り替わってるだけです)。気に入ったスタイルがあれば、Download をクリックすると CSS のソースが表示(もしくはダウンロード)されます。

ダウンロードした CSS ファイルは、そのまま datatable.css などとして普段メインで利用している CSS ファイルと同じディレクトリに保存して、メインの CSS ファイルの中に、


 @import url("datatable.css");
 

という行を追加するだけで簡単にお目当てのテーブルのスタイルを適用できるので、関心のある方は、是非 お試しください。もちろん、直接メインの CSS ソースの中にコピペしても構いません。うーん、実に簡単だ。(^-^)v

Alter Table Row Background Colors Using JavaScript

 http://www.sitepoint.com/article/background-colors-javascript

さて上のサイトでサンプルを実際に自前の (X)HTML ページに対して適用された方は、テーブル内の背景色を1行ごとに交互に変えて表組みを見やすくしたくても、それが反映されないことにお気づきになるのではないでしょうか。

そう、上のサイトではテーブルの奇数行に対して "odd" という class を設けています。これが自前の (X)HTML ソースの中に入ってなければ効きません。


 <tr class="odd">〜</tr>
 <tr>〜</tr>
 <tr class="odd">〜</tr>
 <tr>〜</tr>
 

でも、このようにいちいち一行ごとに class を挿入していたんじゃ、テーブルにデータを一行追加しようとしただけで、以下の行すべてに対して class を追加 | 削除しなくちゃならなくなって面倒ですよね。

class を指定せず、CSS セレクタだけで実現する方法

実はこんな余計な class を入れなくても


 :nth-child(2n+1) /*奇数番目の子供要素という意味。*/
 

という CSS 3 のセレクタを使えば、

 <table>
  <thead>
   <tr>
    <th>見出し1</th>
    <th>見出し2</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>行1列1</td>
    <td>行1列2</td>
   </tr>
   <tr>
    <td>行2列1</td>
    <td>行2列2</td>
   </tr>
  </tbody>
 </table>

なんて単純で簡素なソースに対しても、簡単に一行ごとにテーブル行の背景色を変えることができます。( class や id といった余計な属性が一切入らない点がスマートですよね。)

CSS セレクタの致命的弱点

しかし、もちろんそう簡単には問屋が卸しちゃくれません。

というのも、ご承知の方もおられるかもしれませんけど、この Level 3 の CSS セレクタに対応しているブラウザなんてまだまだ少ないんですよね。(比較的 Level 3 のセレクタに対応している Firefox ですら、この nth-child セレクタにはまだ対応してません。)特にシェアのいちばんデカい Internet Explorer が Level 2 ですら満足に対応してない状況ではなかなか (X)HTML ソースも簡素になりようがないというものです。

JavaScript で一行ごとに class を自動生成

前置きが随分と長くなってしまいましたけど、ここで活躍するのがこの項目の見出しのページで紹介されている一行ごとに背景色を変えてくれる JavaScript です。簡単なソースなんですけど、要は何をしているのかって、テーブルの奇数行の tr に odd、偶数行の tr に even という class をページの読込みと同時に挿入しています。あとは CSS に .odd と .even それぞれの class のスタイルを設定するだけです。

// インデントには全角スペースを使ってます。ソースをコピペする際にはご注意ください。

function alternate(id){
 if(document.getElementsByTagName){
  var table = document.getElementById(id);
  var rows = table.getElementsByTagName("tr");
  for(i = 0; i < rows.length; i++){
   if(i % 2 == 0){
    rows[i].className = "even";
   }else{
    rows[i].className = "odd";
   }
  }
 }
}

これも (X)HTML のソースに自分でいちいち class="odd" などと打ち込まなくて良いという点ではラクなんですが、table に id をつけることと、body 要素にも onload した時にテーブルスタイルの JavaScript 関数を呼び出させる必要があるので、そこを書き換える必要があるのが若干面倒といえば面倒です(一括置換で済むので大した手間じゃないかもしれないけど)。それに JavaScript を有効にしている環境でしか効かないのも難点ですね。ただ現状の主要 Web ブラウザでもクロスブラウザで動く点は CSS 3 に対する大きな利点です。

<body onload="alternate('resultTable')">
    :
 <table id="resultTable">
  <tr>
   <td>…</td>
  </tr>
 </table>
    :
</body>

| | コメント (0) | トラックバック (0)

2005-10-05

ウィンドウの大きさによってレイアウトが変化するサイト

ちょっと面白いページを見つけたので備忘録がてらの紹介です。

Nokrev という、Jeff Wheeler 氏の運営するサイトなんですが、どこが面白いって、ブラウザのウィンドウをグイっと小さくしていくと、ある大きさでそれまで4ペインだった画面が1ペインにスッと切り替わります。おおっ、これはスゴい!何度やっても痛快。(^o^;)

つまり..

1
234
こういうレイアウトがスッと、
1
2
3
4
に切り替わるわけですね。(X)HTML のマークアップがレイアウトに関係なく直線的に行われるものという考え方を視覚的に確認できるとても良いサンプルです。

早速、どういう仕掛けになっているのかをチェックしてみると、どうやら JavaScript で CSS を切り替えているようです。
http://www.nokrev.com/design/res-functions.js

(以下、抜粋。)
function checkBrowserWidth()
{
  var theWidth = getBrowserWidth();
  if (theWidth > 940) {
    setStylesheet("Regular Layout");
  }
  else {
    setStylesheet("Low-Res Layout");
  }
  return true;
}

いかがでしょう?ブラウザの幅が 940px 以上の時とそうでない時とで読み込む CSS を切り替えているわけですね。CSS だけで実現している訳ではなかったのがちょっと期待はずれで残念ですが(っていうか、さすがにムリかな..)、それでも充分 UI として面白いものを見せてもらいました。ユーザビリティの応用可能性としては充分だと思います。

最近、UXGA のような巨大な画面で Webページを見る機会がちょくちょくあって、800x600(というより実質的には 780x560)の固定レイアウトに限界を感じつつあります。さりとて 800x600 → 1024x768 に表示サイズを変更しただけでは根本的な解決にはならないので、やはりリキッドレイアウト(ウィンドウサイズに応じてページが伸縮するレイアウト)に移行していくのがいちばんなのかなと思い始めているんですが、リキッドレイアウト(ましてテーブルに依存しない CSS ベースのレイアウト)は固定レイアウトと比べて難易度が非常に高いので、最近、海外のサイトを中心にあちこち波乗りして参考になるサンプルを集めている、という次第です。(どうでもいいことかもしれませんが、どうして国内の企業系サイトは Flash を使ったサイトが多くて参考になるものが少ないんでしょうね。Flash が悪いとはいいませんけど、もう少し情報の転用やリファクタを念頭においた方がいいんじゃないかと思う今日この頃です。SEO や制作コストだけが Web標準準拠のメリットじゃないでしょうに。)

何はともあれ、日々勉強ですね。

| | コメント (0) | トラックバック (0)

« 2005年9月 | トップページ | 2005年11月 »