Webサイト内に横スクロールさせるエリアを作成した際にスマートフォン表示ではスクロールバーを表示させることができず、そのエリアが横スクロールさせることをユーザーに伝えるために苦労したりします。そんな時に使える横スクロールさせるエリアが出現した時にアニメーション付きのアイコンを表示してそのエリアが横スクロールできることを…

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

jQueryなどでアニメーションを実装した際にはアニメーション終了時に処理を実行させるのは比較的簡単なのですがCSSアニメーション制御の場合は少々面倒だったりします。そんなCSSアニメーションの終了イベントを取得してくれるJavaScript「Detecting CSS Animation and Transition…

iPhone6 / iPhone6 Plusの登場によりWebサイトを作る上で今まで以上に画面サイズのバリエーションを数多く想定しなくてはならない状況になってきました。中でも「iPhone6 Plus」は解像度が1920×1080と大きく、タブレットに近いサイズにまでなっておりこの先、Webページを作成する際に「iPh…

Webページ上のテキストや数値を表示する演出でスロットマシンの様な回転アニメーションの必要性に駆られた事がこれまでに何度かありその度に苦労していたのですがとても簡単に同様のアニメーションを実装することができるスクリプトがあったので自分用メモとして紹介してみます。Odometer - Transition numbers…

最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法としてパララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ次画面へ遷移するさせる技法がよく見られます。そんなWebページ内でスク…

以前ここで「jQuery（JavaScript）でiPhone、iPad、Androidなどデバイスを判別してURLをリダイレクトする方法」と題して、それぞれのデバイスごとに振り分ける方法を紹介しましたがAndroidはモバイルとタブレットの振り分けはできていなかったのですがiPhoneとAndroidモバイル、iPa…

今やWebサイトを彩るのに主流といっても過言ではないjQuery。とても便利で使いやすく構成されていますが、スマートフォン向けサイトなどで使用する場合はレスポンシブWebデザインが重要視されている昨今に対して、ライブラリファイル自体の重さの負荷が懸念点としてあげられてしまいます。そんなjQueryをスマートフォン向けに…

最近ではアプリなどでGPSを使った位置情報の取得する機能をよく見かけますがJavaScriptを使ってそのようなGPS位置情報を利用するサンプルを作ってみたので紹介してみます。JavaScriptでは「Geolocation API」というAPIを使って「navigator.geolocation」オブジェクトで位置情…

最近ではWebサイトを構築する際、PC画面での表示のみならず、スマートフォンやタブレットPCなど複数媒体でのサイト閲覧を意識した設計およびレイアウトを考慮しなくてはならなくなってきています。閲覧するブラウザやOSなどで振り分けを行う方法もいろいろありますが、サイトを閲覧した時のウィンドウサイズによって読み込むCSSを切…