jQuery 続きを読むでアコーディオンが開くjQuery・CSSの記述方法
お知らせやQ&Aなどで、途中までの文章を表示しておいて「続きを読む」ボタンでアコーディオンが開いて全体を表示させたい時があります。そんな時は、ちょっとしたjsとcssで実現できますのでやってみましょう。HTMLを記述するサンプル文として「人...
jQuery
jQuery 
jQuery 画像や動画をぐいっとポップアップ表示！jQueryプラグインの「Lity」
画像イメージをクリックした際に、ポップアップで表示するプラグインとしては「Lightbox」が非常に人気があり多くの方のWEBサイトに実装されていました。きっと、一度はお世話になったことのある方も多いのではないでしょうか。 (adsbygo...
jQuery 画面内に表示されたときに動きをつける「jquery.inview」
スクロールしていくと要素が順番に表示されたり、横からスライド表示されたりするWebサイトが見られるようになってきました。これは、画面内に指定した要素が表示されるタイミングでイベントを実行させるという処理をして表現をしています。今回はそのよう...
jQuery ウィンドウサイズによるクラス名の付与＆削除する方法
レスポンシブサイトを作成するときに、画面サイズによって要素のクラス名を外したり、付与したりする方法をご紹介します。jQueryを使ってクラス指定をコントールしてみましょう。 サンプル1 ・・・背景色を指定したクラス名を切り替える。 サンプル...
jQuery 横並びにしたブロック要素の高さを揃えたい！
横並びに配置したコンテンツが、中身の高さ（画像の大きさやテキストの長さ）によって、バラバラになってしまうことってありませんか？そんな場合には、コンテンツ内の要素に関係なく一番高さを取っている要素に合わせて、下のラインを揃えてくれる方法があり...
jQuery 使い勝手の良いslick.jsスライダー（レスポンシブ対応）
今では、様々なスライダーのプラグインが存在しますが、バリエーションの多さや対応の幅で使いやすいと評価の高い「slick」をご紹介します。スマホやタブレット端末などでの「スワイプ機能」にも対応しているので色々と使い勝手が本当にいいです！(ad...
jQuery 可変グリッドレイアウトを実装できるMasonry
可変グリッドレイアウトとは、ブラウザの幅に応じてコンテンツのレイアウトを調整し整列してくれる仕様のことを指します。有名なサイトで言えば「pinterest」などがそうですが、この可変型のグリッドを簡単に実現できるjQueryプラグイン「Ma...
jQuery スクロールをキーとしたアクションを「waypoints.js」で実現
画面をスクロールをすることで、ナビゲーションを上部固定する方法のひとつとして、jQueryプラグインの「waypoints.js」をご紹介します。上部ナビ固定をする方法は、これまでもいくつかご紹介させて頂きましたが、今回はアニメーションエフ...
jQuery jQueryで上部固定ナビゲーション(プルダウン付)を実装するには！
これまでにも何度か紹介してきた「固定ナビ」ですが、今回は「スクロール+プルダウン」の表現を可能にする方法をメモしておきます。まずは、デモサンプルを確認してみてください。// // DEMOHTMLを記述 入れ子になっているナビゲーションを用...
jQuery アイコン画像やイラストが、ふわふわ浮かぶ「jqFloat」で遊び心を！
雲や気球など、ふわふわ～っと浮かばせたいイラストなどをWEBサイト上に配置したいときに、jQueryプラグインの「jqFloat」を使えば実現できます。// // まずは、デモサンプルを確認してみてください。DEMO1.jqFloatをダウ...
jQuery グローバルナビをスクロール時に固定する方法
グローバルナビゲーションの仕様は、その時の流行によって左右されやすいものです。その中でも、安定してそのスタイルが良く扱われている「固定ナビゲーション」の指定方法をご紹介しておきます。今回はjQueryを使って、グローバルナビゲーションのデフ...
jQuery 読み込み完了までローディング画像でストレスを軽減する方法
ギャラリーページなど大きい画像を並べていたり、パララックスサイトのように1ページあたりの容量が比較的大きくなるようなページ構成をすると、ユーザー環境によっては配置されている画像が徐々に表示されたり、コンテンツがバラバラに表示されて崩れてしま...
jQuery 各セクションの開始位置にトップをしっくり合わせてくれるプラグイン「window.js」
表示されるwindowいっぱいにひとつのセクションを表示し、スクロールごとに別のページを閲覧しているような表現をすることが可能な「window.js」をご紹介します。スクロールをすることで切り替わる他、少しズレて静止した状態を修正してくれる...