【全部無料】レスポンシブデザイン徹底入門【初級編】

本

Progateを卒業して基礎は学んだけど、実践になると模写ができない。。とお悩みの方へ。実際にProgateの模写を通してレスポンシブデザインの基礎がすべて学べるマガジンです。

運営しているクリエイター: スキプラ＠元エンジニア

【無料公開】模写徹底練習note - 零 -ZERO-事前知識編

こんにちは。スキプラ(@riman_skillplus)です。 Progate卒業して、模写してますか？レスポンシブデザインで挫折してませんか？今回のnoteの目標は、「Progateの模写が3日でできるようになる」です。 Progateの模写には、最低限必要なレスポンシブデザインが組み込まれており、非常に参考になり、あなたのコーディングスキルをグッと上げれます。さて、いきなりProgateの模写に挑戦しようとする人のだいたいの挫折理由は、「レスポンシブデザイ

【無料公開】模写徹底練習note - ①ヘッダー編

こんにちは。スキプラ(@riman_skillplus)です。前回の【レスポンシブデザインの基礎】はもう見ていただけましたか？今回から、早速Progateの模写をやっていきます。ここで早速前回の基礎がバンバン使われるので、まだの人は早めにマスターしておきましょう！今Progateで勉強中、または卒業生の人は、Progateが模写できたらだいぶ自信が付くと思います。さて、今回は👇くらいまでをやっていきましょう。気づきましたか・・？？そう、前回で学んだ3つ

【無料公開】模写徹底練習note - ②サービス紹介編

こんにちは。スキプラ(@riman_skillplus)です。前々回の【レスポンシブデザインの基礎】と、前回の【progate模写のヘッダー編】はもう見ていただけましたか？今回はサービス紹介部分をやっていきます。ここはもう、これまでのレスポンシブの基礎を学んだあなたならサクサク作れるはずです。今回使う技術はこれだけ！！ ▼ レスポンシブの基礎 ① PCとスマホで配置を変える (PCだと横並びが、スマホだと縦並びになってます ② 文字サイズを変えるサクサク

【無料公開】模写徹底練習note - ③ レッスン一覧編

こんにちは。スキプラ(@riman_skillplus)です。さて、今回はレッスン一覧の紹介部分をやっていきましょう！出来上がりはこんな感じです。めっちゃよく見るデザインですよね。この講座を終えると、【カード形式】と【レスポンシブでカードの表示枚数を可変にする】という2つをマスターできます。では早速やっていきましょう。 Step1: まずは箱を作るいつもどおり、箱を作っていきましょう。このように、カード形式って言っても箱だけで考えるとそんなに難しくな

【無料公開】模写徹底練習note - ④ サクセスストーリー編

こんにちは。スキプラ(@riman_skillplus)です。さて、今回はレッスン一覧の紹介部分をやっていきましょう！出来上がりはこんな感じです。このカードのデザインは、【受講生の声】みたいなやつで良く見ますよね。実はslickというjQueryプラグインを使うと簡単にできちゃいます。「今回の講座をマスターできれば【体験者の声】とか【購入者の声】みたいなものをカルーセル形式で作れますけど？」と、ドヤつくことができるようになります。今回はslickと

【無料公開】模写徹底練習note - ⑤フッターを含む最終編

こんにちは。スキプラ(@riman_skillplus)です。さて、今回は【会員登録】【スマホでもProgate】【フッター】の部分をやっていきましょう！出来上がりはこんな感じです。これまでに使った知識だけで実装できるので超簡単です。今回の実装の流れはこちらのプルリクエストに残されてるので参考にしてみてください。では早速やっていきましょう。 Step1: まずは箱を作るいつもどおり、箱を作っていきましょう。と、言いたいところですが、もう脳内で勝手に箱