HTML/CSS

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

※キリが悪く、とても長丁場になってしまいました…。
テンポが早すぎてわからない点などあれば、遠慮なくご質問ください!更新大変お待たせいたしました!

↓↓↓模写ソースコード配布中!↓↓↓
著作者の方にご快諾いただき、模写ソースコードの配布中です!
下記よりダウンロード(zipファイル)の上、是非学習にご活用ください。
https://webgodweb.com/download.php?youtube=cxD151Lxz4s
※画像ファイルは含めていないので、元サイトよりご自身で準備をお願いいたします。

知る人ぞ知る、模写コーディングの登竜門「iSara」の模写コーディング実践シリーズ第6弾です!今回は、レスポンシブ対応しながら、一気に進めていきます。jQueryでアコーディオンメニューも実装!
継続して少しずつ模写コーディングに取り組んでいき、お手本サイトの完成を目指します。是非、皆さんも一緒に挑戦してみてください♪

↓jQuery読み込み・アコーディオンメニュー作成方法の解説動画はコチラ↓
【超初心者向け】jQuery最新版の読み込み・使い方解説2021!初めてでも簡単にアコーディオンメニューが作れるようになります【HTML・CSS コーディング】
https://youtu.be/Vw7xzB78uGg

↓レスポンシブって?という方はコチラをご覧ください↓
【超入門】初心者向け レスポンシブデザイン完全攻略!メディアクエリ等解説【HTML・CSS コーディング】
https://youtu.be/Z_hzEcAzz6w

↓前回までの動画はコチラ↓
【超入門】実践!「iSara」模写コーディングをやってみた① ソースコード配布 【HTML・CSS コーディング】
https://youtu.be/OnkZv78HMGY

【超入門】実践!「iSara」模写コーディングをやってみた② ソースコード配布 【HTML・CSS コーディング】
https://youtu.be/1POssr40n8I

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

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

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

【iSara】
https://isara.life/

★模写コーディング動画シリーズ
【超入門】初心者向け 模写コーディング!オススメのやり方とポイント【HTML・CSS コーディング】
https://www.youtube.com/watch?v=OH1X09Ilu9E

【超入門】初心者必見!模写コーディングをやってみた 実践編【HTML・CSS コーディング】
https://www.youtube.com/watch?v=RBLkXAG4QTM

【超入門】初心者必見!模写コーディングをやってみた 実践編 Part2【HTML・CSS コーディング】
https://www.youtube.com/watch?v=KH-lN82sf7I&t=29s

【超入門】初心者必見!模写コーディングをやってみた 実践編 Part3 レスポンシブデザイン編【HTML・CSS コーディング】
https://www.youtube.com/watch?v=oGV1dmomUP0&t=5428s

★動画内で使用している主なショートカットキーについて
下記動画で詳しく紹介していますので、効率的な模写コーディングのお供に是非ご覧ください。

【超入門】作業効率爆上がり!必ず覚えておきたい超絶便利ショートカット【HTML・CSS コーディング】
https://www.youtube.com/watch?v=2Egsijek-aM&t=14s

【タグ】
#コーディング #プログラミング

関連記事

  1. 【作業効率UP!】Web制作にマストのGoogle Chrome…
  2. 【超入門】初心者向け 模写コーディング!オススメのやり方とポイン…
  3. 「Web制作系の学習初心者あるある」言いたい【Webデザイン・コ…
  4. 【Webデザイナー・プログラマー】初心者必見!挫折しないためのプ…
  5. 【フリーランス志望必見】Webサイト納品前の表示確認で絶対にチェ…
  6. 【超入門】初心者必見!模写コーディングをやってみた 実践編 Pa…
  7. 【超入門】CSSの「セレクタ詳細度」って知ってる?【HTML・C…
  8. 【超入門】初心者必見!CSSが効かなくて困った時のチェック項目リ…
PAGE TOP