Tag : レスポンシブ

READ MORE

マウスホイールを使ってスクロールした際に縦にスクロールするのではなく、画面全体を横(水平)にスクロールさせることでページ全体に流れるような演出を加えているWebサイトを最近よく見かけます。そんなマウスホイールでの横スクロールに加えてページ上の要素をレイヤー状に重ね合わせて、奥行のあるパララックス効果もつけてスクロールさ…

READ MORE

少し前に「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」と題して、スマートフォン向けレイアウト時ではメニューをアコーディオン動作で展開するレスポンシブナビゲーションUIを紹介しました。レスポンシブナビゲーションUIのパターンとしてはアコーディオン動作ではなくハンバーガーメニューボタン…

READ MORE

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

READ MORE

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

READ MORE

レスポンシブサイトではウィンドウの幅(画面解像度)によってレイアウトの調整や動作処理の制御を行います。ウィンドウサイズ(画面幅/高さ)の取得方法に関してはスクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用…

READ MORE

jQueryではブラウザウィンドウをリサイズした際に発生するイベント情報は取得できますがリサイズ動作完了時のコールバックの設定は用意されていません。そのリサイズイベントのコールバック処理を可能にしてくれるjQueryプラグイン「ResizeEnd」が便利そうだったので自分用メモとしてご紹介。Resize End | G…

READ MORE

レスポンシブWebデザインのサイトでテーブル(表組み)を組み込む際に要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりとレイアウトに苦労することがよくあります。そんなテーブルをレスポンシブ対応させる際にいろいろと便利に使えそうなjQuer…

READ MORE

少し前に「jQueryでページの最上部に位置固定したフルスクリーンスライドショー(クロスフェード)を設置する方法」と題して、ページ最上部に位置固定したクロスフェードスライドショーのサンプルを紹介しましたが、同様の形でクロスフェードではなくフルスクリーンの状態で画像全体が横スライドして見せるスクリプトサンプルを作ってみた…

READ MORE

最近のWebサイトでは写真をフルスクリーンでダイナミックに見せる技法や演出が多く見られます。背景画像のフルスクリーン表示やフルスクリーンのスライドショーなど様々ありますがjQueryを使って、ページ最上部(ページヘッダー)にフルスクリーンでのスライドショーを設置しスクロールすると下から通常のコンテンツが表示される、とい…

READ MORE

Webページ内に並べられた要素の高さを揃えるスクリプトサンプルやjQueryプラグインを今までもいくつか紹介してきましたが、並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形でのスクリプトサンプルを試しに作ってみたので紹介してみます。jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法まずは動作…

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