レスポンシブなレイアウトでテーブルの縦横を入れ替えたときにjQueryでセルの高さをそろえる方法

レスポンシブWebデザインのテーブルに関するTipsでthead要素を左に揃えて縦横を入れ替え、横長、オーバーフローにして見せる方法があるのですが、それをそのままやってしまうと、セルの内容によって高さがちがうときに横の列(行)が揃ってくれない落とし穴が・・・。

デモやサンプルなどではセルの中で改行したりといったことをしていないのできれいに見せているのですが、実際には高さが揃わずチグハグになり、うまくいかないので、jQueryで高さを揃えるスクリプトを下記のような感じで作り、resizeとload時に実行して揃えます。

function tableset(){
  $(“table”).each(function(){//テーブルを探して実行
    var n = $(“tr:nth-child(1) th”,this).size();//テーブルのヘッダーをみてセルの列数を取得
    for (var i=1 ; i<=n ; i++){
      var tarray= new Array();
      var tselector = $(“th:nth-child(“+i+”),td:nth-child(“+i+”)”,this);
      tselector.each(function(){
         $(this).attr({“data-rows”:i});
         var h = $(this).height();
         tarray.push(h);//セルの高さを配列に格納
      });
      tarray.sort(//格納した値を低い順にソート(その後、逆にする)
         function(a,b){
            if( a < b ) return -1;
            if( a > b ) return 1;
               return 0;
          }
      );
      var max = tarray.reverse();
      $(“th:nth-child(“+i+”),td:nth-child(“+i+”)”,this).height(max[0]);//一番高いものに合わせる
      }
   });
}

線の幅を揃えるなどほかにもいろいろ処理は必要になってくると思いますが、この処理一つでレスポンシブでのテーブルの課題はかなり減っていくと思います。

また、レスポンシブにしたときのみセルの中の改行を使いたくない場合は<br>タグにクラスをつけて、display:noneにするとあっさり改行しないように出来ます。

jQueryとパララックス効果を応用して遠近感のある背景を作る方法

 ページ全体をパララックスにしようとすると大変ですが、背景だけと行った使い方をする際に、遠近感を簡単にだすことが出来るのでメモ。

CSSで背景を2パターン、position:fixed,top:0,right:0,bottom:0,left:0,みたいなかたちで用意して、z-indexをそれぞれ設定。

その設定した背景をjQueryでスクロールに応じて移動させるという方法。

このページではパターンのうちの一つを逆走するように設定したストライプなので万華鏡のような効果が出ています。

サンプルコード

//ファンクションで設置するコード

function bg(){
	var s = document.body.scrollTop;//スクロール値を取得
	var bg1 = s*0.1;//動く量の設定
	var bg2 = -s*0.05;
$("#background").css({backgroundPositionY:bg1}); $("#background2").css({backgroundPositionY:bg2}); } //上のコードを実行するためのコード $(document).ready(function(){ $(window).scroll(function () { bg(); }); });

 背景を動かすだけであればほんの数行のコードで出来てしまうので、ぜひ使ってみてください。