jQuery ウィンドウサイズによるクラス名の付与＆削除する方法
レスポンシブサイトを作成するときに、画面サイズによって要素のクラス名を外したり、付与したりする方法をご紹介します。jQueryを使ってクラス指定をコントールしてみましょう。 サンプル1 ・・・背景色を指定したクラス名を切り替える。 サンプル...
レスポンシブ
jQuery 
jQuery 使い勝手の良いslick.jsスライダー（レスポンシブ対応）
今では、様々なスライダーのプラグインが存在しますが、バリエーションの多さや対応の幅で使いやすいと評価の高い「slick」をご紹介します。スマホやタブレット端末などでの「スワイプ機能」にも対応しているので色々と使い勝手が本当にいいです！(ad...
jQuery レスポンシブ対応のフォトギャラリー「least.js」
スマートフォンなど、様々なデバイス幅に対応したフォトギャラリーを、またひとつご紹介致します。今回は、ポップアップではなくダウンスライドでページの先頭に「写真とテキスト」を表示させることが出来るものになります。// // デモサンプル▼こちら...
jQuery レスポンシブ対応メニュー用jQueryプラグイン「meanmenu.js」
ウィンドウサイズが小さい場合に、自動的にナビゲーションを変形させてくれるjQueryプラグイン「meanmenu.js」のご紹介です。PCやタブレットで表示する際は、ナビゲーションを横並びに配置しておき、ウィンドウサイズがある一定のサイズを...
jQuery マルチデバイスに対応してタブからアコーディオン表示に切り替える「Easy Responsive Tabs to Accordion」
PC・タブレット・スマートフォンなど、マルチデバイスに最適化する軽量なjQueryプラグイン「Easy responsive tabs」をご紹介します。スクリーンサイズが小さくなる際に、タブ表示からアコーディオン表示へ切り替えることの出来る...
jQuery レスポンシブ対応のjQueryプラグイン「Glide.js」スライドショー
スマートフォンやタブレット端末のスワイプにも対応し、かつレスポンシブなスライドショーが実現できるjQueryプラグイン「Glide.js」をご紹介します。横幅100%のイメージスライドショーを手軽に実装できるので使いやすいです。Glide....
HTML レスポンシブWebデザインを基本から！
今更ではありますが、2012年頃からWeb業界で話題になっているレスポンシブWebデザイン、スマートフォンの普及率が急速に拡大したこともあり、2014年現在では数多くのコーポレートサイトや個人サイトなどで広く取り扱われてきています。レスポン...
jQuery レスポンシブに対応した簡単メニュー
PC・タブレット・スマホ、それぞれに対応したレスポンシブなメニューを「jQuery」と「CSS」で簡単に作成できます。シンプルなものですが、その作り方をメモしておきます。サンプルを用意しましたのでまずは確認してみてください。(adsbygo...
jQuery ぐわわっと移動するグリッド配置してくれるdylay.js
グリッドレイアウトで要素を配置してくれるプラグインに、ぐわわっと大きな動きで移動するjQueryプラグインdylay.jsを使ってみました。デモサンプル// // 1.dylay.jsをダウンロードA responsive "dynamic...