今回は、「iSara」模写シリーズ特集！
と言うことで、今までYouTubeでアップしていた、「iSara」模写シリーズの動画をまとめました。
Progateやドットインストールでの学習を一通り終え、次に模写コーディングを始めよう！と思っている方は、是非Webの神様の「iSara」模写シリーズの動画と一緒に模写コーディングをやってみてはいかがでしょうか？

「iSara」ってなに？

模写コーディングに取り組んでいる方は、「iSara」って単語を耳にしたことがある方も多いのではないでしょうか。
「iSara」とは、バンコクのノマドエンジニア育成プログラムです。

「iSara」のサイトは、初心者におすすめの模写コーディングの題材になっていて、ネット上で話題になりました。
コーディング初心者の多くの方が「iSara」のサイトで模写コーディングに挑戦しています。

「iSara」模写シリーズ動画のまとめ

Webの神様では、「iSara」の模写コーディングを動画で実際にやりながら解説しているので、模写コーディング初心者の方でも、安心して学習できると思います！
各動画でソースコードも配布しているので、模写後の答え合わせなどに活用してみて下さい。

「iSara」模写コーディング①
〜ヘッダー・フッター・メイン上部のコーディング〜

【超入門】実践！「iSara」模写コーディングをやってみた① ソースコード配布【HTML・CSS コーディング】

●模写コーディングの手順の紹介
①サイト選び
②スクリーンショット撮る
③テキストを抽出する
④画像を抽出する
⑤HTML編集
⑥CSS編集
●ヘッダー・フッター・メイン上部のコーディング
・テキスト・画像の抽出
・HTMLマークアップ
・検証ツールを使いながらCSS編集
・拡張機能「What Font」を使ってFontを調べる

ソースコードはこちら

「iSara」模写コーディング②
〜メイン部分（前半）のコーディング〜

【超入門】実践！「iSara」模写コーディングをやってみた② ソースコード配布【HTML・CSS コーディング】

●メイン部分（前半）のコーディング
・テキスト・画像の抽出
・HTMLマークアップ
・検証ツールを使いながらCSS編集
・擬似要素

ソースコードはこちら

「iSara」模写コーディング③
〜メイン部分（前半）のコーディング・Font Awesomeの使い方〜

【超入門】「iSara」模写コーディングをやってみた③ Font Awesome読み込み方法 ソースコード配布【HTML・CSS コーディング】

●メイン部分(iSaraで学べること 〜 創業メンバー)のコーディング
・テキスト・画像の抽出
・HTMLマークアップ
・検証ツールを使いながらCSS編集
・Font Awesomeの読み込み
・flexボックス

ソースコードはこちら

「iSara」模写コーディング④
〜ヘッダー・フッター・メイン上部のレスポンシブコーディング〜

【超入門】「iSara」模写コーディングをやってみた④ 初心者向けレスポンシブコーディング手順解説！ソースコード配布【HTML・CSS コーディング】

●レスポンシブコーディングの手順
①viewport指定を追加する
②メディアクエリを書く
③メディアクエリが意図した通りに効いているか確認する
④ヘッダーやフッターをレスポンシブ化するCSSから書いていく
⑤必要に応じて、マークアップを変更・要素を追加する
●ヘッダー・フッター・メイン上部のレスポンシブコーディング
・検証ツールを使いながらCSS編集
・レスポンシブコーディングの注意点
・ブレイクポイント
・要素のはみ出しには、width: 100%;の指定をする
・「.sp_only」「.pc_only」を使った要素の出しわけ
・レスポンシブ化に伴い、HTML/CSSを変更する場合の作業手順

ソースコードはこちら

「iSara」模写コーディング⑤
〜メイン部分（前半）のレスポンシブコーディング〜

【超入門】「iSara」模写コーディングをやってみた⑤ 初心者向け 効率的なレスポンシブコーディング方法！ソースコード配布【HTML・CSS コーディング】

●メイン部分(メイン上部 〜 創業メンバー)のレスポンシブコーディング
・検証ツールを使いながらCSS編集
・マークアップの変更・要素の追加
・要素のはみ出しを修正

ソースコードはこちら

「iSara」模写コーディング⑥
〜メイン部分（後半）のコーディング・アコーディオンメニューの実装〜

【初心者向け】「iSara」模写コーディングをやってみた⑥ レスポンシブコーディング＆jQueryでアコーディオンメニュー作成！ソースコード配布【HTML・CSS コーディング】

●メイン部分（後半）のコーディング
・テキスト・画像の抽出
・HTMLマークアップ
・検証ツールを使いながらCSS編集
・CSSで矢印を作る方法①
・CSSで矢印を作る方法②
・レスポンシブコーディング
・jQueryを使ったアコーディオンメニューの実装

jQueryの使い方から、アコーディオンメニューの実装を詳しく紹介した動画がありますので、こちらも合わせてご覧ください。
→【超初心者向け】jQuery最新版の読み込み・使い方解説2021！初めてでも簡単にアコーディオンメニューが作れるようになります【HTML・CSS コーディング】

ソースコードはこちら

「iSara」模写コーディング⑦
〜お問い合わせフォームの実装〜

【HTML/CSS 初心者向け】お問い合わせフォームのコーディングの基本を解説！「iSara」模写コーディングをやってみた⑦ 【form/input/button など】

●メイン部分(資料請求フォーム)のコーディング
・フォームをコーディングする際の考え方
・タグの説明
・placeholder

ソースコードはこちら

「iSara」模写コーディング⑧
〜メイン部分（後半）のコーディング〜

【初心者向け】「iSara」模写コーディングをやってみた⑧ 次回最終回！レスポンシブ対応など　ソースコード配布【HTML・CSS コーディング】

●メイン部分(なぜバンコクなのか？ 〜 創業者からのメッセージ)のコーディング
・テキスト・画像の抽出
・HTMLマークアップ
・検証ツールを使いながらCSS編集
・レスポンシブコーディング

ソースコードはこちら

「iSara」模写コーディング⑨
〜仕上げ作業・ポートフォリオについて〜

【初心者向け】「iSara」模写コーディングをやってみた⑨ 最終回！ 要素のはみ出し特定・効率的な全体確認の方法を紹介【HTML・CSS コーディング】

●仕上げ作業
・レスポンシブコーディング（タブレット表示）
・はみ出した要素の修正とチェック
・Chrome拡張機能「Perfect Pixel」を使って全体の確認
●模写後はお手本のソースコードを確認
●模写をポートフォリオに載せるべきか？

ソースコードはこちら

【番外編】模写コーディングのよくあるご質問回答

【初心者向け】模写コーディングのよくあるご質問回答＆お悩み相談！【HTML・CSS コーディング】

●模写コーディングの準備について
・スクリーンショット画像を使って要素の大きさを測る時に使っているアプリはなんですか？
・スクリーンショット画像が実際のサイズよりも大きい
→スクリーンショット画像を実寸サイズに変更する方法
・スクリーンショット画像にマークアップの計画を書き込んでいる時に使っているアプリはなんですか？
●模写コーディングの手順について
・どんなサイトを模写したらいいのでしょうか？
・模写コーディングが難しくてなかなかできるようになりません。
・jQuery、JavaScript、Bootstrapを使っているサイトの場合、全て忠実に模写した方がいいですか？
・HTML編集でどのタグを使うべきか考えるのが難しいです。
・CSSのクラス名はどうやって決めればいいのでしょうか？
●模写コーディング中の作業効率化について

動画の紹介は以上になります。

最初の動画から一気に観たい方は、プレイリストもありますので、こちらから観てみて下さい。
→【Webの神様】「iSara」模写コーディングをやってみた

模写コーディングをすることで、プログラミング初心者の方も基礎から実践的な知識を身につけられます。
是非動画を観ながら「iSara」模写コーディングに挑戦してみてはいかがでしょうか！