Super TablesというJavaScriptとCSSのツールです。
サイトはこちら 。
Super Tables

色々検索していて、「バシャログ　tableの行と列を固定してスクロール！！Super Tables」というページで見つけました。
ありがとうございます。

使い方は上記サイトに詳しく載っていますが、簡単にいうと、公式サイトで配布されているファイルをダウンロードして解凍します。
中にCSSファイルとJavaScriptファイルがはいっていますので、それをHTMLで読み込みます。
あと、少しJavaScriptとCSSの設定が必要ですが、それだけやればOKです。

CSSでは、テーブルの幅や高さを指定します。
JavaScriptでは、固定する列数や行数を指定します。
なので、「上の3行と、左の3列は固定、あとはスクロールする」みたいなことが簡単にできてしまうわけです。

かなり素晴らしいです。
縦や横に長い表を使う際には活躍しそうです。

ということで、私は自分でパンくずリストを作るようにしています。
関数（function）にしているので、これをfunctions.phpに入れておけば、どこからでも簡単に呼び出せます。

ちなみにこんな感じです。

function pankuzu_get(){
//------------------------------------
// パンくずリストを編集
//------------------------------------
global $post;
echo " <ul class=\"pankuzu\">\n";
echo " <li><a href=\""; bloginfo(url) ; echo "/\">クラブエナー　ホーム</a>&nbsp;&nbsp;&gt;&nbsp;&nbsp;</li>\n" ;

if(get_post_ancestors($post)){
  $hierarchy_count = "";
  foreach(array_reverse(get_post_ancestors($post)) as $upper_post){
    echo ' <li><a href="'; bloginfo(url);
    echo "/" . get_page_uri($upper_post) . '">' . get_the_title($upper_post) . "</a>&nbsp;&nbsp;&gt;&nbsp;&nbsp;</li>\n";
  }
}

if(is_month() || is_single()){
  echo ' <li><a href="'; bloginfo(url);
  if (is_category('1') || in_category('1')){
    echo "/news\">新着情報</a></li>\n";
  }else{
    echo "/column\">コラム</a></li>\n";
  }
}

global $monthnum, $year;

if(is_archive() && !is_category()){
  $year_month = $year . "年" . $monthnum . "月";
  $archive_title = $year_month . "　" . $cat_name;
  echo " <li>$archive_title</li>\n";
}elseif(!is_single()){
  echo " <li>";
  wp_title('');
  echo "</li>\n";
}
echo " </ul>\n";

}

これをfunctions.phpに書いておき、パンくずリストを表示させたい部分で、

 <?php pankuzu_get(); ?>

と書いてやればＯＫ。
簡単です。

どんなことをしているかというと、上位のページを取得して、それを順番に表示させる、というものです。
ちなみに、上記ソースは、クラブエナーのサイト用にカスタマイズしていますので、みなさん使われる場合には各自カスタマイズしてください。

それは、デザインが先にありその後にコーディングを行う訳ですが、コーディング出来る人がデザインをする場合、少なからずともコーディングを意識してデザインをすると思うのです。

デザインは本来、独創的であるべきです。

しかし、のびのびとデザインされたWEBサイトというのは、デザインがコーディングを難しくする場合が往々にしてあるのです。

車ならば、エンジンを先に作るか、シャーシを作るか、を考えると難しい所です。エンジンは車を動かしますが、シャーシは車を支えるもの。どちらが大事かというよりもどちらにコンセプトを置くかどうかによって変わります。

しかし、WEBサイトの場合は、デザインかソースか？となると、まず先に制作しなければならないのはデザインです。

これを考えると、デザインとコーディングの両方が出来る人がサイトを構築するとコーディングしやすいデザインとなり進化が止まります。

SOHOなどでデザインからコーディングまで全てを担っている人は、デザインをする時にはコーディングの事を一切忘れ、自由にデザインしてみることが重要です。

コンセプトがデザインを作りますので、コンセプトを100％表現する為にも、コーディングがデザインを制約してはなりません。

そういったことを考慮しながらのコーディングは大変です。またコーディングの世界も日々進化しています。

しかしその技術もクライアントに伝わる事はほとんどありません。

見た目と、使い易さと、結果で判断されます。

それでもクライアントの事を考え、コーディングすることはいずれ伝わると信じています。そしてうわべだけのコーディングを行っている企業は淘汰されて行くでしょう。コーディングはいわばホスピタリティの固まりです。なぜならば妥協点はいくらでもあるのですから。

その中でも100％に近い状態でコーディングし納品する事で、後々のメンテナンスや扱い易さ、表示速度や対応機種などで差が出てくるはずです。

これからも我々は常に進歩を続けながら、WEB制作に取り組んでまいります。今後とも何卒よろしくお願い致します。

WEB制作のお問い合わせはこちら＞＞

パソコン自体がワイドになり、サイドを余裕をもって使える分、ヘッダーにあるべき情報をサイドに持って行き、見せたいコンテンツをなるべく、上から表現するという手法も有りではないでしょうか。

ユーザビリティ的にもヘッダーが大きなサイトは様注意です。
トップページは別ですが、ページが変わるごとにスクロールをしないとコンテンツ部分があまり見えないサイトは良く無いです。

少なくとも、どんな事が書いてあるかが見え、変化があるように作るのがベストですね。

iidaのサイトは理想的な形かも。
http://iida.jp/calling/

今後、WEBのかたちがどのように変化していくのか楽しみです。
 

ある案件で使えるかな、と思って探していて、実際、思う動作は実現できたのですが、結局この話は没になってしまいました。

ということで、もったいないのでメモ代わりに公開しておきます。

<やりたいこと>

・テーブルの上と左にヘッダーがある。
・表の中身はかなり縦にも横にも長くなる可能性があり、スクロールできるようにしたい。
・ただし、ヘッダーは常に表示させておきたい。

要はエクセルの「ウィンドウ枠の固定」のようなことです。

これをどうやって実現させようか、ということで色々探していたのですが、なかなかうまい情報に当たらず・・・。
最終的にたどり着いたのが、

http://hikazoh.tdiary.net/20050303.html

このページでした。

ただし、このコードのサンプルは、上部のヘッダーのみ固定できるというものだったので、ちょっと改造しました。

もう一つ表示させるヘッダーを「head2」と名付け、

  head2_obj.scrollLeft = detail_obj.scrollLeft;
  head2_obj.scrollTop  = detail_obj.scrollTop;

というようなコードを追加しました。

コードのサンプルを置いておきます。
（一応IE6,IE7,Firefoxで動作確認済みです）

scroll_sample.html
main.css

ポイントは、スタイルシート（CSS）の
　　overflow:hidden;
と、
javascriptの、
　　スクロールバーのコントロールをイコールで同期させる、と言うところですね。
なるほど～。
と、感心しました。

もし同じような情報を探している方がいて参考になれば幸いです。