
コーディングは初めてなので with ウェブパブリッシング - CSS
ezweb
CSSの基礎からアニメーション、レスポンシブまで学習します。 実践的な例題を通じて学習内容を復習しながら、確実に基礎を固めます。
入門
HTML/CSS
パブリッシャーのためのReact第一歩! 基礎文法からレスポンシブ対応のショッピングモールサイトの制作・デプロイまで、一度に学習します。 断片的なReactの例題をまとめるのではなく、実際のウェブページ制作に必要な核心的な文法を学び、適用します。
受講生 21名
難易度 初級
受講期間 無制限


Reactの核心概念(コンポーネント、Props、State、イベント)の確実な理解
カードリスト中心のショッピングモールウェブサイト完成
JSON APIデータ連携の経験およびContext APIの基礎習得
完成したプロジェクトをVercelにデプロイして、実際のサービスURLを取得する
カテゴリー、ブランド、価格帯フィルタリング
ページネーション
チャンネル登録&高評価&コメントイベント
簡単なミッションを完了して、50%割引クーポンを今すぐ手に入れましょう。期間限定で提供される過去最大級の特典を、今すぐ掴んでください!
イベントに参加する:https://forms.gle/wcD2wRVeaG7B7fSj7
パブリッシャーに優しい説明: 従来のHTML・CSSの考え方から自然にReactの概念を連結
実践プロジェクト中心:ショッピングモールのUIを直接作りながらReactを習得
ポートフォリオの完成: 就職活動にそのまま活用できる成果物を提供
ショッピングモールのデザイン例
Reactを学ぶ理由と学習準備環境を理解する。
パブリッシャーの視点からReactが必要な理由を明確に把握する。
主な内容
Reactの学習目的、開発ツールの準備、パブリッシャー → フロントエンド転換の観点
React開発のための核心的な文法と概念を学習する。
コンポーネントベースの考え方に慣れることを目標とする。
主な内容
Vite + React 環境設定、JSX 文法、コンポーネント構造、Props、State、イベント処理
パブリッシャーが実務で頻繁に使用するレンダリングパターンを中心に学習します。
HTML/CSSの経験をReactに自然に繋げます。
主な内容
条件付きレン더링、リストレンダリング(map)、keyの概念、CSS適用方式(CSS Moduleなど)
Reactの基本を実際のUI実装に適用する。
ショッピングモールの構造を通じて、実務の流れを経験する。
主な内容
Header/GNB構成、商品カードリスト、カートボタン、カテゴリーフィルタリング、レスポンシブUI
Vercelを利用したデプロイ体験
完成したプロジェクトを基準に学習内容を整理する。
その後、フロントエンドの学習の方向性を提示する。
核心内容
プロジェクトレビュー、コード整理のポイント、フロントエンド拡張ロードマップの案内
カードリスト中心のショッピングモールウェブサイト
レスポンシブ対応 (PC / Mobile)
ショッピングカートボタン、カテゴリーフィルター機能の実装
API連携で実際のデータを読み込む
デプロイ済みのポートフォリオプロジェクト
最終配布版プレビュー:https://ez-shop-three.vercel.app/
HTML / CSS / JavaScript 基礎
Node.js & VS Code のインストール
GitHubアカウント(配信用)
単にReactの文法だけを学習するのではなく、実際のプロジェクトのようにウェブサイトのメインページをすべて実装します。プロジェクトを実装しながら、デザインを参照してプロジェクト実装に必要なHTML構造を作成するノウハウ、デザインと一致するようにCSSを作成するスタイリングのノウハウ、機能に応じてスクリプトを作成するノウハウを学習する順序で進めます。
デザインを参照してプロジェクトを実装します。
Reactを活用してプロジェクトを生成し、HTML、CSS、React(JavaScript)を活用してプロジェクトを実装します。
vs-code 開発
React基礎パートで学習した内容をもとに商品情報を照会し、リストレンダリング(map)を通じて商品を出力します。出力された商品リストから、条件に応じてfiltering、sortingを実装します。
フィルタリング、ソート
出力された商品リストから条件に応じて指定された商品を表示し、ボタンをクリックすると該当ページの商品を表示します。
ページネーション
メディアクエリを活用して、様々なデバイス機器に合わせて商品の表示数を調整します。
レスポンシブ
A. 基本的な文法(if、for、関数、配列、オブジェクト)に対する理解は必要です。
ただし、高度な文法やアルゴリズムレベルは要求されず、Reactの学習に不可欠なJavaScriptの概念を中心に説明する予定です。
以下の講義で基礎を学習してください。
はい、十分に役に立ちます。
本講義はHTML/CSS中心のパブリッシャーの視点からReactを理解できるように設計されており、フロントエンドエンジニアへと領域を広げるための良い出発点になります。
全く問題ありません。
Classコンポーネントは扱わず、関数型コンポーネントとuseState、useEffectなどの必須Hookを段階的に説明する予定です。
デザインを提供するため、準備するソースはありません。
講義で提供される例題と構造を基に進められ、UIの実装とReact文法の理解に集中できるように構成されています。
はい、活用可能です。
ショッピングモールミニプロジェクトは、コンポーネントの分離、状態管理、デプロイプロセスまで含まれており、ポートフォリオ用の例として使用するのに適しています。
はい、扱います。
Vercelを活用してReactプロジェクトをデプロイする過程までご案内し、実際のサービスデプロイの流れを体験していただけます。
Next.js、TypeScript、状態管理ライブラリ(Zustand、Redux)、API連携の順に学習することをお勧めします。
講義の最後のパートで、フロントエンドの学習ロードマップも併せてご案内する予定です。
学習対象は
誰でしょう?
HTML/CSS/JSまでは学んだが、Reactには馴染みがないパブリッシャー
ポートフォリオにReactベースのプロジェクトを追加したい方
フロントエンドへのキャリア拡張を準備しているウェブデザイナー・ウェブパブリッシャー
前提知識、
必要でしょうか?
HTML / CSS / JavaScript 基礎
Node.js & VS Code のインストール
GitHubアカウント(配信用)
キャリア認証
2,925
受講生
72
受講レビュー
4
回答
4.9
講座評価
14
講座
■ [現在] ESTSOFT KDT フロントエンド講師
■ グリーンコンピュータアート学院 ウェブパブリッシング、フロントエンド講師
■ ウェブパブリッシングYouTubeチャンネル「Rock's Easyweb」運営
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ ハンビッコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UXウェブデザインポートフォリオ講義
[ 書籍 ]
2021.07.19 刊行 / ウェブデザイン&ウェブパブリッシングのためのFigma完璧活用書 / BJ Public
2022.08.25 出版 / コーディングは初めて with ウェブパブリッシング / ヨンジン出版社
2023.10 出刊 /2024 SDエデュ ユ・ソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画
2024.11 重版 /2025 SDエデュ ユーソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画
2025.11 重版 /2026 SDエデュ ユ先生のウェブデザイン技能士実技家庭教師ノート / 時代考試企画
[ 受賞歴 ]
2022.08 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2021.06 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2018.06 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2017.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2016.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2015.10 グリーンコンピュータアカデミー 新村支店 - 優秀講師
全体
33件 ∙ (9時間 28分)
講座資料(こうぎしりょう):
全体
2件
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!