模写修行

学習ガイド

模写修行はHTML・CSSの基礎をある程度学び終えた方を対象とした学習サービスです。このページでは模写修行のおすすめの使い方を紹介します。

🚀 まずはデザインを元に自分の力でチャレンジ!

💡 ダウンロード資料

  • サンプルコード(SCSSもあり)
  • デザイン(XD/スタイルガイド/書き出したデザイン)
  • 素材(ロゴやアイコンなど)

教材をご購入いただくと上記のダウンロードとweb上で解説を見ることができます。コードサンプルや解説を見る前に、実践と同じようにXDのデザインを見てコーディングしてみると良いです。わからないことがあればその都度ググって解決をしてみましょう。

ご自身の今の課題に合わせて、『1週間後までに完成させる』や『期限はなしでとにかく綺麗に書く』と条件や設定を決めて取り組むことをおすすめします。

🖥 本番公開してデバイスやブラウザチェック!

一通り自分の力でサイトを完成させたら本番公開してみましょう。サーバーの契約をしていなくても、NetlifyやVercelを使えば無料で公開できます。

模写修行の全教材はポートフォリオにすることを禁止していますが、各ブラウザやデバイスで確認するために短期間(数時間程度)ベーシック認証なしで公開することは構いません。念のためnoindexを付けて公開してください。そしてサイトの表示確認完了後は必ずサイトの削除をお願いします。

可能であればで実機で表示の確認してみると良いです。『PCのGoogle Chromでは問題なく表示されていたものが、SPのSafariでは表示崩れを起こしていた』なんてことも考えられます。

👀 サンプルコードと解説を見てみる!

サンプルコードと解説を見てみましょう。コードの書き方に絶対の正解はないので、一例だと思って参考にしてみてください。

配布素材の中にはSCSSで書いたコードも入っています。コーダーやフロントエンドエンジニアにとって、SCSSは必須で覚えるべきスキルの1つなので、まだ勉強していない方はこの機会に勉強してみるのも良いと思います。

また、保守性の高いコードを書くにはCSS設計の勉強も必要です。

基礎学習は終えている方が対象のため、全ての解説はポイントとなる点のみしかしていません。わからなかったことや知らなかったことは詳しく勉強してみると良いです。参考サイト(模写修行メディア)のリンクを載せている箇所も多いので、ぜひ目を通してみてください。

🛠 作ったサイトを拡張してみる!

模写修行で作ったサイトを拡張したり、改修してみるのも良い勉強になります。そのときに『拡張しやすいコードだったか?』という点に注目してみましょう。

webサイトやwebサービスは公開してからがスタートです。拡張や改修を重ねても、カオスになりにくいコードを書けると良いです。

💡 拡張・改修の例

  • 新しいページを作ってみる
  • 既存のページに何か機能やコンテンツを追加してみる
  • JavaScriptで動きをつけたり、WordPressで投稿機能をつけてみる

👊 とにかく書く!悩みながらたくさん書く!

基礎を学習済みの方は、あとはとにかくたくさん書いて、その都度わからないことや知らなかったことを勉強するのが上達への1番の近道です。

模写修行の初級編が全然分からなかった方は1から入門書をやり直しても良いと思います。しかし、いつまでも基礎的なインプットばかりだと自分の力で書けるようになりません。

もし良い練習になったという方は、是非他の教材にもチャレンジしてみてください。自分で悩みながら書いたコード量に比例してスキルも上がるはずです。

📝 さらに勉強!

模写修行ではHTML・CSSのコーディングの練習に特化しましたが、実際はJavaScriptも書くことになります。WordPressを導入することもあります。web開発を仕事にしたい方はReactやVueなどのライブラリやフレームワークも勉強する必要があります。

IT系の仕事をするのであれば、勉強に終わりはありません。今現役で活躍してる方々も日々勉強しています。無理はせずに楽しみながら続けることが大切です👍