2011年7月アーカイブ

2011年7月31日

並べ替え!

ランキング、得点表、価格表、一覧表、、、
表形式に並べられる情報はさまざま有りますが、
数値で表される属性が複数ある場合、
各属性別に表を作りなおすのは得策ではありません。
ならば知りたい属性ごとにユーザーが並べ替えられるようにするのが得策です。

使用サンプル → 並べ替え

参考サイト → tablesorter

2011年7月24日

css3はもういらない?

css3で新たに出来るようになったことをWEBで検索すると、
これまでは画像を使って処理するしかなかった角丸表現が
css3のプロパティを使うだけで出来るようになったというコラムが氾濫しています。
確かにcss3には、使用出来るプロパティがいくつも追加されたため、
プロパティのみで角丸を実現できるようになったのは事実です。
しかし、css3はブラウザ最大手のIE8には対応しておらず、
Firefox、Safari、Chromeなどのユーザー向けにしか作れない現実もあります。
しかし、jQueryを使えば、IE8だけでなく、IE6やIE7にも適用できます。
jQuery.cornerプラグインは、角丸だけでなく、
プロパティを変えるだけで、各種デザインを実現できるすぐれものです。

使用サンプル → cornerプラグイン

参考サイト → corner

2011年7月16日

バラバラ?一枚の写真?

たくさんの写真をWEBに載せたいとき、カルーセルパネルを使って
写真を一枚ずつ省スペースにスライドショーさせる方法がかなり普及してきました。
写真を切り替えるとき、フェードや横スライドの方法をよく見かけますが、
ばらばらなパーツが組み上がって、大きな画像になる効果は他に例がありません。

使用サンプル → イメージギャラリー

参考サイト ⇒ Merging Image Boxes

2011年7月10日

ツールチップその3

CSSだけでツールチップを作るもうひとつのプラグインです。
qtipの場合、同一ページ内のツールチップのデザインは統一で、
同一ページ内で複数のカラーバリエーションを作ることはできませんでした。
今回のプラグインはClass名にスタイルを指定するため、
同一ページ内でツールチップのデザインを使い分けることが出来ます。

使用サンプル → ツールチップ

参考サイト → Colortip

2011年7月 2日

ツールチップその2

言葉をクリックすると、詳細な説明のページへリンクしていることはよく見かけますが、
ツールチップにしてしまえば、クリックしなくてもマウスをかざすだけで表示されます。
このプラグインは、指定されたid属性のなかでリンクを張って、
title属性を入れておくだけでツールチップを作れます。
引数で指定するだけで6種類のカラーバリエーションを使えます。

  1. cream
  2. light
  3. dark
  4. red
  5. green
  6. blue


参考サイト → qtip

 

OpenID対応しています OpenIDについて

このアーカイブについて

このページには、2011年7月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2011年6月です。

次のアーカイブは2011年8月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。