おすすめの取り組み方

1. 基本編を理解する

   gulp環境使い方〜基本編〜

2. チャレンジ課題を取り組む

3. 応用編にチャレンジする

   gulp環境使い方〜応用編〜

【重要】アップデート情報

<aside> ⚠️ 2023.08.12　src/sass/global/_function.scssの自作関数rem()をmyrem()に変更しました！

動画内でrem()を使用している場面がありますが、myrem()を使うようにしてください！

</aside>

gulp環境ダウンロード手順

1. 以下のリンクを開く

   https://github.com/cocomate-code/gulp-dev_static_FLOCSS_SPtoPC

2. 「Code」→「Download ZIP」をクリック

   

gulp環境使い方〜基本編〜

1. 事前準備

   いちくんさん記事の「npmをインストールする」まで進めてください

   ↓Macの方はこちら

   【DartSass対応】どこよりも詳しいGulp 4環境構築【Mac編】 | TipsWeb

   ↓Windowsの方はこちら

   【DartSass対応】どこよりも詳しいGulp 4環境構築【Windows編】 | TipsWeb

2. 配布されたgulp環境の動作確認

   https://youtu.be/0JrmHX6bdvc

   1. 以下のリンクからgulp環境をダウンロード

      https://github.com/cocomate-code/gulp-dev_static_FLOCSS_SPtoPC

   2. ダウンロードされたzipファイル解凍

   3. 解答したフォルダをvscodeで開く（フォルダ名は好きな名前にしてOK）

   4. vscodeでターミナルを開く

   5. ターミナルにコマンド「cd gulp」を入力してエンターキーを押す

   6. ターミナルにコマンド「npm i」を入力してエンターキーを押す

   7. ターミナルにコマンド「npx gulp」を入力してエンターキーを押す

   8. gulpが起動して、ブラウザが立ち上がるのを確認

   9. htmlファイルやsassファイルを編集してみて、即座にブラウザに反映されればOK

   10. gulpを停止したいときには「controlキー + c」を入力する

3. gulpとは / gulp起動までの流れ

   https://youtu.be/CSDpbNuiRaY

4. gulp環境の中身について

   https://youtu.be/_d5h7usQesA

5. Sassについて

   https://youtu.be/UoxzDHQ6IS0

6. リキッドレイアウトの解説（がっつり数学的な話）

   https://youtu.be/ymhVbq2ysyk

gulp環境使い方〜応用編〜

<aside> ⚠️  基本編を理解している前提で進んでいきますので、基本編を復習してから視聴することをお勧めします！

</aside>