강의

멘토링

커뮤니티

NEW
Programming

/

Front-end

物語で学ぶCSS

HTMLで作ったカフェホームページをCSSで美しく装飾する実戦プロジェクト講義です。 色彩、レイアウト、タイポグラフィからFlexbox、Grid、アニメーション、レスポンシブデザインまでCSSのすべての基礎をミンジとコード先生のストーリーを追いながら自然に学ぶことができます。 4時間の学習で初心者もプロフェッショナルなWebデザインを完成させることができます。

2名 が受講中です。

  • sarc
css기초
웹디자인입문
프로젝트기반학습
스토리텔링강의
반응형디자인
css
Responsive Web
Flex
css-grids
Web Design

受講後に得られること

  • CSSの全ての基本属性を実戦プロジェクトを通じて体得することができます

  • 色彩、レイアウト、タイポグラフィなど、デザインの基礎を理解することができます

  • HTMLで作ったカフェホームページを実際に美しく飾ることができます

  • レスポンシブウェブデザインの基礎を実習を通じて学ぶことができます

  • 現代的なWebデザイントレンドを適用できる実力を身につけることができます

ストーリーで学ぶCSS - ミンジのカフェホームページデザイン

HTMLで作ったカフェホームページをCSSで美しく装飾する実戦プロジェクト講義です。

色、レイアウト、タイポグラフィからFlexbox、Grid、アニメーション、レスポンシブデザインまで

CSSの全ての基礎をミンジとコード先生のストーリーを追いながら自然に学ぶことができます!


✨ この講義の特別な点

🎭 ストーリーテリング学習

民智とコード先生の物語を追いながら自然にCSSを学びます。単純な暗記ではなく文脈の中で理解する学習!

🏗️ 実戦プロジェクト

コードブルーカフェのホームページを最初から最後まで完成させます。学んだ内容をすぐに適用しながらポートフォリオ完成!

📱 レスポンシブデザイン

モバイルからデスクトップまで、すべてのデバイスで完璧に表示されるウェブサイトを作ります。実務必須スキル習得!

ストーリーだけでなく、理論学習に関する予想質問と回答、コード先生のお得な情報もご覧ください

ミニクイズや学習まとめも体系的に整理されています

🎓 何を学びますか?

Section 1: CSSを始める

  • ✅ CSS接続方法とセレクター

  • ✅ 色と背景のスタイリング

  • ✅ フォントとテキストの装飾

Section 2: ボックスモデルとレイアウト

  • ✅ ボックスモデルの完全理解

  • ✅ 余白とサイズ調整

  • ✅ 要素配置の基礎

Section 3: モダンレイアウト

  • ✅ Flexboxをマスターする

  • ✅ CSS Gridでギャラリーを作る

  • ✅ プロフェッショナルなレイアウト構成

Section 4: インタラクションとアニメーション

  • ✅ ホバー効果と状態変化

  • ✅ CSSアニメーション

  • ✅ スムーズなトランジション効果

Section 5: レスポンシブデザイン

  • ✅ メディアクエリの活用

  • ✅ モバイル最適化

  • ✅ クロスブラウザ対応


🎯 学習後の期待効果

学ぶことになるもの

CSSの全ての基本属性を実戦プロジェクトを通じて体得

色彩、レイアウト、タイポグラフィなどデザインの基礎理解

HTMLで作ったカフェホームページを実際に美しく装飾する

レスポンシブWebデザインの基礎を実習を通じて習得

現代的なWebデザイントレンドを適用できる実力

完成後にできること

🚀 ポートフォリオに追加できる完成度の高いプロジェクト

🚀 様々な業種のホームページを直接デザイン

🚀 GitHub Pagesでデプロイして実際のWebサイト運営

🚀 次のステップ(JavaScript)学習のための確固たる基礎

📋 前提知識


こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTMLの基礎を学んだが、デザインは難しく感じている初心者

  • コードで美しいウェブサイトを作りたい方

  • シンプルなHTMLページをプロフェッショナルに作りたい方

  • ウェブデザインの基礎を学びたい方

  • カフェ、レストラン、小規模事業のホームページを美しく飾りたい社長様

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

  • HTMLの基礎知識が必要です!HTMLタグの基本構造を知っている必要があります。「物語で学ぶHTML」講義を先に受講するか、最低限div、h1、p、a、imgなどの基本タグを知っていれば十分です。

こんにちは
です。

129

受講生

11

受講レビュー

3

回答

3.8

講座評価

5

講座

안녕하세요. 소셜아카이브 입니다.

소셜 아카이브에서는 '장기 보존의 가치를 지닌 고품질 자료들의 보관소'를 운영하며, 여러분의 업무 방식을 혁신할 세 가지 역할을 수행합니다.

  1. [소프트웨어 엔지니어]카카오 엔터프라이즈에서 백엔드 API를 개발하며 업무 시스템의 근본적인 효율화를 고민했습니다. 이 경험이 AI 자동화 프로세스를 가장 견고하게 설계하는 기반이 됩니다.

  2. [AI 파일럿] 저는 GPT와 AI 툴을 활용하여 실무에서 가장 빠르고 정확한 성과를 도출하는 선행 사용자입니다. 검증된 노하우만을 선별하여 여러분에게 최적의 비행 경로를 제시합니다.

  3. [전문 강사]KB국민은행 IT 아카데미구름에듀의 주강사로서, 복잡한 기술을 실무에 바로 적용 가능한 쉬운 지식으로 풀어내는 전달력을 갖추었습니다.

이 강의는 세 가지 페르소나의 최고 역량이 집약된 고품질의 업무 혁신 자료입니다. 저와 함께 AI를 단순한 도구가 아닌, 미래의 핵심 자산으로 만들어 갑시다.

カリキュラム

全体

15件 ∙ (3時間 51分)

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

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

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

期間限定セール、あと2日日で終了

¥13,860

30%

¥2,467

sarcの他の講座

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

似ている講座

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