강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Web Development

SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト with Figma

SCSS(SASS)とFLEX Layoutを実戦に完璧に活用します!ピグマでウェブサイト全体のメインページとコアサブページUIを設計し、一貫性のあるクラスネームとともにHTMLワイヤフレーム構造を作成し、パブリッシングまで完了する体系的なレスポンシブWebサイトプロジェクトの制作過程です。合計41時間以上のプロセスの中で、コア理論と実務活用能力を十分に習得し、PC - モバイル - タブレット対応のレスポンシブレイアウトを設計および制作しながら、レスポンシブWebプロジェクトの経験とノウハウはもちろん、JQueryのコア理論と実務活用能力まで大幅に向上させます。

  • codingworks
실습 중심
웹퍼블리싱
HTML/CSS
Sass
scss
JavaScript
jQuery

学習した受講者のレビュー

こんなことが学べます

  • 体系的なレスポンシブ ウェブ サイト プロジェクトの作成プロセス

  • SCSS(SASS) の基本理論と実務活用能力

  • FLEX レイアウトの核心理論と実務活用能力

  • PC、モバイル、タブレット対応のレスポンシブレイアウトの設計と制作

  • レスポンシブ ウェブ プロジェクトの作成のための jQuery の基本理論と実務活用能力

  • Figma で作成する Web サイト UI デザインのスキル

  • 体系的な HTML ワイヤーフレーム構造とクラス名設計能力

  • Web パブリッシャーと開発者向けの最高のレスポンシブ Web ポートフォリオの作成

Webパブリッシャーと開発者のための圧倒的なポポールを探しているなら?
SCSS(SASS)+FLEXレスポンシブオンライン講義サイトプロジェクト!

「SCSS(SASS)+FLEX実戦レスポンシブWebプロジェクト with Figma講義で
体系的なレスポンシブウェブサイトプロジェクト制作能力の完成」
「41時間以上の膨大な学習量」

やや不慣れなSCSS(SASS)パブリッシング作業なので入門者は少し難しいかもしれませんが、初心者はセクションごとに順番にうまく従うことで十分に完了することができます。

SCSS(SASS)とFLEXを実戦に完璧に活用します!

Point 1.ピグマ(Figma)でSCSS(SASS)+FLEXウェブサイトUIデザイン製作
Point 2. SCSS(SASS)+FLEX ウェブサイト HTML ワイヤフレーム 全てのページ 詳細な製作
Point 3. SCSS(SASS)+FLEXを活用した多様な多数のWebページパブリッシング制作
Point 4. PC、モバイル、タブレット対応レスポンシブレイアウト設計、製作、完璧なパブリッシング作業まで
Point 5.レスポンシブ Web プロジェクトを作成するためのジェイクエリーのコア理論と実務活用能力

コーディングワークスがこれまで数多くのオフライン学園や個人ポートフォリオホームページ制作過程で授業した中上級パブリッシング制作ノウハウが込められています。特に、SCSS(SASS)+FLEXをベースに製作するレスポンシブWebパブリッシングプロジェクトで、SCSS(SASS)+FLEX能力を最大限に引き上げることができます。
完成後、さらに向上した中上級レスポンシブWebパブリッシング能力を持つことになると確信しています!

SCSSコア理論映像アップデート(5時間9分)

シームレスなSCSS(SASS)+ FLEX本番レスポンシブWebプロジェクトの公開作業のために、SCSSのコア理論(Essential Theory)を更新しました。 SCSSコア理論(Essential Theory)映像は5時間9分にわたってSCSSのほぼすべての理論を扱っているので、SCSSコア理論を十分に深く深めることができます。

セクション5以降、パブリッシング作業のために追加された完全なビデオをすべて学習する必要はありません。セクション5から、パブリッシング作業に不可欠な理論映像は次のとおりですが、これだけ学習してもパブリッシング作業に支障は全くありません。

1. SCSS コア理論(01) - セレクタのネスト(Nesting)

2. SCSS コア理論(02) - 親セレクタ参照(&)と注釈処理

3. SCSSコア理論(03) - 親セレクタ参照(&)アプリケーション

4. SCSSコア理論(04) – 代表的なCSSセレクタSCSSで作成

5. SCSS コア理論(05) - 親セレクタ参照(&) 仮想クラス

6. SCSS コア理論(06) - 親セレクタ参照(&) 属性選択子

7. SCSS コア理論(07) - 親セレクタの入れ子になる @at-root

10. SCSS コア理論(10-1) - 変数(Variables) 01

11. SCSS コア理論(10-2) - 変数(Variables) 02

13. SCSSコア理論(11-1) - 外部ファイルのインポート@import

※残りの映像は今後SCSSをより深く学習する必要がある場合、その時見ても十分です。

================================================== ============

▼追加されたセクションと全体理論映像内容(2023.07.06)

セクション 4. SCSS コア理論 (Essential Theory)

  1. SCSSコア理論(01) - セレクタのネスト(Nesting)

  2. SCSSコア理論(02) - 親セレクタ参照(&)と注釈処理

  3. SCSSコア理論(03) - 親セレクタリファレンス(&)アプリケーション

  4. SCSSコア理論(04) – 代表的なCSSセレクタSCSSで作成

  5. SCSSコア理論(05) - 親セレクタリファレンス(&)仮想クラス

  6. SCSSコア理論(06) - 親セレクタ参照(&)属性選択子

  7. SCSSコア理論(07) - 親セレクタの入れ子になる@at-root

  8. SCSS コア理論(08) – プレフィックスを使用して CSS 属性を自動生成

  9. SCSSコア理論(09) – 仮想クラス:isでセレクタの重複を減らす

  10. SCSSコア理論(10-1) - 変数(Variables) 01

  11. SCSSコア理論(10-2) - 変数(Variables) 02

  12. SCSSコア理論(10-3) - 変数(Variables)有効範囲とCSS変数宣言

  13. SCSSコア理論(11-1) - 外部ファイルを取得する@import

  14. SCSSコア理論(11-2) - @importに分割されたファイルを読み込む

  15. SCSSコア理論(12) - 演算子(Operations), 出力ウィンドウを取り除く

  16. SCSSコア理論(13-1) - グループを宣言する@mixin、グループを使う@include

  17. SCSSコア理論(13-2) - @mixinと@includeを適用する

  18. SCSSコア理論(13-3) - @mixinと@includeを活用したボタンデザイン

  19. SCSSコア理論(13-4) - @mixinのパラメータ(引数)を@includeとして使用する

  20. SCSSコア理論(14) - セレクタ属性を取得する@extend

  21. SCSSコア理論(15) - @extendで使用するプレースホルダーセレクタ%

  22. SCSSコア理論(16) - 多変数宣言、組み込み関数(map-get)

講義オープン記念受講評イベント😋

該当講義に受講評を書いてくださる方に限り、SCSS(SASS)+FLEXコア理論 PDF教材及び活用例ファイルを提供します。提供されるPDF教材とファイルはパブリッシング作業と今後の実務で作業する時のために良いリファレンスになります。

受講評は受講生分が該当講義を見て感じた率直な受講評を書いてください。受講評価を作成し、作成した受講評価をキャプチャして下記のメールでお送りください。

受講評イベントは期間限定で講義オープン割引期間4週間行われます。
※受講評イベントは期間なしで進行することにしたので、いつでも受講評作成してください。

■期間:4週間(2023年7月1日~7日28日)
■対象:該当講義受講評を作成されたすべての方
■Eメール:webnlife@naver.com

🚩提供ファイル

- SCSS(SASS)コア理論教材(PDF、67ページ)および完成本活用例
- FLEXコア理論教材(PDF、36ページ)と完成本の活用例

※完成本活用例は、該当教材に出てくるすべての例を作った完成本です。
※ SCSS(SASS)+FLEX 核心理論教材及び提供ファイル詳細紹介を見る : https://inf.run/qzdx
※GRIDコア理論教材と活用例は含まれていません。
※受講坪作成確認メールをお送りいただくと、提供ファイルは24時間以内に発送されます。

SCSS(SASS)活用能力は優遇事項であり必須事項👍

以前や今や規模のある会社の場合、Webパブリッシャーとフロントエンド開発者の採用公告を見ると、SCSS(SASS)活用能力が常に採用で「優遇事項」として扱われます。優遇事項というのは必須資格要件ではありませんが、やると分かればもっと優遇するという言葉です。まもなく、他の志願者に比べて高い競争力を持つという言葉でもあります。

🔥パブリッシャーとして、または開発者として入社支援と面接でSCSS(SASS)活用能力があると言うだけで話すことは不足しています。 SCSS(SASS)を実際にはただ聞いたり、しばらくしてみたくらいなのですが、面接を見る時はやると分かると言う志願者たちは本当に多いです。言葉だけのパブリッシング活用能力、言葉だけの開発能力は人々がよく信じていません。しかし、実際にSCSS(SASS)を活用して製作したレスポンシブWebプロジェクトを見せてくれれば、SCSS(SASS)活用能力を証明する最良の方法となり、採用にも当然優遇されます。

昨年だけでもSCSS(SASS)活用能力をウェブパブリッシャーに優遇事項として採用公告に載せることが大半でした。開発者にはSCSS(SASS)活用能力を求めるケースがあまり多くありませんでした。ところが最近講義オープン準備ができて採用公告を見ると、SCSS(SASS)活用能力をウェブパブリッシャーの資格要件に上げたり、開発者にも優遇事項や資格要件に上げる場合をよく見ます。特に、WebパブリッシャーにはFigmaの活用能力を求めるところもかなり多い。

▼最近ジョブコリアで検索したWebパブリッシャー、Web開発者実際の採用公告内容


架空の講義サイトを自分で作って
実力を確実に上げてみてください。

💡 [SCSS(SASS)+FLEX実戦レスポンシブWebプロジェクト with Figma]講義を通じてSCSS(SASS)コア理論と実務活用能力、FLEX Layoutコア理論と実務活用能力、PC、モバイル、タブレット対応レスポンシブレイアウト設計と製作実力を中上級まで上げることができます。

コーディングワークスが「Beyond Insight」という仮想で作ったオンライン講義のウェブサイトを制作します。 Inflearnまたはクラス101に似ていると見てください。メインページからサブページまで、プロジェクトコンセプトで様々なページと様々なレイアウトをSCSS(SASS)でコーディングし、すべてのレイアウトをFLEXレイアウトで製作される中上級の実力向上のためのレスポンシブウェブサイト制作プロジェクトです。

  • 体系的なレスポンシブウェブサイトプロジェクト制作プロセス
  • SCSS(SASS)コア理論と実務活用能力
  • FLEX Layout コア理論と実務活用能力
  • PC、モバイル、タブレット対応レスポンシブレイアウトの設計と製作
  • レスポンシブWebプロジェクトを作成するためのジェイクエリコア理論と実務活用能力
  • Figma(ピグマ)で製作するウェブサイトUIデザイン能力
  • 体系的なHTMLワイヤフレーム構造とクラスネーム設計能力
  • 実務でぴったり!必要不可欠なジェイクエリ相互作用の完全学習
  • すべての制作ソース提供(Figmaデザインファイル、パブリッシングソースファイル、講義資料PDF、パブリッシング完成本)

SCSS(SASS)ができるというだけでもパブリッシャー就職と離職で良い競争力を持つようになります。ところで、SCSS(SASS)を使ってレスポンシブウェブサイトプロジェクトを素敵にすることで、その能力と成果は就職や職場で誰よりも大きな競争力を持つことになると確信しています。もちろん、中上級レベルに近い授業内容であり、分量なのでただだけではありませんが、よく従うとコーディングワークスのどんな講義よりも大きな成果を持つことになると思います。

今回の講義で制作するレスポンシブWebプロジェクトは、単にメインページだけを作成するものではありません。全ウェブサイトの最も重要なページであるフロントページ、講義紹介ページ、カテゴリーメインページ、受講申込受講バスケットページ、会員登録ページの合計5ページです。すべてのページは、PC、モバイル、タブレットのレイアウトに変更するレスポンシブパブリッシング作業が行われるレッスンです。そして様々なジェイクエリーの相互作用を学び、様々なモーダルも製作します。


レスポンシブWebプロジェクト講義の学習手順🙆‍♀️

  • 手順01.レスポンシブウェブサイトPCレイアウトピグマ(Figma)UIデザイン
  • 手順 02.フィグマでのクラスネームとともに HTML ワイヤフレーム構造設計
  • 手順03.テキストエディタでHTMLをコーディングする
  • 手順 04.ジェイクエリの相互作用を伴うテキストエディタでの SASS(SCSS)コーディング
  • 手順05. PCレイアウトをMobileレイアウトに変更するパブリッシング
  • 手順06. PCレイアウトをタブレットレイアウトに変更するパブリッシング
  • 手順07.すべてのWebページの細かいパブリッシング最終仕上げ作業

1) ピグマ(Figma)でSCSS(SASS)+FLEX実戦反応型WebプロジェクトUIデザイン製作

2) ピグマ(Figma)でSCSS(SASS)+FLEX実戦反応型WebプロジェクトHTMLワイヤフレーム構造の製作

3)HTMLワイヤフレーム構造に基づいてテキストエディタでHTMLをコーディングする

4)HTMLワイヤフレーム構造に基づいてテキストエディタでSCSS(SASS)コーディング

5) モバイル対応レスポンシブウェブレイアウトによる変更作業

6) タブレット対応レスポンシブウェブレイアウトで変更作業

7) 全ウェブページのジェイクエリー相互作用作業と細かいパブリッシング最終仕上げ作業

▼ さまざまな種類の実際のデバイスモックアップで詳細な仕上げ作業

パブリッシング完成版のプレビュー&機能定義🙆‍♀️

この講義で製作するウェブページは、フロントページ、講義紹介ページ、カテゴリーメインページ、受講申請受講バスケットページ、会員登録ページです。すべてのページは、PC、Mobile、Tabletレイアウトに変更するレスポンシブパブリッシング作業が行われる講義です。そして様々なモーダルも一緒に制作します。

以下のセクションで[パブリッシング完成本のプレビュー&機能定義]映像をご覧になれば、その講義で何を作成するかパブリッシング機能定義が詳細に説明されています。そして[全カリキュラム]で授業内容目次をイメージでご覧いただけます。

▼ SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト : フロントページ(Front Page)

🚩 フロントページ(Front Page)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • ウェブサイトの最初のページは、ユーザーにそのウェブサイトのアイデンティティを表示します
  • 複雑なHTML構造を管理し、整理された階層を作成する方法(Clean Coding)
  • PC&Tabletレイアウトナビゲーションとモバイルナビゲーションを操作するスクリプトをif条件分岐させる
  • 一定の数値のスクロールをすると、Headerを上部に固定するスクリプトを使用
  • フロントページにメンター申請とイベントモーダルを表示
  • メインスライダーと講義アイテムスライダーをスリックスライダーとして製作
  • すべてのページが共通して走り回る Header & Footer をジェイクエリーでコンポーネント作業
  • カウントダウンタイマープラグインの使用
  • Footerのナビゲーションをモバイルレイアウト時にドロップダウンアコーディオン形式に変換
  • 検索フォーム要素にフォントアイコンを置くと:focus ::placeholderを使う
  • 仮想クラス:before:afterでフォントアイコンUnicodeを活用
  • SVG画像の使い方
  • CSS プロパティである Object-fit の本番使用方法
  • 必須のジェイクエリ相互作用メソッド(クラス制御、要素選択、イベントハンドラなど)
  • 不可欠なインラインJavaScriptの活用方法
  • 講義アイテムカードUIをさまざまな形でリサイクルする方法(@at-root)
  • フォントアイコン(Bootstrap Icons)の使い方と活用方法
  • メディアクエリブレークポイントごとにレスポンシブレイアウトを変更する(最小1024、768〜1024、最大767)

▼ SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト:講義紹介ページ(Class Detail)

🚩講義紹介ページ(Class Detail)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • 講義紹介ページで最も内容が多いため、パブリッシングワークが多いページ
  • 講義紹介 右サイドバー 一定スクロール後に固定する
  • 講義詳細内容サブナビゲーションスケジュールスクロール後に固定する
  • サイドバーを共有するボタンをクリックして共有するモーダルを表示する
  • カリキュラム紹介ジェイクエリアコーディオン
  • よく寄せられる質問
  • 受講後期別点改修棒CSSデザイン
  • カラー組み込み関数(built-in function)
  • メディアクエリブレークポイントごとにレスポンシブレイアウトを変更する(最小1024、768〜1024、最大767)

▼ SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト : カテゴリー メインページ(Category Main)

🚩カテゴリメインページ(Category Main)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • クラスレッスンリストスリックスライダー
  • ページングCSSデザイン
  • メディアクエリブレークポイントごとにレスポンシブレイアウトを変更する(最小1024、768〜1024、最大767)

▼ SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト : 受講申請受講バスケット(Take Course)

🚩 受講申込 受講バスケット(Take Course)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • JQueryを活用した受講カートアイテムの削除と全体削除
  • さまざまなCSS3属性(accent-color)
  • メディアクエリブレークポイントごとにレスポンシブレイアウトを変更する(最小1024、768〜1024、最大767)

▼ SCSS(SASS)+FLEX 実戦反応型ウェブプロジェクト : 会員登録ページ(Member Register)

🚩 会員登録ページ(Member Register)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • HTMLフォーム要素の特徴と属性の詳細な学習
  • フォーム要素仮想クラスの活用(:focus ::placeholder)
  • 重複したセレクタを効果的に整理する:is仮想クラス
  • カスタムチェックボックスできれいなチェックボックスとラジオボタンを作る
  • パスワードを表示/安全に設定するスクリプト

▼ SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト : ログインモーダル(Modal)

🚩ログインモーダル(Modal)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • HTMLフォーム要素の特徴と属性の詳細な学習
  • フォーム要素仮想クラスの活用(:focus ::placeholder)
  • 重複したセレクタを効果的に整理する:is仮想クラス
  • カスタムチェックボックスできれいなチェックボックスとラジオボタンを作る
  • パスワードを表示/安全に設定するスクリプト
  • @mixin @includeを活用する

🚩シェアするモーダル(Modal)、受講バスケット確認モーダル(Modal)

  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • Figma UIデザインとHTMLワイヤフレーム構造の作成
  • SCSS(SASS)とFLEXレイアウトでフルパブリッシングを制作
  • 仮想クラス:before:afterで図形を作る
  • 受講バスケット確認モーダル setTimeoutで4秒後に自動閉じる

さまざまなファイルを提供する🗂️

📝 [SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト with Figma] 全て完成本

セクション7では、レッスンを作成するためのすべてのソースファイルと一緒に、デザイン完成本、パブリッシング完成本が提供されています。また、講義では、コア理論の説明と重要なポイントの説明のためのPPTファイルもPDFとして提供されています。

  • [ダウンロード] デザイン作業(Beyond Insight)
  • [ダウンロード] HTMLワイヤフレーム構造(Beyond Insight)
  • [ダウンロード] パブリッシング作業(Beyond Insight)
  • [講義ノート PDF] SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト with Figma

📝 ビデオ講義で使用されているPPT講義資料PDFを提供

  • 設計作業とパブリッシング作業のためのさまざまな参考資料を提供
  • [講義ノート] SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト with Figma(全39ページ)

SCSS(SASS)+FLEX クリーンコーディング(Clean Coding)の定石🧽

[SCSS(SASS)+FLEX実戦レスポンシブWebプロジェクト with Figma]講義を受講しながらピグマUIデザイン能力、HTMLワイヤフレーム作成能力、パブリッシングのためのSCSS(SASS) + FLEX Layout 使用能力など様々なことで実力が成長すると思います。これらの部分も非常に重要ですが、最も重要な「キャリアのようにパブリッシングするクリーンコーディング(Clean Coding)の定石」を学びます。講義では、すべてのパブリッシングがこの原則の下に書かれています。

特に、今回の講義では、SCSS(SASS) コーディングを階層に従って順番にしなければならない部分について頻繁に強調します。 SCSS(SASS)の場合、セレクタ階層は通常のCSSよりもはるかに重要です。

<キャリアのようにパブリッシングするクリーンコーディング(Clean Coding)の定石>という部分は必要なところに必要な注釈を入れること、HTML出演順に合わせてCSSセレクタも順番にコーディングすること、共通のCSSセレクタの場合後でメンテナンスのためにCommon CSSというところに整理すること... このようなコーディングの原則と習慣を学ぶことができれば、実務で本当に多くの助けになります。

具体的には、就職時に人事担当者またはそれに準ずる人が志願者のパブリッシング結果を見て、ソースコード(Source Code)を見ることになります。このような場合は、少しだけソースコードを見ても、申請者のパブリッシングベータについて判断できます。

💡今回の講義の特別な魅力ポイントは?

  • フィグマ(Figma)の実戦制作で、レスポンシブなWeb UI制作能力を備えています。
  • パブリッシングのスキルを大幅に向上させるHTMLワイヤフレームの詳細な書き方を学びます。
  • パブリッシングキャリアのようにパブリッシングするクリーンコーディングの定石を学びます。
  • さまざまなページやレイアウトの作成、わかりやすい説明、深い概念を詳しく説明します。
  • レスポンシブWebパブリッシングのために受講生が知る必要があるすべてを説明します。
  • SCSS(SASS)とFLEXの深い理解と活用能力を学びます。
  • SCSS(SASS)コーディングは、階層に従って順次的で体系的な方法を学びます。
  • FLEXレイアウトを実務ですぐに理解して適用しながら、FLEXを確実に学びます。
  • パブリッシャー就職と転職のための最高のポートフォリオ、SCSS(SASS)レスポンシブWebプロジェクト

受講前の注意事項📢

🌈実習環境(テキストエディタ)

  • テキストエディタはビジュアルスタジオコード(Visual Studio Code)で作成されました。
  • ブラケット、サブライムなどの他のテキストエディタを使用することもできますが、そのテキストエディタはエクステンションとしてLive Sass Complierをサポートする必要があり、講義に従うことができます。
  • SCSS(SASS)コーディングには、ビジュアルスタジオコードの拡張であるLive Sass Complierを必ず使用してください。このレッスンでは、Live Sass Complierを使用するためにビジュアルスタジオコードを必ず使用してください。

学習資料のダウンロード

すべての学習資料は以下のセクションで入手できます。フォルダー変路押出ファイルとして提供されるので、ダウンロード後に解凍し、講義を順番に従います。

💡ダウンロードファイルの使い方とフォルダの内容

①デザイン作業とパブリッシング作業に必要な資料
② 設計作業開始時に必要な資料
③パブリッシング完成本資料

💡パブリッシングジョブテキストエディタ<ビジュアルスタジオコード>

該当講義はビジュアルスタジオコード(Visual Studio Code)で制作された講義です。ビジュアルスタジオコードは、使用制限のないフリープログラムです。すべてのレッスンビデオは、ビジュアルスタジオコードベースで説明されています。

以下のコーディングワークスのYouTubeビデオを通じて基本的な使い方をまず理解し、<セクション3.モバイルWeb詳細パブリッシング(HTML+CSS+JS)>を学習してください。

ビジュアルスタジオコード(Visual Studio Code)をダウンロードする(クリック)

  • ビジュアルスタジオコード(Visual Studio Code)の使い方と環境設定(ビデオを見る)
  • ビジュアルスタジオコード(Visual Studio Code)でのEmmetの使い方(ビデオを見る
  • ビジュアルスタジオコード(Visual Studio Code)必須拡張機能のインストールと使用法(ビデオを見る)
  • ビジュアルスタジオコードでCSSを変更したときに上がるフルリロードを防ぐ(ビデオを見る)
  • ✅ Live Sass Compilier ExtensionのインストールビデオはYouTubeにはありませんが、必ずインストールしてください。
  • ✅パブリッシングの前に、必ず以下のセクションでLive Sass Compilier Extensionのインストール方法を学んでください。


Q&A 💬

下記の予想質問以外の質問は、該当の講義コミュニティ質問掲示板に残していただければ最善を尽くしてご回答いたします。

Q. SCSS(SASS)とFLEXについて勉強したことがないのですが、授業によく従えますか?

🔊 FLEX先行学習
FLEXはあまり普遍的な内容なので、YouTubeでフレックスレイアウトまたはCSS Flexと検索すると、20~30分程度の映像でフレックスの理論をまとめた映像がかなり多いです。こんな映像1~2本くらい見て実習すればフレックス先行学習は十分です。フレックスレイアウトは思ったより理論的な内容が多くはありません。

🔊 SCSS(SASS) 先行学習
SCSS(SASS) 先行学習は講義に含まれるセクション 4. SCSS コア理論(Essential Theory)を学習すれば不足はありません。

Q. パブリッシング選手の知識がどのくらい必要ですか?

HTML+CSS 基本的な使用経験であればフォローすることができ、期待するほどの実力向上と成果を得ることができます。ただし、CSSの実力があまりにも基礎段階にある方には負担されることがあります。 CSSの実力がある程度しか揃っていなくても十分に追いつくことができます。

そして、SCSS(SASS)に初めて接する方のためにセクション4. SCSSコア理論(Essential Theory)に5時間以上の理論授業も用意されているのでセクション4を学習してセクション5~7まで十分に従って来てプロジェクトを完了することができるあります。

Q. コーディングワークス講義中にSCSS(SASS)すでに2つありますが、今講義とどう違いますか?

はい。既存のコーディングワークス講義中2つの講義があります。

< SCSS(SASS)+FLEX 実践反応型Webプロジェクト with Figma >講義は映像講義であり、SCSS(SASS)の核心理論と実戦活用を勉強する過程です。しかし、今回のコースのようにSCSS(SASS)で全体のウェブサイトを作る過程ではなく、受講生の立場では難易度負担が少ない講義です。そこで、SCSS(SASS)に初めて接する方には、SCSS(SASS)の経験とSCSS(SASS)で作った実践例を作るのに適した講義です。

講義は映像講義ではなく、教材や実践例ファイルを提供する講義です。パブリッシャーとしてリファレンス用に持っていれば役に立ちます。

上記の2つのコースを先行しなくても、今回のSCSS(SASS)+FLEXレスポンシブWebプロジェクト講義を受講することは問題になりません。ただし、CSSの実力がある程度は準備されていなければなりません。

Q. グラフィックプログラムの使用経験がないのにピグマ(Figma)デザインできますか?

紹介映像でも言及しましたが、ピグマは努力に比べてパフォーマンスがとても良いです。パワーポイントを最小限に扱うことができれば、十分にピグマデザインの授業に従うことができます。ただ、もう少し授業をうまく消化するために、<[必読]SCSS(SASS)+FLEX実戦反応型Webプロジェクトピグマ基礎講座(ft.デュアルモニター使用)>映像をご覧になって紹介したYouTubeを通じて先行学習をしてください。

Q.差別化される重要なコンテンツは何ですか?

デザイン専門家としてではなく、事前知識が全くない人がピグマをうまく活用できるレベルのデザイン講義なので、<セクション1. SCSS(SASS)+FLEXレスポンシブWebプロジェクトUIデザイン制作 with Figma> ピグマデザイン作業授業は専門家のための授業というよりピグマを初めて始める人が受け入れる無難なレベルです。
しかし、<セクション2. SCSS(SASS)+ FLEXレスポンシブWebプロジェクトHTML Wireframe with Figma>レッスンは、長い間パブリッシング講義を行ってきた講師として、パブリッシングのスキルを高める最も確実で体系的な方法で授業します。そして、モバイルWebパブリッシングという不慣れで難しい作業を段階的にレベルクラスの成果を引き出すことができるように制作された授業が重要だと思います。

特に、SCSS(SASS)レスポンシブWebプロジェクトを行うためのセクション4では、SCSSコア理論(Essential Theory)を5時間以上カバーしているため、SCSSコア理論を完全に学習できます。

さまざまなページのさまざまなレイアウトHTML構造を作成し、それをパブリッシングしながら、中上級パブリッシングのスキルを持つことになると思います。

Q. デザイン非専攻者も聞ける講義ですか?

十分可能です。私もデザインと全く関係のない専攻です。セクション1の<[必読] SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト ピグマ基礎講座> 映像にもありますが、パワーポイントをよく扱う程度ならピグマ学習して活用するのにまったく支障がありません。私もピグマ講義のために短期間学習したのに良いデザイン結果を得ることができました。

Q.デザイナーのPigmaはうまくいきますが、セクション1のPigmaデザインを学ぶ必要がありますか?

紹介映像にも言及しましたが、私がピグマを長くしてくれたり上手な人ではありません。だからピグマ作業に自信がある方なら<セクション1. SCSS(SASS)+FLEXレスポンシブWebプロジェクトUIデザイン制作 with Figma>は通り過ぎて<セクション2. SCSS(SASS)+FLEXレスポンシブWebプロジェクトHTMLワイヤフレームwith Figma>ですぐに行って学習してください。

セクション2のHTMLワイヤフレーム構造の作成からは、デザイン領域ではなく、パブリッシング講義領域です。

Q. SCSS(SASS)+FLEXレスポンシブWebプロジェクト制作過程をなぜ学ばなければならず、具体的な期待効果は何ですか?

[SCSS(SASS)+FLEX実戦レスポンシブWebプロジェクト with Figma]講義を通じてSCSS(SASS)コア理論と実務活用能力、FLEX Layoutコア理論と実務活用能力、PC、モバイル、タブレット対応レスポンシブレイアウト設計と製作実力を中上級まで上げることができます。

具体的な期待効果は実は人によって異なります。しかし、コーディングワークスが確かにお話しできる部分は「 HTMLワイヤフレーム構造を作る能力が大幅に向上」されます。さまざまなHTMLワイヤフレーム構造を作成しながら、複雑なHTML階層をどのように体系的に整理するかを十分に訓練します。また、一貫性のあるクラス名をどのようにネーミングして共有するかを一緒に作成しながら詳細に授業します。

<セクション 2. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト HTML ワイヤフレーム with Figma>でさまざまな HTML ワイヤフレーム構造を作成し、<セクション 5~7。 SCSS(SASS)+ FLEXレスポンシブWebプロジェクト詳細パブリッシング>から本番Webパブリッシングを適用する段階まで訓練するので、今後はかなりのWeb UIレイアウトを作成することに自信があります。

Q. 授業内容をどのレベルまで扱いますか?

SCSS(SASS)+ FLEXレスポンシブWebプロジェクトは、性質上、ファイルの数とフォルダが数が多いです。だからちょっとスピード感のあるように多くの内容が進みます。あるレベルまでというのが人の基準によって異なりますが、パブリッシャー個人ポートフォリオとして十分なレベルで作業する授業内容です。

SCSS(SASS)+ FLEXレスポンシブWebプロジェクトの講義は初中級レベルですが、中級に近いと思います。まもなく、すごく多くの内容を扱います。初心者には負担になることがありますが、コースを終えればパブリッシング能力がかなり成長したことを感じられると思います

Q. コーディングワークス様講義中に< モバイルウェブパブリッシングポートフォリオ with Figma>を受講しましたか?

モバイルWebパブリッシングポートフォリオ with Figma レッスンを受講したら、[セクション 1. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト UI デザイン制作 with Figma デザイン]内容を必ず学ぶ必要はありません。 (可能であれば速い速度で作ってみることをお勧めします。)

[ セクション 2. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト HTML ワイヤフレーム with Figma]から学習を始めても大丈夫です。

Q. 全体の講義時間はどうなりますか?

全映像講義時間は41時間以上で、深い学習のための十分な授業時間で用意されています。全体の授業率は、ピグマデザイン作業が15%、パブリッシング作業が85%を占めます。全体のビデオでは、セクション1はPigma UIデザインタスクであり、残りのセクションはレスポンシブWebパブリッシング学習領域です。

  • セクション 1. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト UI デザイン制作 - 6 時間 37 分
  • セクション2. SCSS(SASS)+ FLEXレスポンシブWebプロジェクトHTMLワイヤフレーム - 5時間21分
  • セクション3.ビジュアルスタジオコードでLive Sass Compilerを設定して使用する - 1時間15分
  • セクション 4. SCSS コア理論(Essential Theory) - 5時間 9分
  • セクション 5. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト for PC Layout - 15時間 44分
  • セクション 6. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト for Responsive Layout - 3 時間 35 分
  • セクション7. [最終仕上げ] SCSS(SASS)+FLEXレスポンシブWebプロジェクト - 2時間53分

Q. 受講に関する注意事項(必要な環境、その他の留意事項など)はありますか?

授業内容が多く、スピード感があります。とはいえ、十分な説明なしで通り過ぎずに詳細に説明します。よく従うと思います。ただし、シングルモニターで学習するよりも、デュアルモニター環境を整えることを強くお勧めします。セクション1にある[必読] SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト ピグマ基礎講座(ft.デュアルモニター使用) 映像は受講申請前に必ずご覧ください。


知識共有者の紹介✒️

[SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト with Figma] 講義を作成したコーディングワークスは、現在まで300人以上の国費パブリッシングコースの学生にパブリッシング理論、活用、個人ポートフォリオホームページ制作講義を行っています。特に、パブリッシャー就職のためのすべての準備過程をAからZまで完全にガイドしながら、ほとんどの学生がコース終了後すぐに就職ができるように、長年にわたりパブリッシング講義だけが専門的にやってきた講師です。また、Inflearnでパブリッシング関連講義を進めながら、Inflearn受講生の方々にも役に立ったとの評価も受けています。

🙋🏻‍♂️質問する前に必ず!読んでください〜!

学びながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合、HTML、CSS、JSコードの両方をアップロードする必要があります。

質問にコードなしでグローだけの問題を説明すると、本当に簡単ではないと正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコードとブラウザのキャプチャをアップロードしてください〜」と返信する必要があり、最終的に解決策を得るのに面倒で時間がかかります。

▲該当講義コミュニティのよくある質問の見方をまず確認してください〜

⚡効果的な学習のためにぜひ!コーディングワークスパブリッシングYouTubeを参照してください。

コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。

コーディングワークスパブリッシングYouTubeチャンネル: https: //www.youtube.com/codingworks

知識共有者の紹介

[HTML+CSS+JS 本番ポートフォリオ(シーズン3)]講義を行ったコーディングワークスは、現在まで300人以上の国費パブリッシング課程の学生にパブリッシング理論、活用、個人ポートフォリオホームページ制作講義を行っています。特に、パブリッシャー就職のためのすべての準備過程をAからZまで完全にガイドしながら、学生のほとんどのコース終了後すぐに就職ができるように、長年にわたりパブリッシング講義だけが専門的にやってきた講師です。また、Inflearnでパブリッシング関連講義を進めながら、Inflearn受講生の方々にも役に立ったとの評価も受けています。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • SCSS(SASS) の基本理論と実務活用能力が必要な方

  • 体系的なレスポンシブ ウェブ サイト プロジェクトの作成ポートフォリオが必要な方

  • フロントエンド開発者としてパブリッシングの真髄を知りたい方

  • 最も競争力のあるレスポンシブ ウェブ プロジェクトを必要とするパブリッシャー

  • 履歴書で競争力を高めたいSCSS(SASS)の活用能力をお持ちの方

前提知識、
必要でしょうか?

  • HTML+CSS の基本以上の能力

こんにちは
です。

12,580

受講生

739

受講レビュー

2,110

回答

4.9

講座評価

23

講座

■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704

カリキュラム

全体

125件 ∙ (41時間 14分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

21件

4.9

21件の受講レビュー

  • My Dream님의 프로필 이미지
    My Dream

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    Front Web 개발은 처음이라서 걱정을 많이 했습니다. 강의료가 다른 강좌에 비해서 다소 큰 차이가 있어 걱정을 조금 했지만(ㅎㅎㅎ) 저의 선택이 신의 한수가 되었군요. (강의를 정말 잘~ 하십니다.!! ) 웹 개발 경험이 1도 없습니다. 개발된 메인 프로그램을 웹/모바일로 서비스 해야겠다는 생각에 사전 준비 및 공부 좀 해야겠다 싶어, 강의 신청하고 휴가를 1주일 정도 내어 정~ 주행 했답니다. 4일째 되던 날~ 토 나오려고 하더군요. 암튼 5일째, 모든 강의를 끝내고 ASP.Net Core 7 Razor page 로 몇 가지 테스트 해 봤습니다. (Udemy 사이트에서 ASP.NET Core Web Application Using Razor Pages 15,000원 강의 듣고 나서~ㅎㅎ) 테스트한 결과물이 DB와 잘 연동되어 표현이 잘 되는 것에 너무 기뻐하고 신세계를 경험 했습니다. 과거 코볼, 포트란으로 시작해서 현재는 C#, VB.NET 그 외 몇 개의 개발툴로 데스크탑 실무를 개발한 구식(?) 기술로 과연 내가 현재 트렌트에 맞는 개발 환경에 적응할 수 있을까? 싶었는데.. 자세한 설명에 쉽게 이해할 수 있었습니다. 덕분에 큰 힘이 되어 용기가 생겼습니다. SCSS / 피그마(유료결재함) / J쿼리 / HTML 위 4개의 항목과 샘플 예제 강좌만으로도 레벨업!! 그동안 포토샵을 20년 가까이 사용했는데, 덕분에 포토샵 사용할 일이 거의 없을 듯싶네요. ㅎㅎ 사족이 길었네요. 긴 강의를 100% 끝낸 건 처음이라서..ㅎㅎ 훌륭한 선생님의 강의에 감사를 드립니다. 항상 건강하시길~ 기도하겠습니다.

    • 코딩웍스(Coding Works)
      知識共有者

      실무자로서 구체적인 내용이라 예비 수강생한테 도움이 많이 될 것 같습니다. 수강평 감사드립니다~!!

  • pcdoomco4님의 프로필 이미지
    pcdoomco4

    受講レビュー 3

    平均評価 5.0

    5

    83% 受講後に作成

    인프런에서 가장 가성비있다 여겨지는 강사중한분이 바로 코딩웍스입니다. 최근에 개강되는건 최신기술이라 가격대가 좀있지만 기존 컨텐츠들을보면 굉장히 저렴한 수강료에 방대한 볼륨이 인상적으로 코딩웍스를 알게되었고 강의를 수강하게되었습니다. 오프라인학원을 다닌다 해도 이렇게 방대한 볼륨을 자랑하는 수업밀도는 찾아보기힘들정도로 전체강의구성을 보면 강의시간이 40시간이 넘어갈정도로 디테일이 살이있는 컨텐츠입니다. 게다가 웹퍼블의 중고급단계 최신기술을 집약해서 실제로 실습위주의 수업으로 실제 고급기술을 총망라한 결과물까지 얻어가실수있습니다. 무엇보다 강사님의 답변이 굉장히 빠른다는게 인상적이였습니다 일요일에 문의사항이있어서 강좌수강관련 질문을 2건남겼었는데 그날 바로바로 답변이 달리더군요 방대한 볼륨 최신기술집약 실습위주 강사님의 빠른 피드백등 이강좌를 추천안할이유가없네요 프론트 앤드 개발자도 리액트 뷰이전에 웹퍼블능력은 솔직히 기본이라 생각하거든요 요새 업종별로 경계선이 무너지며 멀티를 요구하는 시대인지라 이거저거 다할줄아는사람이 고액연봉의 자리에 오를수있다고 최소한 화면구현만큼 내머릿속에있는걸 스스로 만들수있어야하시는분들은 리액트나 뷰 공부하시는분들도 이강좌는 개인적으로 학습해보시길 추천드립니다. 아직 완강한건아니지만 설명을 워낙 친절하게 잘해주셔서 공부하는재미가나네요^^ 방대한 볼륨이 의미하는건 강사가 가르치는 내공이 깊다는걸 의미하거든요 내공이 얕은강사는 강의시간을 방대하게 구성하라해도 그게안되거든요 전 백앤드 공부를하고있지만 화면구현만큼 전문가수준까지 스스로 실력을 키우자란 취지로 이강의를 선택했습니다.

  • todam_sseudam님의 프로필 이미지
    todam_sseudam

    受講レビュー 2

    平均評価 5.0

    5

    60% 受講後に作成

    실무 하면서 들은 수업 중에 가장 도움이 많이 되고 있습니다. 지금껏 얼마나 돌아 돌아 코딩을 한 건지.. ^^;; 순간 순간 반성도 많이 하고 있습니다. 완전 감사한 마음으로 수강중입니다!!!

  • 빼미님의 프로필 이미지
    빼미

    受講レビュー 6

    平均評価 5.0

    5

    6% 受講後に作成

    2년전 선생님 강의 듣고 취뽀했었는데 경영난으로 다시 재취업준비를 하게 되었습니다 ㅠㅠ SCSS를 아직 사용안해봤던지라 공부해보려고 듣고 있어요! 넘넘 좋아요~! 감사합니다!

  • jaeuishin님의 프로필 이미지
    jaeuishin

    受講レビュー 7

    平均評価 5.0

    5

    30% 受講後に作成

    피그마 환경이 생소해서, 생각보다 공부와 작업이 늦어질 거 같지만, 차근차근 해보도록 하겠습니다. 그래도 재밌습니다. :)

¥14,056

codingworksの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!