デザインのメモ

少し複雑な『タブ切り替え』を実装してみました。 ▽今回の実装テーマ なんだか難しそうですねー できる自信がありませんねー もくじ シンプルなタブ切り替え 上下のタブの連動 下のタブを押すとスクロールして上にスクロールして

...

プルダウンメニューで ページ内をスクロールさせてみましょう もくじ 実装サンプル メモ さいごに 実装サンプル See the Pen Pull-down menu / Link in page by 125naroom

...

slick（スリック）の使い方をまとめてくださいー わかりましたー よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by

...

利用規約に同意（チェック）するとー 申し込みボタンが活性化しますー こんな感じの依頼内容だったら 実装してみましょう See the Pen 【jQuery】チェックボックスのチェックを入れるとボタンが活性化する by

...

jQueryを使って、スクロールの途中から追尾（fixed）、そして、指定の位置（class）で消える、というのを実装してみたいと思います。 なんだか複雑だー 理解できれば意外と簡単ですー 実装サンプル See the

...

Lightboxプラグイン『Colorbox』の使い方と、制作に役立つ実装サンプルをまとめてみました。簡単に実装することができるのでおすすめです。（個人的には『PhotoSwipe』をおすすめしますが、jQueryではな

...

スクロールすると固定した背景画像が切り替わる実装サンプルをまとめてみました。CSSだけで対応できると素敵なのですが『background-attachment: fixed;』がスマホだと効かないので、今回はjQuery

...

するする動くと楽しいですねー 固定ヘッダーがある場合はクラスやIDを指定して高さ調整しましょうー JavaScript 固定のヘッダー（ナビ）がある場合はヘッダー分の高さを調整しなければなりません。レスポンシブだと高さが

...

slickを使って全画面表示のスライドショーってできますかー レスポンシブを考えて『background』で対応してみましょうー 【実装】全画面表示（background対応） しっかりレスポンシブ対応したいので『bac

...

Lightboxプラグイン『fancybox3』の使い方と、制作に役立つ実装サンプルをまとめました。とってもモバイルファーストに設計されているのでとってもおすすめです。 モバイルファーストですねー 共有ボタンもありますよ

...

あ、iPhoneで見るとちょっとズレてますー そんな時はブラウザの高さを自動で取得しちゃえばOKですよー 画像を画面いっぱいに表示する（ブラウザサイズを自動で取得してiOS対策） See the Pen 【jQuery】

...

jQueryの遅延（少し遅らせて表示させる、最近よく見かけるあれです）プラグイン『inview.js』の使い方と、制作に役立つ実装サンプルをまとめました。CSSのアニメーションと組み合わせることでサイト制作の幅がとっても

...

jQueryの遅延プラグイン『inview.js』と、画像の遅延表示ができる『lazysizes.js』を組み合わせるととてもいい感じだったので備忘録です。 ふわーっとできますかー 画像の読み込みを遅くして、コンテンツも

...

横並びの要素の高さを揃えてくれるプラグイン『matchHeight.js』の使い方と、制作に役立つ実装サンプルをまとめました。「flexboxの中にあるこの部分の高さを揃えたいのだけど！」って言う時にはとってもおすすめで

...

スマホだとクリッカブルがズレますー そんな時は『RWD Image Maps』を使いましょうー 【実装】丸でクリッカブルしてみました 画像サイズ（widthとheight）の指定は必須です。 See the Pen 【j

...

ローディングをまとめてみました。おしゃれなサイトさんはローディングを組み込んでいるなー、と思う今日この頃です。意外と簡単なのでお時間ありましたら組み込んでみてくださいませ。 ローディングを設定したいのですが難しいですかー

...

あのー、下からふわっと出したいのですが、場所指定ってできますかー？ 場所指定、できますよー 【サンプル】指定した場所までスクロールすると下からふわっと出てくる まずはスクロールですねー See the Pen 【jQue

...

番号をふりたいんですけどー あー、擬似要素を使ってのリスト化ですねー サンプル一覧 1段目／1からはじまる2段目／0からはじまる3段目／01からはじまる4段目／001からはじまる See the Pen CSS / co

...

ん、ハンバーガー？ 三本線がハンバーガーに見えるからってことらしいですよ クリックエフェクト サンプル集 いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。

...

画像は使わないんですか？ CSSだけで簡単にできますよー 三角アイコン 疑似要素「:before」でテキストの横に三角アイコンをつけています。 See the Pen CSSだけで、三角アイコン by 125naroom

...

jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。 いろいろありますねー いろいろあるのでまとめましたー アコーディオン、シンプル版 See the Pen アコーディオン、シ

...