Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Development

Learning CSS3 by Picking Out the Essentials

CSS3 is essential for frontend beginners!! Let's thoroughly explore CSS3 from basic to advanced!

  • sucoding
실습 중심
HTML/CSS

学習した受講者のレビュー

こんなことが学べます

  • CSS3 Basic Syntax and Selectors

  • Understanding the Box Model (Margin, Padding, Border, Content Area)

  • Layout techniques (Flexbox, Grid)

  • Color, background, gradient effect

  • Font styling (Google Fonts, text effects)

  • CSS3 Transitions and Animations

  • CSS3 Responsive Web Design (Using Media Queries)

  • Variable fonts, how to use viewport units (vw, vh, etc.)

  • User interface styling (buttons, input forms, dropdowns, etc.)

  • New features in CSS3 (dark mode support, clip-path, etc.)

  • Accessibility-conscious styling (adjustments for the visually impaired, etc.)

  • Approaching Mobile-First Design with CSS3

  • Practical CSS3-based project practice (e.g., navigation bar, card layout, etc.)

非専攻者もわかりやすいCSS3!
🛩スコーディングのフロントエンドロードマップシリーズ2段階! 🛩

HTML/CSS/JS入門分野のベストセラー

スコーディングオンライン講義が本でも出版されました!

2022 『コーディング自律学習 HTML+CSS+JavaScript』出版! 🎉

スコーディングオンライン講義が本としても発売されました。
発売以来一度も1位から降りてきたことがないほどHTML/CSS入門分野のベストセラーです。 😎
本と一緒に見ると、相乗効果が数倍になります。

購入する

気になる

何を学びますか?

CSS3にはさまざまな属性と機能が含まれており、デザインを自由に表現できます。
しかし、すべての属性をすべて学び、それぞれの機能を完璧に習得するのは容易ではありません。

このレッスンでは、実務でよく使用されるコアCSS3属性のみを厳選して学習します。
複雑または使用頻度の低い内容は大胆に減り、
レイアウト構成、色とフォントのスタイリング、レスポンシブデザインなど
実際のプロジェクトにすぐに活用できる内容に集中しました。

これにより、初心者でもCSS3の核心を簡単かつ効率的に学ぶことができ、
実務ですぐに適用可能なデザインスキルを自然に身につけるようになります。

完全初心者でも大丈夫です、

基礎からじっくりとみんなお知らせします。

CSS3はフロントエンドで学ぶ技術の中で最も直感的ですが、
Webのデザインとユーザーエクスペリエンスを決定する重要な要素です。

何も知らない非専攻者でも心配しないでください。
基礎からしっかりと積み重ねられるよう、
丁寧で親切に一つ一つ説明します。

初めて始める人も自信を持って学べるように
簡単な例と実践で一緒にしましょう! 🚀

スコーディング講義だけ
特別なポイント

実務に最適化されたコア中心カリキュラム

  • 複雑な理論は最小限に抑えられ、実際のプロジェクトで頻繁に使用されるCSS3属性のみが厳選されました。

  • レイアウト、アニメーション、レスポンシブデザインなど、すぐに適用可能な実務スキルを学ぶことができます。

理解を助ける直感的な説明と実践中心の講義

  • 初心者でも簡単に理解できるように、概念→例→実習で段階的な学習を提供します。

  • 単純なコード暗記ではなく、直接手でコーディングし、習得する実践中心の講義です。

実際のプロジェクトベースのカリキュラム

  • 単なる理論ではなく、実際のWebページとアプリUIを制作するプロジェクトを通じて学ぶ講義です。

  • 実務と同様の状況を経験し、問題解決能力まで育てることができます。

実務のヒントと開発者のノウハウ惜しみなく公開

  • 教科書にない現業開発者だけの実戦のヒント業務効率を高める方法までお知らせします。

  • CSS3だけでなく、フロントエンド開発者として成長するための方向性も提示します。

受講生のカスタムフィードバックと入念なQ&Aサポート

  • 受講生の質問に対する迅速でフレンドリーなフィードバックを提供します。

  • よくあるミスや混乱する部分をつかみ、個々の学習効果を最大化します。

ちょっと待ってください!

講義にも私と合う「決」があることをご存知ですか?

誰にも認められる大作ゲームが私には面白くないように
講義も皆に同じように合うわけではありません。

いくら賞賛が自らの講義でも私と合わないことができ
逆に、誰かに普通の講義が私にとって最高の講義になることができます。

だから私のすべての講義は少なくとも10%以上無料で公開されています。
直接聞いて、私とスタイルの「結」が合っていることを確認してみてください!

もし私と結ばれたら、
フロントエンド開発者への最速の近道をご案内いたします。
信じてフォローしてください! 🚀

この講義で作る
様々な
ミニプロジェクト

Basic Practice
忠実な基礎実習

このレッスンでは、学習の進捗状況に合った基礎実習を通じてCSS3を体系的に学びます。

忠実な基礎実習を通じてCSS3の基本概念から始まり、各属性と機能を実習を通じて身につけるようになります。実習は段階的に進められ、各概念を自然に習得し、効率的に学習するのに役立ちます。

各練習はCSS3の重要な属性をカバーし、スタイリング、レイアウト構成、レスポンシブWebデザインなど、基本から高度まで実践能力を高めることができます。

基礎からしっかり固めていき、CSS3の核心技術を身につける旅を一緒にします!

Layout
シンプルギャラリー

このレッスンでは、レイアウトの設計方法を学び、シンプルなギャラリーページを作成します。

まず、 FlexboxCSS Gridを活用してさまざまなレイアウト設計手法を習得します。これにより、ギャラリー項目を並べ替え間隔、余白、並べ替えを制御する方法を学ぶことができます。

ギャラリーページをデザインしながらレスポンシブデザインを適用し、さまざまな画面サイズで見栄えの良いレイアウトを実装し、各画像にホバー効果とアニメーションを追加してより鮮やかなページを作成します。

最後に、本番スタイリングを通じて微調整を行い、デザインの精度を高め、実務でも活用できる高度なCSS技術を学びます。

この講義を通じて、実用的でスタイリッシュなギャラリーページを作成し、レイアウト設計能力をさらに強化することができます。

レスポンシブ
Works Together

このレッスンでは、基本に忠実なHTML5マークアップCSS3の適用、およびメディアクエリを使用したレスポンシブデザインまで、完全に学ぶことができる練習を行います。

まず、 HTML5マークアップの基礎を切り、それに基づいてCSS3を適用してスタイリングを開始します。その後、メディアクエリを活用してレスポンシブWebデザインを実装し、さまざまな画面サイズに適応できるページを作成します。

この練習によりレスポンシブWebを作成するために必要なスキルを一度に学ぶことができます。

transition
トランジションマスター

この講義では、トランジションを単に理論だけで学ぶのではなく、しっかりとした実習を通じてマスターします。

トランジションは、要素の状態変化に滑らかなアニメーション効果を追加する強力なCSSプロパティです。このレッスンでは、トランジションの基本原理から始めて、さまざまなトランジション属性を適用して効果的にデザインを変換する方法を学びます。

練習では、色、サイズ、位置の変化などをカバーし、さまざまなトランジション効果を作成し、それをWebページのデザインに適用する能力を高めることができます。

このコースでは、トランジションを活用したユーザーエクスペリエンスの向上を学び、インタラクティブなWebページを作成できるようになります。

Grid
Grid Layout Card

このレッスンでは、グリッドレイアウト(Grid Layout)を学び、カード形式のUIを作成します。

まず、 CSS Gridの基本概念と属性を習得し、それを活用してさまざまなレイアウトを効率的に構成する方法を学びます。その後、カード形式のUIを実装して実際のWebページデザインに適用する方法を学びます。

練習を通じて、カードレイアウト整列、サイズ調整、間隔設定などを自由に扱い、レスポンシブグリッドでさまざまな画面サイズに対応するUIを設計します。

このレッスンでは、 CSS Gridの実用的な活用方法を習得し、きれいで効率的なカード型UIデザインを自信を持って作成できます。

Final Project 1
ススタグラム

このプロジェクトでは、インスタグラムと同じ形式のメイン画面クローンコーディングしながら、レイアウト設計のさまざまな方法を体系的に学びます。

HTML5マークアップCSS3スタイリングを活用して、実際のサービスと同様のレイアウトを実装します。主な内容は、ヘッダー、フィード、サイドバーなどに分割してページを整理し、レスポンシブWebデザインを介してモバイルとデスクトップの両方でよく見えるページを作成します。

この演習では、複雑なレイアウトを体系的に整理する方法と、実際のWebページデザインに必要なレスポンシブテクニックを学びます。プロジェクトを完成させ、実務経験を積むことができ、自分のポートフォリオに追加できる素晴らしい結果を得ることができます。

Final Project 2
Google Clone

このプロジェクトでは、Googleのメイン画面をGoogleのロゴから検索ボックスまで完全にクローンコーディングします。

HTML5CSS3を使用して、Googleのシンプルなレイアウトを正確に再現します。ページ構造は、Googleのロゴ、検索ボックス、検索ボタンを中心にシンプルながらもすっきりとしたデザインを作ることになります。

この練習により、ソート、間隔調整、フォントスタイリングなどの基本的なCSS3技術を確実に習得し、実際のWebページのように機能する検索ボックスを実装しながら、実用的なWebデザイン能力を育てることができます。

さらに、レスポンシブWebデザインを適用して、モバイル画面からデスクトップ画面まで最適化された結果を作成し、実際のWebプロジェクトに必要なスキルを学ぶことができます。

Final Project 3
旅行ブログ

このプロジェクトでは、体系的なHTML5構造完全なCSS3スタイリングを学びながら、旅行ブログページをクローンコーディングします。

HTML5を活用してWebページの構造をきれいに設計し、 CSS3でページのスタイリングを追加して、実際の旅行ブログのように見えるデザインを実装します。

レスポンシブデザインを適用して、さまざまな画面サイズに合わせてページを自動的に最適化するように構成し、イメージギャラリー、テキストレイアウト、メニューバーなどさまざまな要素を練習しながら、実際のプロジェクトに直接適用できるデザインスキルを習得します。

このプロジェクトにより、構造的で効率的なWebページの作成レスポンシブWebデザインを完全に学ぶことができます。実際のブログのように動作するページを作ってみて、Web開発の基礎から深化まですべて身につける機会です。

Final Project 4
チャットアプリ

このプロジェクトでは、100%モバイルに反応するチャットアプリを作成します。 HTML5CSS3GridFlexを総動員して、実際のチャットアプリのように動作するページを完成させます。

HTML5でアプリの構造を設計し、 CSS3でページのスタイリングを追加して、モバイルでも最適化されたUIを実装します。 GridFlexboxを使用してチャットウィンドウのレイアウトを効率的に配置し、メッセージ転送、チャットリスト、プロファイル画像などの要素を練習します。

特に、モバイルレスポンシブを重点的に扱い、モバイル環境チャット画面が最適化されるように設計します。これにより、レスポンシブWebデザインの重要性を学び、実際のアプリのように見え、動作するページを作成できます。

このプロジェクトは、モバイル最適化実務に近いUI / UX設計を学びたい人に最適な学習機会を提供します!

Final Project 5
Living Room

このプロジェクトでは、最新のHTML5文法CSS3スタイリングを適用してメイン画面を作成しながら、レスポンシブWebデザインも実装する実習を進めます。

HTML5最新のタグCSS3のさまざまな属性を活用して、実際のWebページのように見えるメイン画面を構成します。レイアウト設計FlexboxGridを使用して柔軟できれいな構成を作成し、デザイン要素はレスポンシブに最適化され、さまざまなデバイスで見やすくなります。

このコースでは、実務でよく使われる最新の文法CSS3の高度な機能を学び、レスポンシブWebを基にして、あらゆる画面サイズで最適化されたレイアウトを実装できます。

繰り返し学習することで、 HTML5とCSS3の完全な適用法を習得し、実際のデザインのように実装されたWebページを作成する能力を高めることができます!

Final Project 6
5Pm

ついに最後のプロジェクトです!本物のパブリッシャーになったことをおめでとうございます。これまでに学んだすべてを最高の作品として実装してみてください。

このプロジェクトではHTML5CSS3を活用して、実務のように完成度の高いWebページを作成します。これまでに学んだすべての技術を総合的に活用しレスポンシブデザインとスタイリッシュなレイアウトを適用し、実際のウェブサイトのように動作するページを実装します。

パブリッシャーとしてのすべてのノウハウをまとめた最後のプロジェクトでは、今はもう学ぶことはありません。これまでの学習を通じて、デザインの完成度コードの効率性を揃えたパブリッシャーに生まれ変わる準備ができました。今自信を持ってハッサン🙂

おめでとうございます、今後の旅でも素晴らしいWebページをたくさん作ってください! 🎉

よくある質問

Q. 本当に何も知らない初心者です。大丈夫でしょうか?
A. はい。本当に大丈夫です。何も知らない方が学習できるように構成したカスタム講座です。

Q. 本を購入しました。オンラインレッスンも購入する必要がありますか?
A.本を購入した場合は、さらに購入することをお勧めします。本では扱わない内容も多く含まれています。

Q.選手知識が必要ですか?

A. はい、このコースでは HTML5 に関する先行知識が必要です。

受講前の注意

練習環境

  • オペレーティングシステムとバージョン(OS):Windows、macOS

  • 使用ツール:ビジュアルスタジアコード(Visual Studio Code)、Chrome(Chrome)

  • PC仕様:Webサーフィンが可能なレベルの最低仕様も可能です。

学習資料

  • 実習進行のための講義別学習資料提供します。


選手の知識と注意事項

  • 完全非専攻者、初心者も受講可能

  • ただし、HTML5の学習は先行する必要があります。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Beginner & novice who has never studied CSS before

  • Experienced, but not confident that I know CSS3 exactly.

  • Practitioners who are still using CSS3 based on a rough idea/intuition.

  • Someone who wants to learn simply and easily, without complicated explanations

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

  • HTML5

こんにちは
です。

4,369

受講生

202

受講レビュー

74

回答

4.9

講座評価

7

講座

수코딩은 온라인과 오프라인을 병행하면서
코딩을 가르치는 활동을 하고 있습니다.

다년간의 오프라인 강의 경험을 바탕으로,
더 많은 사람들이 코딩을 쉽고 재미있게 배울 수 있도록
매일 고민하고, 끊임없이 노력하고 있습니다.

현재까지 다음과 같은 3권의 책을 출판하며
프런트엔드 강의 분야를 선도하고 있습니다:

또한, 유튜브 채널을 통해 다양한 무료 강의도 제공하고 있습니다.
👇 지금 바로 방문해 보세요
[유튜브 채널 링크]

カリキュラム

全体

181件 ∙ (15時間 49分)

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

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

受講レビュー

全体

4件

5.0

4件の受講レビュー

  • rujung12257743님의 프로필 이미지
    rujung12257743

    受講レビュー 2

    平均評価 5.0

    5

    99% 受講後に作成

    I found the learning method of looking at a sample page, implementing that page directly, and then looking at the explanation to be helpful.

    • sucoding
      知識共有者

      I'm glad it was helpful, rujung1225! Feel free to ask if you have any more questions in the future :) Thank you!

  • kkumilatte님의 프로필 이미지
    kkumilatte

    受講レビュー 1

    平均評価 5.0

    5

    30% 受講後に作成

    • sucoding
      知識共有者

      Hello, Kkumilatte! Thank you for giving such a positive review that can be a source of strength. Have a wonderful day!

  • wndudjy50304642님의 프로필 이미지
    wndudjy50304642

    受講レビュー 1

    平均評価 5.0

    5

    30% 受講後に作成

    • sucoding
      知識共有者

      Heo Ju-yeong! Thank you for the good review. Have a happy day~!

  • todaerika님의 프로필 이미지
    todaerika

    受講レビュー 10

    平均評価 4.9

    5

    30% 受講後に作成

    As a backend developer, I've mainly worked on designing with basic tags and tables within a fixed design. I find it great that I can learn about CSS and the internal workings of how browsers recognize it. As time goes on, the design requirements have increased, and the HTML and CSS have become more complex to meet them... I felt like it was just getting more complex without any rules, but as I listen to the lectures, I realize there are hidden operational principles. Above all, the examples are based on real sites, which makes it easy to understand. I'm skipping the content I already know and only watching some chapters, but there are more details than I thought, so I'm eager to listen to the rest of the chapters soon. This is my second lecture following HTML, and your voice tone is especially good, making it great to listen to as a sleep aid before bed?

    • sucoding
      知識共有者

      Hello dlsrksrhk, Thank you so much for your valuable feedback. 😊 As a backend developer, I'm very pleased that you've taken a step beyond the HTML and table-based designs you were familiar with and made an effort to understand CSS and the internal workings of browsers. I'm glad that the detailed explanations of the examples in the lectures through real-world site cases were helpful for your learning, and I feel even more rewarded that you're looking forward to the remaining chapters. I'm especially embarrassed but grateful that you even mentioned my voice tone. 😄 Thanks to you listening to the lectures with a relaxed mind, I was also able to enjoy recording. In the future, I will continue to balance practical examples that can be applied directly to the field with in-depth theory, and come back with even more informative lectures. I hope you continue to have a beneficial learning experience until the end! Thank you. Sincerely, SooCoding

¥7,007

sucodingの他の講座

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

似ている講座

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