🎯 初心者から始める本格的なWeb開発

20週間でプロレベル
HTML/CSSをマスター

体系的なカリキュラムで、基礎から実践まで段階的に学習。
最終的には実際にWebサイトを公開できるスキルが身につきます。

20
週間カリキュラム
6
章構成
60-80
総学習時間

学習の特徴

このカリキュラムが選ばれる理由

🎯

段階的な学習設計

基礎から応用まで無理のない進行で、確実にスキルアップできます。

💻

実践重視

各章で実際のプロジェクトを制作し、手を動かして学びます。

📱

現代的な技術

CSS Grid、Flexbox、CSS変数など最新技術を習得できます。

🌟

品質重視

アクセシビリティ、パフォーマンス、SEOまで考慮した開発を学習。

カリキュラム

20週間の詳細な学習プラン

01

基礎の基礎

3週間

Web開発の環境を整えて、基本的なページを作れるようになる

開発環境構築 HTML/CSS基本 デベロッパーツール 自己紹介ページ
詳細を見る →
02

見た目を整える技術

4週間

あらゆる画面サイズに対応した美しいWebサイトを作れるようになる

ボックスモデル レスポンシブデザイン タイポグラフィ Flexbox
詳細を見る →
03

本格的なレイアウト

4週間

プロレベルのWebサイトレイアウトを自由自在に作れるようになる

CSS Grid ナビゲーション フォーム UI/UXパターン
詳細を見る →
04

効率化と応用

4週間

保守性が高く、モダンな技術を使ったプロフェッショナルサイトを作る

CSS変数 clamp()関数 アニメーション ポートフォリオ制作
詳細を見る →
05

実践とトラブル解決

2週間

実際の開発で必要なスキルを身につけ、Webサイトを公開する

デバッグ技術 パフォーマンス最適化 Webサイト公開 継続学習
詳細を見る →
06

Studio.designの理解と活用

3週間

Studio.designを使ったWebデザインツールの使い方を学び、効率的なデザインワークフローとプロトタイピングの方法を習得

UI/UXデザイン プロトタイピング デザインシステム チーム連携
詳細を見る →

学習デモ

各章で学ぶ内容を実際に体験してみましょう

基礎HTML/CSS

シンプルなWebページ

第1章:基礎の基礎

HTML/CSSの基本構造とスタイリングを学習

デモを見る

レスポンシブカード

画面サイズに対応

第2章:レスポンシブデザイン

あらゆる画面サイズに対応したデザインを実装

デモを見る
1
2
3
4

第3章:CSS Grid

高度なグリッドレイアウトシステムをマスター

デモを見る
🎨

第4章:アニメーション

美しいアニメーションとエフェクトを実装

デモを見る

今すぐ学習を始めましょう

20週間で、あなたもプロレベルのWeb開発者になれます。
段階的なカリキュラムで、確実にスキルアップしていきましょう。

📖

第1章から開始

基礎からしっかりと学習したい方におすすめ

第1章を始める
🔍

レベルチェック

現在のスキルレベルを確認してから開始

レベルチェック
📋

全体概要

カリキュラム全体を詳しく確認したい方

詳細概要