5年ほど前にもWebページ上の要素がスライドアニメーションによって流れ続けるループスライダーのスクリプトを紹介しましたがブラウザによってスライド動作を長時間続けると動作が重くなったり、いくつか懸念点があったので、そのような懸念点の改善とスクリプト全体をよりシンプルな構成にしたものを紹介してみます。【横スライドパターン】…

ここでも何度か紹介させていただいている簡単にホームページを作成することができるサービス「Wix.com」が展開している単なるWebサイトではなく、ネットショップを簡単に開業することができるサービス「Wixストア」が高機能かつ操作もしやすく、便利そうだったのでご紹介してみます。Wixストア／Wix StoresWixスト…

古いIEのバージョンのサポートが終了したことやプログレッシブエンハンスメントの考えから、CSS3を使ってのレイアウトやアニメーションを気兼ねなく使えるようになってきました。画像やボタンにロールオーバーした際にCSSアニメーションを使ってのさまざまな演出方法についてまとめているサイトも多々あります。そんなCSSロールオー…

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

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

以前ここでも紹介した、HTMLやCSSなどの知識がなくても簡単に無料ホームページを作成することが可能なWebサービス「Wix」のWebページ作成用エディタが新しくなって、より便利に進化していたのでご紹介します。ホームページ作成サービスWixの新エディタWix.com【前回記事】無料で簡単にホームページが作成できるサービ…

この度「プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート」というタイトルにて本の執筆をさせていただき、2016年2月10日にSBクリエイティブ社さまから出版させていただくことになりました。プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート著者：矢次悟郎価格：24…

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

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

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