グラデーションや影を，JavaScriptで付ける方法 （画像を使わず jQuery だけでクロスブラウザなWebデザイン）
HTML要素の背景にグラデーションをかけたい場合，色つきの画像をそのボックス要素の大きさに合わせて作り，背景として指定する方法がある。
しかし画像をいちいち個別に作るのは面倒だ。
（CSSで背景画像のサイズを自動調整する方法は無い。貼る個所のサイズに合わせて作っておく必要がある。）
また，テキストや要素に影（ドロップシャドウ）をつけたい場合，CSSを工夫して何段もうっすら重ねるなどの方法がある。
でもこれも，全ての段を手で書いて微調整していくのは苦痛だ。
実はこれらの作業は，JavaScript (jQuery) で簡単にできる。
例えば右上のイメージのようなページを作りたい場合，下記のコードのようにすればよい。
画像は一切作らなくてよい。
<body> <div style="position:relative"> <table class="hoge"> <tbody> <tr> <th width="100">ようこそ<br>hogeへ</th> </tr> </tbody> </table> </div> <div style="position:relative"> <h2 class="my_title">ここはhoge</h2> </div> <div style="position:relative"> <table class="hoge"> <tbody> <tr> <th>見出し1</th> <td>foo</td> </tr> <tr> <th>見出し2</th> <td>boo</td> </tr> </tbody> </table> </div> <!-- ここまでは普通に装飾なしのHTMLを書いただけ --> <script language="JavaScript" src="jquery.js"></script> <script language="JavaScript" src="setGradient.js"></script> <script language="JavaScript" src="jquery.dimensions.js"></script> <script language="JavaScript" src="jquery.dropshadow.js"></script> <script language="JavaScript"> // ページ読み込み時に実行 $(function(){ /* 前処理として装飾 */ // テーブルにCSS設定 $(".hoge").css({ "border-collapse" : "separate", "border-spacing" : "10px" }).attr( "cellspacing", "10px" // IE7ではborder-spacingプロパティの代わりにcellspacing属性を使う // http://journal.mycom.co.jp/special/2007/ie7/003.html ); $(".hoge th, .hoge td").css({ "padding" : 5, "border" : "solid 1px #888888", "background-color" : "#ffffff" }); /* グラデーション */ // hogeというクラス要素の下にある全thの背景に $(".hoge th").each(function(){ setGradient( this, "#FFF8DC", "#D88FD8", 0 ); }); /* 影 */ // テーブルに $(".hoge").dropShadow({ left : 5, top : 5, opacity : 0.7 }); // 見出しに $(".my_title").dropShadow({ left : 3, top : -12, opacity : 0.4 }); // IE対策として見出しの影の位置を補正 $(".my_title").css({ // topとbottomだけmarginを指定するとうまくいく "margin-top" : "15px", "margin-bottom" : "15px" }); }); </script> </body>
グラデーションをかけるのは
setGradient( 要素ID, 開始色, 終了色, 角度 );
で可能。
※setGradient.js のダウンロード：
シャドウを付けるのは
$( 要素 ).dropShadow({
left : 左右方向の位置,
top : 上下方向の位置,
opacity : 透明度
});
で可能。
必要なファイルは
- jquery.js
- jquery.dimensions.js
- jquery.dropshadow.js
の３つ。
jQuery でドロップシャドウ
http://allabout.co.jp/internet/javasc...
webサイトを作る際には，
- 各ページ中でHTMLを構成する際，これらのエフェクトをかけたい要素に専用のクラスを指定しておく。
- 各ページで共通に読み込むjsファイルで，ページ読み込み時にエフェクトをかけるように指定する。
これで，あたかもサイトを「元からそういう素材で作った」ように見せる事ができる。
補足：シャドウをかける際のz-index
IEでドロップシャドウの位置をずらさないためには，シャドウをかけたい要素を
<div style="position:relative"> 〜 </div>
で囲っておく必要がある。
原因はIEでのz-indexの仕様。
IEでposition:relativeを指定するとz-indexが効きません
http://gac.kir.jp/21/21658
- IE は親子関係重視
- FF は、奥行き階層重視
IEでのz-indexへの対処について
http://www.tagindex.com/cgi-lib/q3bbs...
IEにはスタック文脈生成の独自仕様がある。
IEのz-indexの扱い
http://www.k-brand.gr.jp/log/000589
下位に表示されるはずの半透明のレイヤが，上位にかぶさってマスクになってしまう現象
補足２：グラデーション生成のためのプラグイン
jquery.gradientというのがあるが，これはFirefoxのみ。
自由自在にグラデーションを付けるjavascript「jQuery gradient」
http://www.skuare.net/test/jGradient2...gradientで画像なしで擬似的なグラデーションを表示する
http://00.dojin.com/web/jquery_plugin/#h2_4
サンプル：
<body> <script src="jquery.js"></script> <script src="jquery.gradient.js"></script> <script src="jquery.dimensions.js"></script> <input type="button" value="a" onClick="f()"> <div id="my_div" height="30">fugaaaaaaaaaaaaaa</div> <script language="JavaScript"> function f(){ $( "#my_div" ).gradient({ from : '82B311', to : '9ed41f', direction : 'horizontal', length : 30 }); } </script> </body>
IEでは無効。
もしクロスブラウザにしたいなら，上述のsetGradient()を使う。
setGradient単体ではjQueryの強力なセレクタ機能を享受できないから，jQueryの each() の中の処理に組み込んで解決している。
  |
