SCSS(SASS)とFLEX Layoutを実戦で完璧に活用します！Figmaでウェブサイト全体のメインページおよび主要なサブページのUIをデザインし、一貫性のあるクラス名とともにHTMLワイヤーフレーム構造を作成してパブリッシングまで完了させる、体系的なレスポンシブウェブサイトプロジェクト制作過程です。合計41時間以上のカリキュラムの中で、核心理論および実務活用能力を十分に習得し、PC・モバイル・タブレット対応のレスポンシブレイアウトを設計・制作しながら、レスポンシブウェブプロジェクトに関する経験とノウハウはもちろん、jQueryの核心理論および実務活用能力まで大幅に向上させることができます。
受講生 340名
難易度 初級
受講期間 無制限
学習した受講者のレビュー
5.0
My Dream
Front Web開発は初めてなので心配がたくさんありました。 講義が他の講座に比べて多少大きな違いがあります。 心配を少ししたけど(ㅎㅎㅎ) 私の選択が神の一人になりましたね。 （講義を本当に上手にします。!!） Web開発経験が1もありません。 開発されたメインプログラムをWeb/モバイルでサービスしなければならないという考えに 事前準備と勉強をしなければならない、講義申請して休暇を1週間程度 出してチョン～走行しました。 4日目になった日～土出せようとしましたね。 とにかく5日目、すべての講義を終えて ASP.Net Core 7 Razor page でいくつかテストしてみました。 (Udemy サイトの ASP.NET Core Web Application Using Razor Pages 15,000ウォン講義を聞いてから〜ㅎㅎ） テストした結果がDBとうまく連動して表現がうまくいくことに とても喜んで新世界を経験しました。 過去のコボル、Fortranで始まり、現在はC＃、VB.NETなどいくつか 開発ツールでデスクトップ実務を開発した旧式（？）技術で 果たして、私は現在のトレントに合った開発環境に適応できますか？したかったのに… 詳細な説明に簡単に理解できました。 おかげで大きな力になって勇気ができました。 SCSS / ピグマ（有料決済） / Jクエリ / HTML 上記4つの項目とサンプル例講座だけでもレベルアップ！ これまでPhotoshopを20年近く使っていましたが、おかげでPhotoshop 使うことがほとんどないようですね。 ㅎㅎ 死族が長かったですね。 長い講義を100％終えたのは初めてだから… 素晴らしい先生の講義に感謝します。 いつも元気です～祈ります。
5.0
pcdoomco4
インフラストラクチャで最もコスパがあると思われるインストラクターの中には、コーディングワークスがあります。最近開講されるのは最新技術なので価格帯が少しありますが、既存のコンテンツを見ると、とても安い受講料に膨大なボリュームが印象的にコーディングワークスを知り、講義を受講することになりました。オフライン学園に通ってもこのように膨大なボリュームを誇る授業密度は、閲覧するのが難しい程度で全体講義構成を見ると講義時間が40時間を超えて行くほどにディテールが肉のあるコンテンツです。しかもウェブパブリックの中高級段階最新技術を集約して実際に実習中心の授業で実際の高級技術を総網羅した結果物まで得ることができます。何より講師様の回答がすごく早いというのが印象的でした 日曜日に質問があって講座受講関連質問を2件残しましたが、その日すぐに回答が走りましたね 膨大なボリューム推奨しない理由はありません。フロント＆開発者もリアクトビューの前に正直、基本だと思うんですよ要塞業種別に境界線が崩れてマルチを求める時代なんだからこれをやり遂げる人が高額年俸の席に上がることができると少なくとも画面実装だけに自分の頭の中にいることを自分で作れなければならない方はリアクトやビュー勉強している方も、この講座は個人的に学習してみることをおすすめします。まだ頑張ったわけではありませんが、説明をとても親切にしてくださって勉強する面白いですね^^そして勉強していますが、画面実装と同じくらい専門家レベルまで自分で実力を育てようという趣旨で李講義を選びました。
5.0
문유연
最高の授業……！ 今までたくさんの講義を受けてきましたが、先生のように丁寧かつ分かりやすく教えてくださる方はいなかったと思います。おかげで本当に多くのことを学ぶことができました。 受講しようか迷っている方に、本当におすすめします。基礎がなくても先生がとても優しく丁寧に説明してくださるので、絶対に後悔しないはずです。
体系的なレスポンシブウェブサイトプロジェクトの制作過程
SCSS(SASS)の核心理論および実務活用能力
FLEX Layoutの核心理論および実務活用能力
PC、モバイル、タブレット対応のレスポンシブレイアウト設計および制作
レスポンシブウェブプロジェクト制作のためのjQuery核心理論および実務活用能力
Figmaで制作するウェブサイトUIデザイン能力
体系的なHTMLワイヤーフレーム構造とクラス名設計能力
Webパブリッシャーと開発者のための最高のレスポンシブWebポートフォリオ制作
ウェブパブリッシャーと開発者のための圧倒的なポートフォリオをお探しなら？
SCSS(SASS)+FLEX レスポンシブ オンライン講義サイトプロジェクト！
Point 1. Figma（フィグマ）によるSCSS(SASS)+FLEXウェブサイトUIデザイン制作
Point 2. SCSS(SASS)+FLEXウェブサイト HTMLワイヤーフレーム全ページの詳細な制作
Point 3. SCSS(SASS)+FLEXを活用した多様で多数のウェブページパブリッシング制作
Point 4. PC、モバイル、タブレット対応のレスポンシブレイアウト設計、制作、そして完璧なパブリッシング作業まで
Point 5. レスポンシブウェブプロジェクト制作のためのjQuery核心理論および実務活用能力
CodingWorksがこれまで数多くのオフラインスクールや個人ポートフォリオサイト制作過程で授業してきた、中上級パブリッシング制作のノウハウが詰め込まれています。特にSCSS(SASS)+FLEXをベースに制作するレスポンシブWebパブリッシングプロジェクトなので、SCSS(SASS)+FLEXの能力を最大限に引き上げることができます。
完走後には、一段と向上した中上級レスポンシブWebパブリッシング能力を身につけられると確信しています！
スムーズな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)
SCSS核心理論(01) - セレクタのネスト(Nesting)
SCSS核心理論(02) - 親セレクタの参照(&)とコメントアウト
SCSS核心理論(03) - 親セレクタ参照(&)の応用
SCSS核心理論(04) – 代表的なCSSセレクタをSCSSで作る
SCSS核心理論(05) - 親セレクタ参照(&) 擬似クラス
SCSS核心理論(06) - 親セレクタ参照(&) 属性セレクタ
SCSS 核心理論(07) - 親セレクタのネスト解除 @at-root
SCSS核心理論(08) – 接頭辞(prefix)を使用してCSS属性を自動生成
SCSS核心理論(09) – 仮想クラス :isでセレクタの重複を減らす
SCSS核心理論(10-1) - 変数(Variables) 01
SCSS核心理論(10-2) - 変数(Variables) 02
SCSS核心理論(10-3) - 変数(Variables)の有効範囲とCSS変数宣言
SCSS核心理論(11-1) - 外部ファイルの取り込み @import
SCSS核心理論(11-2) - @importで分割(Partial)されたファイルを読み込む
SCSS核心理論(12) - 演算子(Operations)、出力ウィンドウを消す
SCSS 核心理論(13-1) - グループ宣言 @mixin、グループ使用 @include
SCSS核心理論(13-2) - @mixinと@includeを応用する
SCSS 核心理論(13-3) - @mixinと@includeを活用したボタンデザイン
SCSS核心理論(13-4) - @mixinの引数を@includeで使用する
SCSS核心理論(14) - セレクタ属性を取り込む @extend
SCSS核心理論(15) - @extendと共に使用するプレースホルダー選択子 %
SCSS核心理論(16) - 多重変数宣言、内蔵関数(map-get)
該当講義に受講評を作成してくださった方に限り、SCSS(SASS)+FLEX核心理論PDF教材および活用例題ファイルを提供いたします。提供されるPDF教材とファイルは、<SCSS(SASS)+FLEX実戦レスポンシブウェブプロジェクト with Figma>のパブリッシング作業や、今後の実務での作業において、良いリファレンスになるはずです。
受講評は、受講生の方が該当の講義を見て感じた率直な感想を書いていただければと思います。受講評を作成し、作成した受講評をキャプチャして以下のメールアドレスにお送りいただければ、[SCSS(SASS)+FLEX 核心理論および活用例ファイル]をメールでお送りいたします。
受講レビューイベントは、講座オープン割引期間の4週間の期間限定で実施します。
※ 受講レビューイベントは期間を定めずに実施することにしましたので、いつでも受講レビューを書いていただければと思います。
■ 期間：4週間（2023年7月1日～7月28日）
■ 対象：該当講義の受講評を記入してくださったすべての方
■ メール：webnlife@naver.com
🚩提供ファイル
- SCSS(SASS)核心理論教材(PDF、67ページ)および完成版活用例
- FLEX核心理論教材(PDF、36ページ)および完成版活用例
※ 完成版活用例は、該当教材に登場するすべての例題を作成した完成版です。
※ SCSS(SASS)+FLEX核心理論教材および提供ファイルの詳細紹介を見る：https://inf.run/qzdx
※ GRID核心理論教材と活用例は含まれておりません。
※ 受講レビュー作成の確認メールを送っていただければ、提供ファイルは24時間以内に発送されます。
昔も今も、ある程度の規模がある会社のウェブパブリッシャーやフロントエンドエンジニアの採用公告を見ると、SCSS(SASS)の活用能力は常に採用において「優遇事項」として扱われます。優遇事項というのは、必須の資格要件ではありませんが、できればより優遇するという意味です。つまり、他の志願者に比べて高い競争力を持つということでもあります。
🔥 パブリッシャーとして、または開発者として入社志望や面接で SCSS(SASS)の活用能力があると口頭で伝えるだけでは不十分です。SCSS(SASS)を実際にはただ聞いたことがある程度や、少し触ってみた程度なのに、面接の時には「できます」と言う志願者は本当に多いです。口先だけのパブリッシング活用能力、口先だけの開発能力は、なかなか信じてもらえません。しかし、実際にSCSS(SASS)を活用して制作したレスポンシブWebプロジェクトを見せれば、SCSS(SASS)の活用能力を証明する最高の方法となり、採用においても当然優遇されることになります。
昨年までは、SCSS(SASS)の活用能力をウェブパブリッシャーの優遇条件として採用情報に掲載するのがほとんどでした。開発者にSCSS(SASS)の活用能力を求めるケースはそれほど多くありませんでした。しかし、最近講座のオープン準備を終えて採用情報を見てみると、SCSS(SASS)の活用能力をウェブパブリッシャーの必須条件として掲載したり、開発者に対しても優遇条件や必須条件として掲載したりするケースを頻繁に目にします。特に、ウェブパブリッシャーに対してはFigmaの活用能力を求める企業もかなり増えています。
▼ 最近 ジョブコリアで検索したウェブパブリッシャー、ウェブ開発者の実際の採用公告内容
💡 [SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト with Figma] 講座を通じて、SCSS(SASS)の核心理論および実務活用能力、FLEX Layoutの核心理論および実務活用能力、PC・モバイル・タブレット対応のレスポンシブレイアウト設計および制作の実力を中上級まで引き上げることができます。
コーディングワークスが'Beyond Insight' という架空のオンライン講義ウェブサイトを制作します。InflearnやClass101に似ていると考えていただければと思います。メインページからサブページまで、プロジェクトの概念で多様なページとレイアウトをSCSS(SASS)でコーディングし、すべてのレイアウトをFLEXレイアウトで制作する、中上級のスキル向上のためのレスポンシブウェブサイト制作プロジェクトです。
SCSS(SASS)ができるということだけでも、パブリッシャーの就職や転職において強力な競争力になります。さらに、SCSS(SASS)を使用してレスポンシブウェブサイトプロジェクトを見事に作り上げれば、その能力と成果物は、就職や転職において誰よりも大きな競争力を持つことになると確信しています。もちろん、中上級レベルに近い授業内容とボリュームなので簡単ではありませんが、しっかりついてきていただければ、CodingWorksのどの講義よりも大きな成果を得られると思います。
今回の講義で制作するレスポンシブWebプロジェクトは、単にメインページだけを作るのではありません。 Webサイト全体の中で最も重要なページであるフロントページ、講義紹介ページ、カテゴリメインページ、受講申し込み・受講カートページ、会員登録ページの計5ページです。すべてのページはPC、モバイル、タブレットのレイアウトに変更するレスポンシブコーディング作業が行われる講義です。そして、多様なjQueryのインタラクションを学び、様々なモーダルも制作します。
1) FigmaでSCSS(SASS)+FLEX実践レスポンシブWebプロジェクトのUIデザイン制作
2) FigmaでSCSS(SASS)+FLEX実践レスポンシブWebプロジェクトのHTMLワイヤーフレーム構造を制作
3) HTMLワイヤーフレーム構造を基にテキストエディタでHTMLコーディング
4) HTMLワイヤーフレーム構造を基にテキストエディタでSCSS(SASS)コーディング
5) モバイル対応レスポンシブウェブレイアウトへの変更作業
6) タブレット対応レスポンシブWebレイアウトへの変更作業
7) すべてのウェブページのjQueryインタラクション作業と細部パブリッシングの最終仕上げ作業
▼ 様々な種類の実際のデバイスのモックアップでの詳細な仕上げ作業
この講座で制作するウェブページは、フロントページ、講座紹介ページ、カテゴリーメインページ、受講申し込み・受講バスケットページ、会員登録ページです。すべてのページはPC、Mobile、Tabletレイアウトに変更するレスポンシブパブリッシング作業が行われる講座です。また、多様なモーダルも一緒に制作します。
下のセクションにある [パブリッシング完成版プレビュー & 機能定義] 動画をご覧いただければ、本講義で何を制作するのか、パブリッシングの機能定義が詳細に説明されています。また、[全体カリキュラム]で授業内容の目次を画像でご確認いただけます。
▼ SCSS(SASS)+FLEX 実践レスポンシブWebプロジェクト：フロントページ(Front Page)
🚩 フロントページ(Front Page)
▼ SCSS(SASS)+FLEX 実践レスポンシブWebプロジェクト：講義紹介ページ(Class Detail)
🚩 講義紹介ページ(Class Detail)
▼ SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト：カテゴリーメインページ(Category Main)
🚩 カテゴリーメインページ(Category Main)
▼ SCSS(SASS)+FLEX 実践レスポンシブWebプロジェクト：受講申請・受講カート(Take Course)
🚩 受講申請 受講バスケット(Take Course)
▼ SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト：会員登録ページ(Member Register)
🚩 会員登録ページ(Member Register)
▼ SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト：ログインモーダル(Modal)
🚩 ログインモーダル(Modal)
🚩 共有する モーダル(Modal)、受講バスケット確認モーダル(Modal)
📝 [SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト with Figma] すべての完成版
セクション7では、講義制作のためのすべてのソースファイルとともに、デザイン完成版、パブリッシング完成版が提供されます。また、講義での核心理論の説明や重要ポイントの説明のためのPPTファイルもPDFで提供されます。
📝 動画講義で使用されたPPT講義資料のPDFを提供
[SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト with Figma] 講座を受講することで、FigmaのUIデザイン能力、HTMLワイヤーフレーム作成能力、パブリッシングのためのSCSS(SASS) + FLEX Layoutの使用能力など、多方面で実力が向上するはずです。これらの部分も非常に重要ですが、最も重要な「経験者のようにパブリッシングするクリーンコーディング（Clean Coding）の定石」を学ぶことになります。講義内のすべてのパブリッシングは、この原則に基づいて作成されています。
特に今回の講義では、SCSS(SASS)コーディングを階層構造に従って順次行うべき部分について頻繁に強調しています。SCSS(SASS)の場合、セレクタの階層構造が通常のCSSの時よりもはるかに重要です。
<経験者のようにパブリッシングするクリーンコーディング（Clean Coding）の定石>という部分は、必要な場所に必要なコメントを入れること、HTMLの出現順序に合わせてCSSセレクタも順序通りにコーディングすること、共通のCSSセレクタの場合は後のメンテナンスのためにCommon CSSという場所に整理すること... このようなコーディング原則と習慣を学ぶことは、実務で非常に役立ちます。
特に、就職の際に採用担当者やそれに準ずる人が志願者のパブリッシング成果物を確認し、ソースコード（Source Code）を見ることになります。このような場合、少しソースコードを見ただけでも、志願者のパブリッシングの基本について判断することができます。
すべての学習資料は、以下のセクションからダウンロードいただけます。フォルダごとに圧縮ファイルで提供されますので、ダウンロード後に解凍し、講義の順番に沿って進めてください。
💡 ダウンロードファイルの使用方法およびフォルダの内容
① デザイン作業とパブリッシング作業に必要な資料
② デザイン作業を開始する際に必要な資料
③ パブリッシング完成版の資料
💡 パブリッシング作業 テキストエディタ <Visual Studio Code>
該当講座「SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト with Figma」は、ビジュアルスタジオコード(Visual Studio Code)で制作された講座です。ビジュアルスタジオコードは使用制限のないフリープログラムです。すべての講義動画はビジュアルスタジオコードを基準に説明しています。
以下のコーディングワークスのYouTube動画を通じて、基本的な使い方を先に習得してから、<セクション3. モバイルウェブ詳細パブリッシング(HTML+CSS+JS)>を学習してください。
以下の予想質問以外の質問は、該当講座のコミュニティ質問掲示板に残していただければ、最善を尽くしてお答えいたします。
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つありますが、今の講義とはどのように違うのですか？
はい。既存のコーディングワークスの講義の中に、<SCSS(SASS)+GRID+FLEX 実戦ポートフォリオパブリッシング>と<SCSS(SASS) FLEX GRID コア理論(PDF)教材および活用例>の2つの講義があります。
<SCSS(SASS)+FLEX 実戦レスポンシブウェブプロジェクト with Figma> 講座は動画講座で、SCSS(SASS)の核心理論と実戦活用を学ぶカリキュラムです。しかし、今回のコースのようにSCSS(SASS)でウェブサイト全体を制作する過程ではないため、受講生の立場からは難易度の負担が比較的少ない講座です。そのため、SCSS(SASS)に初めて触れる方がSCSS(SASS)の経験を積み、SCSS(SASS)で作る実戦例を制作するのに適した講座です。
<SCSS(SASS) FLEX GRID 核心理論(PDF)教材および活用例>講座は、動画講義ではなく、教材と実戦例題ファイルを提供する講座です。パブリッシャーとしてリファレンス用に持っておくと役に立ちます。 không phải là bài giảng video mà là khóa học cung cấp tệp giáo trình và ví dụ thực hành. Sẽ rất hữu ích nếu bạn lưu giữ nó để làm tài liệu tham khảo với tư cách là một người làm nghề Publisher.
上記2つの過程を先行していなくても、今回のSCSS(SASS)+FLEX レスポンシブWebプロジェクト講義を受講することに問題はありません。ただし、CSSの実力がある程度は備わっている必要があります。
Q. グラフィックソフトの使用経験がありませんが、フィグマ（Figma）でデザインできますか？
紹介動画でも言及しましたが、Figmaは努力に対するパフォーマンスが非常に高いです。パワーポイントを最低限扱える程度であれば、十分にFigmaデザインの授業についていくことができます。ただし、よりスムーズに授業を理解していただくために、<[必読] SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト Figma基礎講座(ft.デュアルモニター使用)>の動画を視聴し、紹介されているYouTubeを通じて予習しておくことをお勧めします。
Q. 差別化された核心的なコンテンツは何ですか？
デザインの専門家としてではなく、予備知識が全くない人がFigmaを十分に活用できるレベルのデザイン講義であるため、<セクション 1. SCSS(SASS)+FLEX レスポンシブWebプロジェクト UIデザイン制作 with Figma>のFigmaデザイン作業の授業は、専門家のための授業というよりは、Figmaを初めて始める人が受け入れやすいレベルです。
しかし、<セクション 2. SCSS(SASS)+FLEX レスポンシブWebプロジェクト HTMLワイヤーフレーム with Figma> の授業は、長年パブリッシング講義を行ってきた講師として、パブリッシングの実力を高める最も確実で体系的な方法で授業を行います。そして、モバイルWebパブリッシングという不慣れで難しい作業を、段階的にハイレベルな成果物へと導き出せるように制作された授業が核心であると考えています。
特にSCSS(SASS)レスポンシブWebプロジェクトを行うためのセクション4で、SCSSの核心理論(Essential Theory)を5時間以上扱っているため、SCSSの核心理論を完璧に学習することができます。
様々なページの多様なレイアウトHTML構造を作り、それをパブリッシングしていくことで、中上級のパブリッシング実力を身につけることができると思います。
Q. デザイン非専門家でも受講できる講座ですか？
十分に可能です。私もデザインとは全く関係のない専攻です。セクション1の<[必読] SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト Figma基礎講座>の動画にもありますが、パワーポイントを使いこなせる程度であれば、Figmaを学習し活用するのに全く支障はありません。私もFigmaの講義のために短期間学習しましたが、良いデザインの成果物を得ることができました。
Q. デザイナーなのでフィグマは得意なのですが、セクション1のフィグマデザインを学習する必要がありますか？
紹介映像でも言及しましたが、私はフィグマ（Figma）を長く使っていたり、得意だったりするわけではありません。ですので、フィグマの作業に自信がある方であれば、<セクション 1. SCSS(SASS)+FLEX レスポンシブWebプロジェクト UIデザイン制作 with Figma>は飛ばして、<セクション 2. SCSS(SASS)+FLEX レスポンシブWebプロジェクト HTMLワイヤーフレーム with Figma>へ直接進んで学習してください。
セクション2のHTMLワイヤーフレーム構造作りからは、デザイン領域ではなくパブリッシング講義の領域です。
Q. SCSS(SASS)+FLEXレスポンシブウェブプロジェクト制作過程をなぜ学ぶべきであり、具体的な期待効果は何ですか？
[SCSS(SASS)+FLEX 実践レスポンシブウェブプロジェクト with Figma] 講座を通じて、SCSS(SASS)の核心理論および実務活用能力、FLEX Layoutの核心理論および実務活用能力、PC・モバイル・タブレット対応のレスポンシブレイアウト設計および制作の実力を中上級レベルまで引き上げることができます。
具体的な期待効果は、実際には人によって異なります。しかし、CodingWorksが確実にお伝えできる部分は、「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レスポンシブウェブプロジェクト講義は初中級レベルですが、中級に近いと考えていただければと思います。つまり、非常に多くの内容を扱います。初心者には負担に感じるかもしれませんが、コースを終えればパブリッシング能力がかなり成長したことを実感できると思います。
Q. コーディングワークスさんの講義の中で<モバイルウェブパブリッシングポートフォリオ with Figma>を受講したのですが？
「モバイルウェブパブリッシングポートフォリオ with Figma」講座を受講済みであれば、[セクション 1. SCSS(SASS)+FLEX レスポンシブウェブプロジェクト UIデザイン制作 with Figma デザイン]の内容を必ずしも学習する必要はありません。（可能であれば、速いスピードで作ってみることをおすすめします。）
[セクション 2. SCSS(SASS)+FLEX レスポンシブ Web プロジェクト HTML ワイヤーフレーム with Figma] から学習を始めても大丈夫です。
Q. 全体の講義時間はどのくらいですか？
全動画講義の時間は41時間以上で、深い学習のための十分な授業時間で構成されています。授業全体の比率は、Figmaデザイン作業が15％、パブリッシング作業が85％を占めています。全動画の中でセクション1はFigma UIデザイン作業であり、残りのセクションはレスポンシブWebパブリッシングの学習領域です。
Q. 受講に関する注意事項（必要な環境、その他の留意事項など）はありますか？
授業内容が多く、スピード感を持って進行します。かといって十分な説明なしに進むのではなく、詳細に説明します。しっかりついてきていただけると思います。ただし、シングルモニターで学習するよりも、デュアルモニター環境を整えることを強くお勧めします。セクション1にある「[必読] SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト Figma基礎講座(ft.デュアルモニターの使用)」の動画は、受講申請前に必ずご覧ください。
[SCSS(SASS)+FLEX 実戦レスポンシブWebプロジェクト with Figma] 講義を制作した コーディングワークスは、現在まで300名以上の国費パブリッシング課程の学生に、パブリッシングの理論、活用、個人ポートフォリオサイト制作を教えています。特にパブリッシャー就職のためのすべての準備過程をAからZまで完璧にガイドし、ほとんどの学生が課程終了後すぐに就職できるよう、長年パブリッシング講義のみを専門に行ってきた講師です。また、Inflearnでパブリッシング関連の講義を行いながら、Inflearnの受講生の皆様からも大変役に立ったという評価をいただいています。
学習を進める中で気になることがあれば、ぜひ質問してください。質問される際は、うまくいかない内容とコード、そしてブラウザの結果画面のキャプチャを添付していただく必要があります。コードについては、HTML、CSS、JSのコードをすべて載せていただければ、正確な回答を差し上げることができます。
質問文にコードがなく、文章だけで問題を説明されると、非常に簡単な内容でない限り、正確な回答を差し上げることが難しくなります。その場合、私が「HTML、CSS、JSのコードとブラウザのキャプチャをアップロードしてください〜」と再度返信せざるを得なくなり、結局、解決策を得るまでに手間と時間がかかってしまいます。
コーディングワークス・パブリッシングのYouTubeチャンネルで、理論の動画講義を並行して視聴することをお勧めします。もちろん、すべての理論動画がYouTubeチャンネルにあるわけではありませんが、重要な理論動画はほとんど揃っています。動画の数が多いので、動画を探す際は以下の例のように検索するのが良いでしょう。
コーディングワークス パブリッシング YouTubeチャンネル： https://www.youtube.com/codingworks
[HTML+CSS+JS 実戦ポートフォリオ(シーズン3)] 講座を制作した コーディングワークスは、現在まで300名以上の国費パブリッシング課程の学生に、パブリッシングの理論、活用、個人ポートフォリオホームページ制作を講義しています。特に、パブリッシャー就職のためのすべての準備過程をAからZまで完璧にガイドし、学生の大部分が課程終了後すぐに就職できるよう、数年間パブリッシング講義のみを専門的に行ってきた講師です。また、Inflearnでパブリッシング関連の講義を行いながら、受講生の皆様からも非常に役に立ったという評価をいただいています。
学習対象は
誰でしょう？
SCSS(SASS)の核心理論および実務活用能力が必要な方
体系的なレスポンシブウェブサイトのプロジェクト制作ポートフォリオが必要な方
フロントエンドエンジニアとして、コーディングの真髄を知りたい方
パブリッシャーとして最も競争力のあるレスポンシブWebプロジェクトが必要な方
SCSS(SASS)の活用能力で履歴書の競争力を高めたい方
前提知識、
必要でしょうか？
HTML+CSSの基礎以上の能力
13,082
受講生
787
受講レビュー
2,122
回答
4.9
講座評価
23
講座
■ [現在] 国費パブリッシング＆フロントエンド講師
■ [現在] フリーランス フロントエンドパブリッシャー
■ [現在] HTML+CSS+JQUERY パブリッシング YouTubeチャンネル「コーディングワークス」運営
■ グリーンコンピュータアカデミー ウェブパブリッシング講師
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ イゼンコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UX ウェブデザインポートフォリオ講義
■ ウェブデザイン技能士実技資格クラス講義
■ イージー＆エデュ フロントエンド UI/UX デザインおよびパブリッシング
🌏コーディングワークス Inflearn 講義一覧 - https://www.inflearn.com/users/@codingworks
🌏Inflearn コーディングワークス 講義学習順序（学習ロードマップ） - https://www.inflearn.com/blogs/2351
🌏コーディングワークス Inflearn パブリッシングブログ - https://www.inflearn.com/users/@codingworks/blogs
🌏コーディングワークス パブリッシング YouTube チャンネル - https://www.youtube.com/codingworks
🟣Inflearn In-focus コーディングワークス インタビューを見る : https://www.inflearn.com/pages/infocus-8-20230704
全体
125件 ∙ (41時間 14分)
講座資料（こうぎしりょう）:
全体
29件
4.9
29件の受講レビュー
受講レビュー 1
∙
平均評価 5.0
5
最高の授業……！ 今までたくさんの講義を受けてきましたが、先生のように丁寧かつ分かりやすく教えてくださる方はいなかったと思います。おかげで本当に多くのことを学ぶことができました。 受講しようか迷っている方に、本当におすすめします。基礎がなくても先生がとても優しく丁寧に説明してくださるので、絶対に後悔しないはずです。
受講の感想ありがとうございます〜！！
受講レビュー 6
∙
平均評価 5.0
5
2年前に先生の講義を受けて就職できたのですが、経営難でまた再就職の準備をすることになりました😭😭 SCSSをまだ使ったことがなかったので、勉強してみようと思って聞いています！ とても良いです！ありがとうございます！
受講レビューありがとうございます～！！
受講レビュー 3
∙
平均評価 5.0
5
インフラストラクチャで最もコスパがあると思われるインストラクターの中には、コーディングワークスがあります。最近開講されるのは最新技術なので価格帯が少しありますが、既存のコンテンツを見ると、とても安い受講料に膨大なボリュームが印象的にコーディングワークスを知り、講義を受講することになりました。オフライン学園に通ってもこのように膨大なボリュームを誇る授業密度は、閲覧するのが難しい程度で全体講義構成を見ると講義時間が40時間を超えて行くほどにディテールが肉のあるコンテンツです。しかもウェブパブリックの中高級段階最新技術を集約して実際に実習中心の授業で実際の高級技術を総網羅した結果物まで得ることができます。何より講師様の回答がすごく早いというのが印象的でした 日曜日に質問があって講座受講関連質問を2件残しましたが、その日すぐに回答が走りましたね 膨大なボリューム推奨しない理由はありません。フロント＆開発者もリアクトビューの前に正直、基本だと思うんですよ要塞業種別に境界線が崩れてマルチを求める時代なんだからこれをやり遂げる人が高額年俸の席に上がることができると少なくとも画面実装だけに自分の頭の中にいることを自分で作れなければならない方はリアクトやビュー勉強している方も、この講座は個人的に学習してみることをおすすめします。まだ頑張ったわけではありませんが、説明をとても親切にしてくださって勉強する面白いですね^^そして勉強していますが、画面実装と同じくらい専門家レベルまで自分で実力を育てようという趣旨で李講義を選びました。
具体的な受講評ありがとうございます〜！
受講レビュー 2
∙
平均評価 5.0
5
実務で受けた授業の中で一番役に立っています。 これまでどれだけ遠回りしてコーディングしてたんだと…。^^;; 瞬間瞬間、反省もたくさんしています。 本当に感謝して受講しています！！！
受講の感想ありがとうございます！！
受講レビュー 4
∙
平均評価 5.0
5
Front Web開発は初めてなので心配がたくさんありました。 講義が他の講座に比べて多少大きな違いがあります。 心配を少ししたけど(ㅎㅎㅎ) 私の選択が神の一人になりましたね。 （講義を本当に上手にします。!!） Web開発経験が1もありません。 開発されたメインプログラムをWeb/モバイルでサービスしなければならないという考えに 事前準備と勉強をしなければならない、講義申請して休暇を1週間程度 出してチョン～走行しました。 4日目になった日～土出せようとしましたね。 とにかく5日目、すべての講義を終えて ASP.Net Core 7 Razor page でいくつかテストしてみました。 (Udemy サイトの ASP.NET Core Web Application Using Razor Pages 15,000ウォン講義を聞いてから〜ㅎㅎ） テストした結果がDBとうまく連動して表現がうまくいくことに とても喜んで新世界を経験しました。 過去のコボル、Fortranで始まり、現在はC＃、VB.NETなどいくつか 開発ツールでデスクトップ実務を開発した旧式（？）技術で 果たして、私は現在のトレントに合った開発環境に適応できますか？したかったのに… 詳細な説明に簡単に理解できました。 おかげで大きな力になって勇気ができました。 SCSS / ピグマ（有料決済） / Jクエリ / HTML 上記4つの項目とサンプル例講座だけでもレベルアップ！ これまでPhotoshopを20年近く使っていましたが、おかげでPhotoshop 使うことがほとんどないようですね。 ㅎㅎ 死族が長かったですね。 長い講義を100％終えたのは初めてだから… 素晴らしい先生の講義に感謝します。 いつも元気です～祈ります。
実務者として具体的な内容なので、予備受講生に助けがたくさんありそうです。受講評ありがとうございます〜！
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
￥15,108
![Bootstrap を活用したレスポンシブ Web 制作 [基本概念編] ブートキャンプ講義サムネイル](https://cdn.inflearn.com/public/courses/333092/cover/5a3043a4-fc2d-4b25-9096-306c8f707b5b/333092.jpg?w=420)
![ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)講義サムネイル](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?w=420)
