【jQuery】スライダープラグイン「slick」実装サンプル集
slick（スリック）の使い方をまとめてくださいー わかりましたー よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by
...
【jQuery】チェックボックスにチェックを入れるとボタンが活性化する
利用規約に同意（チェック）するとー 申し込みボタンが活性化しますー こんな感じの依頼内容だったら 実装してみましょう See the Pen 【jQuery】チェックボックスのチェックを入れるとボタンが活性化する by
...
【jQuery】スクロール途中から追尾（fixed）、指定位置（class）で消える
jQueryを使って、スクロールの途中から追尾（fixed）、そして、指定の位置（class）で消える、というのを実装してみたいと思います。 なんだか複雑だー 理解できれば意外と簡単ですー 実装サンプル See the
...
【jQuery】Lightboxプラグイン『Colorbox』の実装サンプル集
Lightboxプラグイン『Colorbox』の使い方と、制作に役立つ実装サンプルをまとめてみました。簡単に実装することができるのでおすすめです。（個人的には『PhotoSwipe』をおすすめしますが、jQueryではな
...
【24/06】Xでいいねがいっぱい付いたWebデザインランキング、7選。
6月号のランキングですねー 梅雨の季節でしたー デザインのことでは、その月にX（旧Twitter）で紹介した中から「いいね」がいっぱい付いたWebデザインを7つ選ぶランキング企画を毎月やっています。今回は2024年6月版
...
【jQuery】固定した背景画像がスクロールで切り替わる実装サンプル（スマホでも切り替わります）
スクロールすると固定した背景画像が切り替わる実装サンプルをまとめてみました。CSSだけで対応できると素敵なのですが『background-attachment: fixed;』がスマホだと効かないので、今回はjQuery
...
【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら）
するする動くと楽しいですねー 固定ヘッダーがある場合はクラスやIDを指定して高さ調整しましょうー JavaScript 固定のヘッダー（ナビ）がある場合はヘッダー分の高さを調整しなければなりません。レスポンシブだと高さが
...
【24/05】Xでいいねがいっぱい付いたWebデザインランキング、7選。
5月号のランキングですねー 新緑がまぶしい季節でしたー デザインのことでは、その月にX（旧Twitter）で紹介した中から「いいね」がいっぱい付いたWebデザインを7つ選ぶランキング企画を毎月やっています。今回は2024
...
【jQuery】『slick』を使って全画面表示のスライドショー
slickを使って全画面表示のスライドショーってできますかー レスポンシブを考えて『background』で対応してみましょうー 【実装】全画面表示（background対応） しっかりレスポンシブ対応したいので『bac
...
【jQuery】モバイルファーストが素敵な『fancybox3』実装サンプル集
Lightboxプラグイン『fancybox3』の使い方と、制作に役立つ実装サンプルをまとめました。とってもモバイルファーストに設計されているのでとってもおすすめです。 モバイルファーストですねー 共有ボタンもありますよ
...
【jQuery】iOS（Safari）だと100vhが少しはみ出てしまう対策
あ、iPhoneで見るとちょっとズレてますー そんな時はブラウザの高さを自動で取得しちゃえばOKですよー 画像を画面いっぱいに表示する（ブラウザサイズを自動で取得してiOS対策） See the Pen 【jQuery】
...
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
jQueryの遅延（少し遅らせて表示させる、最近よく見かけるあれです）プラグイン『inview.js』の使い方と、制作に役立つ実装サンプルをまとめました。CSSのアニメーションと組み合わせることでサイト制作の幅がとっても
...
【jQuery】遅延表示『inview.js』と『lazysizes.js』を組み合わせて、『重いページよ、さようなら』
jQueryの遅延プラグイン『inview.js』と、画像の遅延表示ができる『lazysizes.js』を組み合わせるととてもいい感じだったので備忘録です。 ふわーっとできますかー 画像の読み込みを遅くして、コンテンツも
...
【jQuery】横並びの高さを揃える『matchHeight.js』実装サンプル集
横並びの要素の高さを揃えてくれるプラグイン『matchHeight.js』の使い方と、制作に役立つ実装サンプルをまとめました。「flexboxの中にあるこの部分の高さを揃えたいのだけど！」って言う時にはとってもおすすめで
...
【jQuery】クリッカブルマップ『RWD Image Maps』を使いこなせば、レスポンシブでもズレませーん
スマホだとクリッカブルがズレますー そんな時は『RWD Image Maps』を使いましょうー 【実装】丸でクリッカブルしてみました 画像サイズ（widthとheight）の指定は必須です。 See the Pen 【j
...
【24/04】Xでいいねがいっぱい付いたWebデザインランキング、7選。
4月号のランキングですねー 春らしいデザインが多かったですー デザインのことでは、その月にX（旧Twitter）で紹介した中から「いいね」がいっぱい付いたWebデザインを7つ選ぶランキング企画を毎月やっています。今回は2
...
【24/03】Xでいいねがいっぱい付いたWebデザインランキング、7選。
3月号のランキングですねー 春の気配を感じるデザインですー デザインのことでは、その月にX（旧Twitter）で紹介した中から「いいね」がいっぱい付いたWebデザインを7つ選ぶランキング企画を毎月やっています。今回は20
...
【jQuery】 ローディング、実装サンプル集
ローディングをまとめてみました。おしゃれなサイトさんはローディングを組み込んでいるなー、と思う今日この頃です。意外と簡単なのでお時間ありましたら組み込んでみてくださいませ。 ローディングを設定したいのですが難しいですかー
...
【jQuery】指定した場所までスクロールすると下からふわっと出てくる
あのー、下からふわっと出したいのですが、場所指定ってできますかー？ 場所指定、できますよー 【サンプル】指定した場所までスクロールすると下からふわっと出てくる まずはスクロールですねー See the Pen 【jQue
...
【CSS】counter-incrementを使って擬似要素をリスト化する
番号をふりたいんですけどー あー、擬似要素を使ってのリスト化ですねー サンプル一覧 1段目／1からはじまる2段目／0からはじまる3段目／01からはじまる4段目／001からはじまる See the Pen CSS / co
...
【24/02】Xでいいねがいっぱい付いたWebデザインランキング、7選。
2月号のランキングですねー まだまだ寒い季節でしたー デザインのことでは、その月にX（旧Twitter）で紹介した中から「いいね」がいっぱい付いたWebデザインを7つ選ぶランキング企画を毎月やっています。今回は2024年
...