Claude Code 完全マスター:AI開発ワークフローの基礎から実践まで
gymcoding
探索 → 計画 → 実装 → コミット。検証済みのAI開発ワークフローをClaude Codeでマスターしましょう。 MCP、サブエージェント、プロンプトエンジニアリングまで、23のミッションで学び、3つの実践プロジェクトを完成させます。
入門
React, AI, claude
HTML&CSS、JavaScript を学んだら、それらを利用して自分でポートフォリオ サイトを作成し、公開してみましょう。実際に使ってみると、私たちのスキルを向上させるのに大いに役立ちます。
受講生 227名
難易度 入門
受講期間 無制限


学習した受講者のレビュー
5.0
상은쓰
コリンですが、講義で壁が感じられます。 Wan.Wall 受講前に完成したサイトを見て、これをどのように作りたいと思いました。しかし、頑強な今はどんなサイトでも作れるという自信ができました。 (もちろん時間は少しかかりますが!) なぜなら、講義で大きな問題を小さな問題に分けて一つずつ解決する方法を教えてくれるからです。このような過程で自信がますます大きくなっていき、今はどんなサイトでも作れると思います。講師の体系的な説明と実習を通じて、複雑な問題もじっくり解決していくことができることを学びました。 もともとレビュー長くうまくいかないのに受講評があまりなくて悩んでいる方がいるようで、すっかり長く残してみました。 もう夏だから蚊も多いけど、講義を聞きながら感動の拍手をして蚊を捕まえる準備をしましょう
5.0
JD
プロジェクト進行中に画面配置で難しさを感じていた時、まさに求めていた講座で、求めていた内容を素早く学習することができました! 講座内容も充実していて、とても助かりました! 今後も良い講座をたくさんお願いいたします。 ありがとうございました。
5.0
강유정
急ぎでホームページを作る必要があったので購入しました。 順番通りに作れば良いので便利です。 グッド!!!!!!!
Web ページを HTML 構造に分割して考える方法
HTML 要素を左右または中央に配置して整列する方法
クラス名付け規則、CSS初期化、CSS変数の実用的な使用方法
メディア クエリを使用してレスポンシブ Web を作成する方法
SEO、SNS 共有プレビュー、Github Pages の公開方法
こんにちは!今回の講義はポートフォリオサイトを作る講義です。
HTML構造を効果的に分割する方法を学びます!
CSSを活用して、要素を左右に中央に配置して配置する方法を学びます。
CSS変数、レスポンシブWeb、ライブラリなどの実務における活用方法について詳しく説明します!
アニメーション、タイピング効果などライブラリを活用した様々な結果物を作ることができます。
モバイル、タブレット、デスクトップなど、さまざまな画面に最適化されたレスポンシブWebを作成できます。

OG Tagを活用してカカオトークなどSNS共有プレビューを作成できます。
Github Pagesを活用して、私たちが作るホームページを本当に簡単に配布できます。
HTML構造をどのように分割するかを具体的に練習します。
CSS Position、Flexbox、Gridを活用して要素をどのように配置するかを具体的に練習します。
HTML&CSS、JavaScriptの基礎を身につけたら、今、ちゃんと活用する方法を実習する番です。
開発環境の設定
本格的な授業のための開発環境、プロジェクト生成、フォント、アイコンの設定を一緒にします。
HTMLマークアップ
難しいWebページでも構造を細かく分けて考えると簡単に解決できます。
CSS Style
受講生が主に困難な部分は、HTML要素を配置してソートすることです。
レスポンシブウェブ
Breakpointの概念から始めて、モバイル、タブレット、デスクトップ用に最適化された画面を整理する方法まで詳しく学びます。
JavaScript&ライブラリの活用
さまざまなライブラリを活用して、アニメーション、テキストタイピングなど素晴らしい効果を適用したホームページを作ってみます。
SEO、SNS共有プレビュー、配信
検索エンジン最適化(SEO)でOGタグを使用してSNSで共有するときにプレビューを設定する方法を学び、ホームページを直接展開するためにGithub Pagesを利用します。
こんにちは🙂 「ポートフォリオサイト作り、配布まで」講義受講後期イベントを進めています。
該当講義を受講してから丁寧に受講後期を作成していただくと、講義クーポン1個をいたします。
(先着順20名、申請リンクはカリキュラムに含まれています)
学習対象は
誰でしょう?
HTML 要素の配置と整列に困っている方!
自分だけのホームページを作りたい方!
HTML、CSS、JSまで学んだが、活用方法がよくわからない方!
前提知識、
必要でしょうか?
HTML
CSS
インフラン認証
キャリア認証
36,925
受講生
2,911
受講レビュー
1,682
回答
4.9
講座評価
18
講座
非開発者の方でもついてこられるよう、最大限分かりやすく、そして実務者の方も満足できるよう深く教えます。
現在13年目のフルスタックエンジニアであり、ITスタートアップを自ら運営している代表です。
KT・起亜などの大企業サービス開発、Cafe24のEコマースプラットフォーム、スマートシティIoTデータプラットフォーム、
そして直接運営中の自社サービスまで、フロントエンド・バックエンド・AWSインフラをすべて直接設計し、構築してきました。
現在は教育に集中しながらも、自社サービスを直接開発することで現場の感覚を維持しています。
その現場での経験を、初心者でも理解できる言葉で解き明かすこと、それが私の講義で行っていることです。
🥇 インフラン 2026 クロード・コード 講義 BEST 1 - クロード・コード完璧マスター
🏆 インフラン Awards 2025 ベストセラー - React完璧マスター
🔥 インフラン 2025 '今最もHOTな講義' - Claude Code 完璧マスター
🎬 YouTube チャンネル登録者数 4.9万人以上 · 累計再生回数 360万回以上
13年目のフルスタックエンジニア・現職ITスタートアップ代表
フロントエンド: React · Vue · TypeScript
バックエンド: Node.js · Java · Spring · Python
インフラ: AWS · Serverless · Lambda アーキテクチャ設計
Inflearnナレッジ共有者
特許・商標の出願・登録経験
政府の創業支援事業に多数選定(スマートベンチャーキャンパス「最優秀」など)
マルチキャンパス - 企業実務者向け 'Claude Code' オフライン教育
新韓カード開発者教育 - マルチキャンパス主管、オンラインライブ
韓国ソフトウェア人材開発院 特講 ・ 官公庁 IT メンター
💻YouTube - 無料講義
💻ジムコーディングクラブ - 全講義 & 無料教材
🐙GitHub - サンプルソースコード
📸インスタグラム - 日常 & 役立つ情報
🧵スレッズ - 開発インサイト
🏢 企業のお問い合わせ - biz@gymcoding.co
💬 一般的なお問い合わせ - hello@gymcoding.co
全体
36件 ∙ (4時間 30分)
1. 講義紹介
00:56
2. オリエンテーション
05:49
4. 開発環境構築
05:14
6. プロジェクト構造
05:19
8. 全体構造マークアップ
04:30
9. ヘッダー マークアップ
05:19
11. マークアップについて
03:21
12. Skills マークアップ
09:19
13. 作業マークアップ
06:16
14. Contact マークアップ
02:43
15. フッター マークアップ
02:34
全体
30件
5.0
30件の受講レビュー
受講レビュー 3
∙
平均評価 5.0
受講レビュー 2
∙
平均評価 5.0
5
急ぎでホームページを作る必要があったので購入しました。 順番通りに作れば良いので便利です。 グッド!!!!!!!
こんにちは!貴重なレビューをいただき、本当にありがとうございます。😊 急ぎでホームページを作成される状況で、当講座がお役に立てたようで何よりです! もし進める上で追加のご質問や難しい部分がありましたら、いつでもご質問ください。 今後もより良い講座でお返しできるよう努めます。 ありがとうございます!👍
受講レビュー 14
∙
平均評価 5.0
5
プロジェクト進行中に画面配置で難しさを感じていた時、まさに求めていた講座で、求めていた内容を素早く学習することができました! 講座内容も充実していて、とても助かりました! 今後も良い講座をたくさんお願いいたします。 ありがとうございました。
こんにちは!貴重なレビュー、本当にありがとうございます~!🎉 プロジェクト進行中に画面配置で苦労されていたとのこと、弊社の講義がまさに望んでいた内容だったとのこと、本当に良かったです! 素早く学習できるよう構成した甲斐がありました。これでポートフォリオサイトまで完成されたとのこと、実力も一段とアップグレードされたことでしょう!💻 今後も実務に役立つ良い講義を提供してまいります。最後までご受講いただき、心より感謝申し上げます!🚀 ありがとうございます!
受講レビュー 7
∙
平均評価 5.0
5
コリンですが、講義で壁が感じられます。 Wan.Wall 受講前に完成したサイトを見て、これをどのように作りたいと思いました。しかし、頑強な今はどんなサイトでも作れるという自信ができました。 (もちろん時間は少しかかりますが!) なぜなら、講義で大きな問題を小さな問題に分けて一つずつ解決する方法を教えてくれるからです。このような過程で自信がますます大きくなっていき、今はどんなサイトでも作れると思います。講師の体系的な説明と実習を通じて、複雑な問題もじっくり解決していくことができることを学びました。 もともとレビュー長くうまくいかないのに受講評があまりなくて悩んでいる方がいるようで、すっかり長く残してみました。 もう夏だから蚊も多いけど、講義を聞きながら感動の拍手をして蚊を捕まえる準備をしましょう
うわー! 👏👏👏👏👏 受講評を読みながら私も知らずに口が耳にかかりましたね😁 その講義では、小さくはポートフォリオというサイトを作ることだが、 大きくは、これから始める方々に大きな問題を小さく分けて一つずつ解決していく方法とこれを解決し、"自分でできる力"を乗せてあげることが目的がありました。 知っておきましょう。 ありがとうございます。言語化法も優れていてどんなポジションでも上手くいくんです。おやすみなさい👍
受講レビュー 3
∙
平均評価 5.0
5
あ…全部珠玉の講義ばかりですね。 割引パッケージがあることを早く知っていれば、それを聞いたのに。 Reactから始めて全過程を逆走中です。 本当に講義に最適化されていますね。 皆さん、私のように一つずつ聞かずにパッケージで聞いてください!
こんにちは、2回目の受講レビューまで残していただき、本当にありがとうございます! 「珠玉のような講義」という表現に大きな力をいただいております。Reactからスタートして、全過程を逆走中とのこと、その情熱に本当に感動しています!🥹 学習順序が違っても、結局すべての講義がつながっているので、どんな順序で聞いてもプログラミング能力は必ず向上するはずです 🙂 今後もより良いコンテンツでお応えできるよう、最善を尽くします。情熱的な学習の旅を応援しています! (近いうちに「最新Next.js完全マスター:Notionベースの開発者ブログ作成(with Cursor AI)」の講義をリリースする予定です 😀)
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
期間限定セール、あと7日日で終了
¥61,600
30%
¥11,360