강의

멘토링

커뮤니티

Programming

/

Front-end

物語で学ぶCSS

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

5名 が受講中です。

難易度 入門

受講期間 無制限

  • sarc
css
css
Responsive Web
Responsive Web
Flex
Flex
css-grids
css-grids
Web Design
Web Design
css
css
Responsive Web
Responsive Web
Flex
Flex
css-grids
css-grids
Web Design
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などの基本タグを知っていれば十分です。

こんにちは
です。

161

受講生

12

受講レビュー

3

回答

3.9

講座評価

5

講座

こんにちは。ソーシャルアーカイブです。

ソーシャルアーカイブでは、「長期保存の価値を持つ高品質な資料の保管庫」を運営しており、皆様の働き方を革新する3つの役割を担っています。

  1. [ソフトウェアエンジニア]カカオエンタープライズでバックエンドAPIを開発し、業務システムの根本的な効率化を追求してきました。この経験が、AI自動化プロセスを最も堅牢に設計する基盤となっています。

  2. [AIパイロット] 私はGPTとAIツールを活用し、実務で最も速く正確な成果を導き出す先行ユーザーです。検証済みのノウハウだけを厳選し、皆様に最適な飛行ルートを提示します。

  3. [専門講師]KB国民銀行 ITアカデミーGOORM EDUのメイン講師として、複雑な技術を実務にすぐ適用できる分かりやすい知識へと解きほぐす伝達力を備えています。

この講義は、3つのペルソナの最高の能力を凝縮した高品質な業務革新資料です。私と一緒に、AIを単なるツールではなく、未来の核心資産へと変えていきましょう。

カリキュラム

全体

15件 ∙ (3時間 51分)

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

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

受講レビュー

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

¥2,441

sarcの他の講座

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

似ている講座

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