Tag : アコーディオン

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR