Tag : レスポンシブ

READ MORE

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

READ MORE

以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」&コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで1…

READ MORE

レスポンシブレイアウトで構築したWebページの場合、閲覧している画面サイズによってレイアウトが最適化される構成になるのでPC用レイアウトとスマートフォン用レイアウトを任意で切り替えることは出来ないものだと思っていたのですがjQuery等を使ってmetaの「viewport」を切り替えることによってスマートフォンでもPC…

READ MORE

jQueryを使ってのレスポンシブに対応したスライドショーを実装するいくつかのパターンを紹介してきましたが、サムネイルも何もなしでただ画像(コンテンツ要素)がクロスフェードするだけのシンプルなスライドショーのレスポンシブに対応したパターンの要望を多くいただいたので試しに作ってみたのを紹介してみます。jQueryでレスポ…

READ MORE

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

READ MORE

ちょっと前に話題になっていた、YouTubeやGoogleマップやInstagramなどのページ内に埋め込む際のURLや埋め込みコードを簡単にレスポンシブ化してくれるサービス「embedresponsively.com」が便利に使えそうだったので自分用メモとして紹介してみます。embedresponsively.com…

READ MORE

先日ここで、レスポンシブ対応のスライドショーとして、「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」と題して、クロスフェードで切り替わるレスポンシブスライドショーを紹介しましたがフェード切り替えばかりじゃおもしろくないと思い同様の構成で切り替わる際に、画像を分割してアニメーション…

READ MORE

半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して画面幅めいっぱいでのコンテンツスライダーを紹介しましたが当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応さ…

READ MORE

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

READ MORE

先日ここでレスポンシブ対応のスライドショーの試作品として「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法 」と題してjQueryを使ってのレスポンシブ対応のサムネイル付きクロスフェードスライドショーを紹介しましたが、操作面に関してフリック操作には対応していなかったので、メイン部分に…

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