レスポンシブサイトでメニュー等のナビゲーションを扱う際、PC向けレイアウト時にはボタンをページ上に並べ、スマートフォン向けレイアウト時にはボタン一式を折りたたんでハンバーガーボタンでメニューを開閉させるUIにすることでスマートフォン向けの画面でもナビゲーションをコンパクトに扱えるUI技法があります。そんなレスポンシブ対…

レスポンシブWebデザインでのサイト構築において、PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIをスマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに切り替える動作を見かけることがあります。それぞれの画面解像度によって最適なUIに切り替える手段になりますがそんなレスポンシブ…

Googleさんの画像検索で使われているサムネイルをクリックするとすぐ下にアコーディオン形式で詳細エリアが広がるUI。このUI動作を実装するには「SuperBox」というjQueryプラグイン等が有名だったりしますが画面仕様等ちょっと理想と違う構成のところがあったり動作が少し重かったりしたので実験がてらjQueryを使…

レスポンシブ対応を求められるWebサイト制作ではナビゲーションメニューの構成について何かと気を使わなくてはいけない点が出てきます。ウィンドウサイズによってナビゲーションメニューの形状を変化させるやり方は様々ですが便利に使えそうだと思ってメモしておいたJSやCSSでのチュートリアルがそこそこ溜まっていたので11種類ほどま…

昨年（2010年）に、サイト制作で役立ちそうなjQueryプラグインをまとめて紹介している記事を、自分用にメモっていたものが、まとまりきらなくなってきたので、ここに一部まとめて紹介してみます。jQueryを使ってサイトに華やかな演出を加えたり、UIを勉強するために役立ちそうなサイト（ブログ）のまとめ。60 Useful…

Webサイト上で今では頻繁に見かけるアコーディオンUI。この動作は基本的にはJavaScriptやjQueryなどスクリプトを使って実装することになりますが、CSS3アニメーションだとスクリプトを使わずにCSSのみでアコーディオンUIを実装することが可能になります。今回はそんなアコーディオンUIをCSSのみで実装する方…

Webサイトでよく使うUIウィジットを、パーツを分けた形で30種類以上パックした「Wijmo」がおもしろそうだったのでメモ書き。≫Wijmo - jQuery UI Widgets用意されているウィジットは、テーブル、グラフ（棒、円、チャート）、ドロップダウン、フォルダーツリー、アコーディオン、タブ、ダイヤログ、透過シ…

今まであらゆるjQueryライブラリを見てきましたが、jQueryを使ってWebページ上で表現できる基本的な動き（タブやアコーディオンや…）の他、数々のjQuery動作を演出部分の細部までこだわって構成されている「jQuery TOOLS」がすごい。≫jQuery TOOLS - The missing UI libr…

Web上にはjQueryベースでのアコーディオン動作の実装サンプルスクリプトがたくさんありますが、シンプルなスクリプトで理想的な動作がなかなか見あたらなかったので、自作で作ってみたサンプルの紹介。アコーディオン動作は使用する場面によって、いくつかパターンがあります。複数展開させる項目がある場合でのアコーディオン動作は、…

久々にjQueryライブラリを多数紹介しているエントリーの紹介。Web上のインターフェースなどでの用途別で分けて、おすすめライブラリを50種類紹介しています。≫50 Fundamental jQuery Controls, Components and Plugins - Speckyboy Design Magazi…