100を超える実装スキルを身につけ、
ワンランク上のコーダーへ
100を超える実装スキルを身につけ、
ワンランク上のコーダーへ
Scroll
Web制作のスキルを身につけ、
迎えた初めての案件。
基本的なことは学んできたが、
デザインカンプ通りに
うまく実装ができない。
実装したことのないアニメーション、
うまく動かないスライダー。
ネットや本で色々調べるが、
時間だけが溶けていく。
気づけば時給は100円程度。
コードストックはしてきたけれど、
うまく使いこなせない。
経験不足を痛感しつつも、
情報がありすぎて
何を学べば良いかわからない。
時間もないし、実務に使える実装を
効率的に学ぶ方法はないものか……。
そんなあなたに、
私が実務で培った3000時間分の
知識を伝授します
そんなあなたに、
私が沼った3000時間分の
知識を伝授します
作業を徹底的に効率化するための、
超実践チートシート
01
必要なものだけを、最短で。
100サイト以上の実装経験から得た「実務で本当に使える実装」を体系的に効率よく学べるように解説しております。そのため実務で頻出のコーディングを最短で習得できます。
02
本質を理解するから、自分で使える。
ほぼ全てで実装の解説動画がついております。その数100本以上、約30時間分の解説になります。コードの意味を理解した上でストックしていくので、応用も可能です。
03
悩む時間を減らし、時給単価アップ。
実務で求められる実装を先回りで習得できます。登録しておくと便利なスニペットも200以上紹介しておりますので悩む時間を圧倒的に減らすことができます。
100本以上の解説からさらにアップデート
スニペットを駆使してファーストビューを作ってみよう
解説一覧
-
01. CSSアニメーションを駆使してファーストビューを作ろう
- Animationに関係するプロパティ
- もうtransformプロパティは使わない！
- CSSアニメーション 完全マスター
- スクロールダウンを実装してみよう
- スクロールダウンの実装方法
- スクロールダウンの実装練習1
- スクロールダウンの実装練習2
- ファーストビューを作ってみよう
- 下から文字が表示されるアニメーション
- 1文字ずつ表示させるアニメーション
- clip-pathを使った表示アニメーション
- 実際にFvを作ってみよう
-
02. カードレイアウト / ブログ記事詳細ページの実装方法
- gridレイアウト
- Gridレイアウトの基礎
- レスポンシブも柔軟に対応できるgrid-area
- sub-gridを使ってカードレイアウトを作ろう
- 表の作成 / スクロールヒント
- スクロールバーをカスタマイズしよう
- スクロールヒント導入し、カスタマイズしよう
- 左側の見出しのみを固定しよう
- ブログ詳細ページの作成方法
- 様々なcssを駆使して動的な記事詳細ページをカスタマイズしよう
- position: stickyを使って目次をサイドバーに固定しよう
- 目次の作成方法
-
03. ホバーアニメーション
- ホバーアニメーションの基本
- ホバーの基本
- 下線がつく (右から / 真ん中から)
- on hover と on leaveのスピードを変える
- グラデーションのhover
- ホバーアニメーション ノック
- 透過度 + 矢印伸びる
- 線が伸びる + 色が変わる
- 色スライド反転 + 矢印移動する
- 色反転 + 下線 + テキストグラデーション
- 画像に枠線つける
- 画像が枠内で拡大される
- 違うテキストが下から出てくる
- 色反転 + 矢印が下から違うものに入れ替わる
- 矢印と背景が同時に重なる
-
04. 出現アニメーションの実装
- GSAPのScroll Triggerを使って出現アニメーションを作ろう
- Scroll Triggerを使ってみよう
- 出現アニメーション【その1】〜フェードインの実装〜
- 出現アニメーション【その2】〜時間差での出現〜
- 出現アニメーション【その3】〜スライドイン(レスポンシブ対応)〜
- スクロールトリガーが発火されない！？ ScrollTrigger.refresh()
- 出現アニメーション ノック
- カンプのハードコーディング
- 画像が拡大された状態から縮小される
- 片側から徐々に出現
- 下から表示される
- 1文字ずつ出現
- 色塗りの状態から出現
-
05. ヘッダー メニュー / ページ内リンク
- ヘッダーメニューの実装
- 5分でできるヘッダーの基本形とスニペット紹介
- スクロールしたら高さが変化するヘッダーの実装方法
- 上方向へスクロールしたらヘッダーが隠れるような実装
- スクロールしたら別のヘッダーが出てくる実装
- fvを過ぎたらヘッダーが変わる実装
- ハンバーガーメニューの実装
- ハンバーガーメニューの基本形〜ハードコーディング編〜
- ハンバーガーメニューの基本形〜右からスライドイン実装編〜
- フェードインで表示されるハンバーガーメニュー実装
- 上から出てきて、さらにメニュー内に動きのあるハンバーガーメニューの実装
- 特殊なハンバーガーメニューの実装
- サブメニューの実装
- ドロップダウンメニューの実装 〜ハードコーディング編〜
- ドロップダウンメニューの実装 〜アニメーション編〜
- メガメニューの実装 〜ハードコーディング編〜
- メガメニューの実装 〜アニメーション編〜
- ページ内リンクの実装
- ページ内リンクのスムーススクロールについて
- To top アニメーションの実装
- 条件付きCTAボタンの実装
-
06. タブ切り替え
- アクセシビリティを意識したタブ切り替え〜ハードコーディング編〜
- アクセシビリティを意識したタブ切り替え〜実装編〜
- よく使うタブ切り替え 〜ハードコーディング編〜
- よく使うタブ切り替え 〜実装編〜
-
07. アコーディオンメニュー
- アコーディオンメニューの実装
- detailsタグとsummaryタグの使い方
- faqセクションのコーディング方法
-
08. ポップアップ系の実装
- モーダルの実装
- モーダルの基本〜dialogタグの使い方〜
- モーダルの実装〜カンプからのコーディング 前編〜
- モーダルの実装〜カンプからのコーディング 後編〜
- ローディングアニメーション
- ローディングアニメーションの基本事項
- ローディングアニメーションの応用〜数値変化編〜
- 数値変化 + プログレスバーの実装
- セッションストレージを利用して初回訪問時のみ発火されるように実装
- 年齢確認のモーダルを作ってみよう
-
09. Swiperを用いたスライダーの実装
- Swiperを用いたスライダー 〜基本編〜
- Swiperの導入とスニペットの紹介
- Swiperノック その1 ~ 基本形1 ~
- Swiperノック その2 ~ 基本形2 ~
- Swiperノック その3 ~ ページネーションとナビゲーションセット ~
- Swiperノック その4 ~ プログレスバー ~
- Swiperノック その5 ~ フェード切り替えと分数表示 ~
- Swiperノック その6 ~ activeとそれ以外 ~
- Swiperノック その7 ~ 一定速度で流れるスライダー ~
- Swiperを用いたスライダー 〜応用編〜
- 同系統のSwiperを複数入れるときの注意と簡潔なコード
- Swiperのスライドと見出しを連携させる方法 〜前編〜
- Swiperのスライドと見出しを連携させる方法 〜後編〜
- 画面内に入ったらスライドを開始させる方法
-
10. お問い合わせフォームのカスタマイズ
- 基本実装
- お問い合わせフォームの型の実装 (スニペット紹介)
- 入力ボックス【 input[type=text] [email] textarea】のカスタマイズ
- プルダウン【 select】のカスタマイズ
- チェックボックス【 input[type=checkbox] 】のカスタマイズ
- ラジオボタン【 input[type=radio] 】のカスタマイズ
- 送信ボタン【 input[type=submit]】のカスタマイズ
- バリデーションエラーの実装方法
- バリデーションエラーの実装
-
11. リキッドレイアウトでのコーディング
- 理論やサンプル実装
- リキッドレイアウトについて〜メリットやデメリット〜
- リキッドレイアウトの理論 〜vw と rem〜
- リキッドレイアウトについて〜cssの基本設定〜
- 実際のコーディング例
- モバイルファーストデザインの実装
- モバイルファーストでSPデザインのみの場合の実装方法
- SP + 固定したサイドの余白のみありの実装方法
-
12. パララックスの実装
- スクロールとずれて画像やテキストが動く
- スクロールとズレて画像やテキストが動くパララックス実装〜その1〜
- スクロールとズレて画像やテキストが動くパララックス実装〜その2〜
- 背景が固定される
- 背景画像を固定して奥行きを見せる実装
-
13. 慣性スクロール Lenis
- Lenisを使った慣性スクロールの実装
- Lenisを使った慣性スクロールの実装方法
-
14. マウスストーカー
- マウスストーカーの実装方法
- マウスストーカー実装の基本
- mix-brend-modeで色を反転させる
- Swiperにマウスストーカーを入れる
-
15. その他
- その他
- mixinを使用してフォント情報を一括入力しよう
- 片側に伸びたレイアウトの実装 〜innerとvwの関係〜
- スクロールに応じて要素の幅が大きくなる実装
※随時アップデートしていくため、内容が変わる可能性があります。
学んで終わりではもったいない
実務に活かせる購入者限定特典
購入者限定公式LINEへ招待
「こんな実装の解説が欲しい」といった皆様のご意見やご要望を直接キャッチアップしながらアップデートの参考にいたします。
また、次回以降のコンテンツ販売の際の情報もいち早くお届けいたします。
追加アップデート無料
私自身、現役でコーダーをしておりますので新しい実装や知識は今後もどんどん随時追加予定です。今購入しておけばアップデート内容も無料かつ無期限で閲覧可能となります。
購入者限定動画も随時追加
月に1度、営業や実務に関する質問に回答する動画配信やライブコーディングを購入者限定で実施する予定です。限定だからこそのリアルな現場の話もお届けいたします。
購入者380人突破！！
実際にご購入いただいた方の声
実践スキルを身につけ
自信と提案力を
手に入れる
¥29,800 (税込)
Profile
制作者プロフィール
りょー
- フリーランスの現役Webコーダー
- コーディングでの制作実績は100サイト以上
- コードストックや爆速でのデバック方法を習得し、現在の時給単価は 4,000 ~ 5,000円をキープし、コーディングの平均収入は50~80万/月
追記
- 特典は購入者全員が受け取ることができます。(SNSでの口コミなどを強制するものはございません。)
- WordPressで使用するphpやShopifyで使用するliquidの言語に関してはこのコンテンツでは触れておりません。
- こちらはコーディングの学習をスクールなどで一通り終えた方向けのものになっております。「今からコーディングを始める」という方向けのコンテンツではございません。ですが、アップデートに伴い値上げをしていく可能性もございますので、「コーダーとして頑張りたい」と思っている方は早めにご購入しておくことをお勧めします。
- 今後値段が下がることはございません。アップデートに伴い、値段が上がっていく可能性はございますので、検討中の方はお早めに。
