강의

멘토링

커뮤니티

Programming

/

Web Development

제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part2 - [중급편]

「CSS Position、Transition、Transform、Animation、Flexbox、Grid、レスポンシブウェブ」など、中級以上のCSS技術を体系的にマスターし、多様な実習プロジェクトを通して実務で即座に応用可能なスキルを習得できる講座です。

難易度 初級

受講期間 無制限

  • nhcodingstudio
HTML/CSS
HTML/CSS
HTML/CSS
HTML/CSS

受講後に得られること

  • CSS ポジション(Position): Static、Relative、Absolute、Fixed、Sticky などを活用し、多様なレイアウトを自由自在に構成します。

  • CSSトランジション(Transition) & トランスフォーム(Transform): 自然でダイナミックなUI効果を実装し、ウェブページの完成度を高めます。

  • CSSアニメーション(Animation): Keyframes、Duration、Timing-Functionなどを活用して、インタラクティブで生き生きとしたウェブ要素を作ることができます。

  • Flexbox & Grid: 最新のレイアウト技術を使って、レスポンシブWebページをより簡単かつ迅速に設計するノウハウを学びます。

  • レスポンシブデザイン:メディアクエリを通じて、様々なデバイス(PC、タブレット、モバイル)でレイアウトが崩れない柔軟なレイアウトを実装します。

  • 多様な実習プロジェクト:カードレイアウト、レスポンシブナビゲーションバー、イメージギャラリー、ダッシュボード、ローディングスピナーなど、実務型事例を通してコーディング経験を積みます。

  • レイアウト設計&UI/UX改善: 実際の業務やポートフォリオにすぐに適用できるデザイン設計能力を身につけます。

より強力なCSS技術で、ウェブサイトの品質を一歩引き上げてください! 🤔

「きちんと学ぶHTML + CSS:入門から本番までの完全征服Part2」は、CSSの深化の概念を体系的に征服するように構成された講義です。
Position (Static、Relative、Absolute、Fixed、Sticky)から、Transition、Transform、Animation、Flexbox、Grid 、そしてレスポンシブデザインまで、現代のWebデザイナー&パブリッシャーが知っておくべき機能を総網羅しました。

この講義が特別な理由

  1. しっかりしたカリキュラム

    • CSSの主な原則(ポジション、アニメーション、レスポンシブなど)を基礎から応用段階までじっくり身につけ、実際のプロジェクトにどのように適用するかをお知らせします。

  2. 実習中心学習

    • カードレイアウト、ローディングスピナー、イメージズーム効果など、さまざまなミニプロジェクトがあります。理論だけを聞いて終わるのではなく、手でコードを書いて結果を確認して習得することができます。

  3. 審美性と構造

    • FlexboxとGridを活用して、きれいで直感的なレイアウトを構築し、メディアクエリを介してさまざまなデバイスに対応するレスポンシブウェブを本番で設計してみます。

  4. ポートフォリオのアップグレード

    • 講義のさまざまな例とプロジェクトを使用して、ポートフォリオに直接利用できる結果を作成できます。

    • 個人プロジェクトやチームコラボレーションでもデザインクオリティを高める重要な能力を備えています。

  5. 受講生にやさしいアプローチ

    • 既にHTML + CSSの基礎を学んだ方が中級レベルに上がることができるように、よく混同する概念も詳細な説明と例を通して解きます。

    • トラブルシューティング時に質問掲示板を使用すると、すばやくフィードバックを送受信できます。


こんな方におすすめです

HTML+CSS基礎を終えて中級CSS・アニメに挑戦したい方

Flexbox & Gridレイアウト設計を自由にしたい予備・現職開発者

反応型ウェブでパソコン・モバイル・タブレットまで支援したいウェブデザイナー・フロントエンド志望生

受講後は…

  • Position属性を活用して、バナー固定・フローティングメニューなど視線を捉えるレイアウトを自由自在に実装します。

  • Transition & Transformにより、ボタンホバー効果イメージズームテキスト移動などのスタイリッシュなインタラクションを実現できます。

  • アニメーションの概念を学び、ローディングスピナーテキストタイピングカードスライドなどのダイナミックなWeb要素をデザインできます。

  • Flexbox&Gridを組み合わせて複雑なレイアウトも簡単に構成し、レスポンシブWebに拡張してモバイル・タブレット・デスクトップに対応できます。

  • レスポンシブデザインプロジェクトを通じて、実際のサービスを開発・運営する状況でも、きれいで直感的なウェブページを完成できる自信を得ることになります。

このような内容を学びます。

  1. CSS Level 2 - Position

    • Relative, Absolute, Fixed, Sticky, Z-index について

    • プロジェクト:カスケードレイアウト、V形状レイアウト、固定レイアウトなど

  2. CSS Level 2 - Transition

    • Transition Property, Duration, Timing-Function, Delay

    • プロジェクト:ボタンホバー効果、画像拡大効果など

  3. CSS Level 2 - Transform

    • Translate, Rotate, Scale, Skew

    • プロジェクト:カードの回転、テキストの移動、3D効果の実装

  4. CSS Level 2 - Animation

    • Keyframes, 繰り返し回数, 方向設定, Fill-Mode

    • プロジェクト:ローディングスピナー、フェードイン効果、テキストの色の変化、カードスライドなど

  5. CSS Level 3 - Flexbox

    • Container & Items, Direction, Wrap, Justify-Content, Align-Itemsなど

    • プロジェクト:カードレイアウト、レスポンシブナビゲーションバー、ダッシュボード、ブログ投稿レイアウト

  6. CSS Level 3 - Grid

    • Grid-Template、frユニット、gap、エリア、オートフローなど

    • プロジェクト:レスポンシブイメージギャラリー、ダッシュボード、ポートフォリオセクションなど

  7. CSS Level 3 - レスポンシブデザイン

    • メディアクエリ、フレキシブルグリッド、レスポンシブタイポグラフィ

    • プロジェクト:レスポンシブWebデザイン総合実習

こんにちは、私たちの近所コーディングスタジオへようこそ!

私たちの東ネコーディングスタジオはカーネギーメロン、ワシントン、トロント、ウォータールーなど北米の主要大学でコンピュータ工学を専攻しGoogle、Microsoft、MetaなどグローバルIT企業で実務経験を積んだ開発者たちが一緒に作った教育グループです。

最初はアメリカとカナダのコンピューター工学専攻者同士で一緒に勉強し、成長しようとしたスタディー会で始まりました。それぞれ異なる大学、異なる時間帯にあったが、一緒に問題を解決し、お互いに学んだその時間はとても特別で、自然にこのような気がしました。

「私たちが勉強していたこの方式、そのまま他人にも伝えたらどうだろうか?」

その疑問がまさに私たちの近所コーディングスタジオの出発点でした。

現在は約40人の現職開発者とコンピュータ工学専攻大学生がそれぞれの専門分野を務め、入門から実戦まで合わせるカリキュラムを直接設計して講義します。単純な知識伝達を超えて、本物の開発者の視線で学び、一緒に成長できる環境を提供します。

「本当の開発者は、本当の開発者に学ばなければなりません。」

私たちはウェブ開発の全過程を最初から最後まで体系的に扱いますが、理論にとどまらず実践と実戦中心のフィードバックを通じて実力をキーワードにします。
受講生一人、一人の成長を一緒に悩んで導くことが私たちの哲学です。

私たちの哲学は明らかです。
「本当の学びは実践から来、成長は一緒になったときに完成する」

開発を初めて始める入門者から、実務能力を育てたい就職準備生、進路を探索中の青少年まで。
私たちの東ネコーディングスタジオは皆の出発点であり、一緒に歩く心強い仲間になりたいと思います。

今、一人で心配しないでください。
私たちの東ネコーディングスタジオがあなたの成長を一緒にします。


Welcome to Neighborhood Coding Studio

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo , and went on to gain hands-on experience at Meta tech .

It all began as a study group formed by computer science students across the US and Canada , created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

「What if we shared this way of learning with others?」

That thought became the foundation of Neighborhood Coding Studio .

Today, we are a team of around 30 active developers and computer science students , each taking responsibility for their area of​​ expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We're not just here to teach—we're here to help you see through the lens of real developers and grow together .

“To become a real developer, you must learn from real developers.”

Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback .
We care deeply about each learner's growth and are committed to supporting your path every step of the way.

Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpad—and your trusted companion on the journey.

You don't have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

受講前の注意

こんな方におすすめです

  1. 基本HTML+CSS文法は既に学習していますが、中級CSS技術とスタイリッシュなアニメーション実装に挑戦したい方

  2. Flexbox & Grid原理をきちんと把握し、空間配置レイアウト設計を自由にしたい予備・現職開発者

  3. PC・モバイル・タブレットなど多様なデバイスに対応する反応型Webを作りたいWebデザイナー、フロントエンド志望生

  4. チームプロジェクトでデザインやマークアップのクオリティを高めたい方、ポートフォリオに使えるウェブページデザインを整えたい方

  5. UI/UXに関心が多く、視覚的に活気のあるウェブサイトを構築したいすべての方々

学習資料

  • 授業ごとにPDFが添付されています!

選手の知識が必要な場合は何ですか?

  • HTML+CSSの基礎

  • Visual Studio Codeや他のエディタのインストール後に簡単なHTML/CSS編集が可能な方

受講完了後

  • プロジェクト実務でレイアウト配置やアニメーション効果をうまく適用

  • PC・モバイル・タブレットなど多様な画面サイズに自然に対応できる反応型Web実装

  • きれいで差別化されたデザインポートフォリオの競争力を高める

  • チームコラボレーションでもデザインクオリティコードメンテナンス性の両方を満たす能力を確保

カテゴリー

  • 開発・プログラミング

スキルタグ

  • CSS , Animation , Flexbox , Grid , Responsive Web

講義レベル

  • 中級(基礎文法を知っていれば簡単に学習可能)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML+CSSの基礎はある程度身につけたものの、より豊富なCSS機能を活用してワンランクアップしたページを作りたい方

  • WebデザインとUI/UXに興味があり、多様なCSSアニメーション・レイアウト設計技法で実務力量を培いたいWeb開発志望者

  • FlexboxとGridに馴染みがなく漠然とした不安を感じていた方 - 実際に手を動かしながら確実に理解したい方

  • レスポンシブウェブの制作を通じて、モバイル・タブレット・デスクトップなど多様なデバイスをサポートする必要がある開発者

  • チームプロジェクトや個人のポートフォリオで、一段階高いデザインクオリティを目指すすべての方々

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

  • 基本的なHTMLとCSSの概念をある程度知っていればスムーズに進められます。

  • 「ちゃんと学ぶHTML + CSS: Part1」またはこれに準ずる基礎コースを受講された方は、学習効率がさらに向上します。

こんにちは
です。

717

受講生

44

受講レビュー

16

回答

4.8

講座評価

13

講座

こんにちは、ウリドンネコーディングスタジオへようこそ!

우리동네コーディングスタジオは、カーネギーメロン、ワシントン、トロント、ウォータールーなど北米の主要大学でコンピュータ工学を専攻しGoogle、Microsoft、MetaなどのグローバルIT企業で実務経験を積んだエンジニアたちが共に作り上げた教育グループです。

最初はアメリカとカナダのコンピュータ工学専攻者たちが、共に学び成長するために作ったスタディグループから始まりました。それぞれ異なる大学、異なる時間帯にいましたが、共に問題を解決し、互いに学び合ったその時間は非常に特別なものでした。そして、自然とこのような考えが浮かびました。

「私たちが学んだこのやり方を、そのまま他の人にも伝えたらどうだろうか?」

その問いこそが、「ウリドンネ・コーディング・スタジオ(私たちの街のコーディング・スタジオ)」の出発点でした。

現在は約30名の現役エンジニアとコンピュータ工学専攻の大学生たちが、それぞれの専門分野を担当し、入門から実践までを網羅するカリキュラムを自ら設計・講義しています。単なる知識の伝達を超え、本物のエンジニアの視点で学び、共に成長できる環境を提供します。

「本物の開発者は、本物の開発者に学ぶべきです。」

私たちはウェブ開発の全過程を最初から最後まで体系的に扱いつつ、理論にとどまらず実習と実践中心のフィードバックを通じて実力を養います。
受講生一人ひとりの成長を共に悩み、導いていくことが私たちの哲学です。

🎯 私たちの哲学は明確です。
「真の学びは実践から生まれ、成長は共に歩むことで完成する」

開発を始めたばかりの入門者から、実務能力を磨きたい就職準備生、進路を模索中の青少年まで。
わが街のコーディングスタジオは、すべての人の出発点であり、共に歩む心強いパートナーでありたいと考えています。

もう、一人で悩まないでください。
わが街のコーディングスタジオが、あなたの成長を共に歩みます。


우리동네코딩 스튜디오에 오신 것을 환영합니다!

우리동네코딩 스튜디오는 카네기 멜런, 워싱턴 대학교, 토론토 대학교, 워털루 대학교 등 북미 명문대에서 컴퓨터 공학을 전공하고, 구글, 마이크로소프트, 메타와 같은 글로벌 IT 기업에서 실무 경험을 쌓은 개발자 팀에 의해 설립되었습니다.

すべては、知識を共有し、問題を解決し、互いに学び合いながら共に成長するために作られた、米国とカナダのコンピュータサイエンス専攻の学生たちによるスタディグループから始まりました。
通っている大学もタイムゾーンも異なりましたが、その経験は非常に有意義なものであり、私たちにあるシンプルな思いを抱かせました。

「この学び方を、他の人たちとも共有できたらどうだろう?」

その思いが、近所のコーディング教室の基盤となりました。

現在、私たちは約30名の現役エンジニアとコンピュータサイエンス専攻の学生で構成されたチームであり、それぞれが専門分野に責任を持ち、基礎知識から実践的な開発までを網羅したカリキュラムを設計・提供しています。
私たちは単に教えるだけでなく、皆さんが現役エンジニアの視点を持ち、共に成長できるようサポートします。

「本物のエンジニアになるためには、本物のエンジニアから学ばなければなりません」

私たちのコースでは、実践的な演習、リアルなプロジェクト、そして実用的なフィードバックに重点を置き、ウェブ開発の全行程を最初から最後まで体験します。
私たちは受講生一人ひとりの成長を大切に考え、皆さんの歩む道を一歩ずつ全力でサポートすることをお約束します。

🎯 私たちの哲学はシンプルですが、強力です:
「真の学びは実践から生まれ、真の成長は共に歩むことで実現する」

これから学習を始める方も、初めての就職を準備している方も、あるいはIT業界での未来を模索している方も、
Neighborhood Coding Studioはあなたの出発点となり、その道のりの信頼できるパートナーとなります。

一人で悩む必要はありません。
あなたの開発者としての未来に向けて、Neighborhood Coding Studioが共に歩みます。

カリキュラム

全体

136件 ∙ (2時間 24分)

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

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

受講レビュー

全体

2件

3.5

2件の受講レビュー

  • jeony05354605님의 프로필 이미지
    jeony05354605

    受講レビュー 2

    平均評価 5.0

    5

    30% 受講後に作成

    基礎講義を受けた後でも、いざレイアウトを組もうとするとabsoluteとrelativeの間で迷ってばかりでしたが、この講義を受けて頭の中が本当にすっきりしました。特にFlexboxとGridを単に理論だけで学ぶのではなく、実務型の例題で実際に作ってみることで、しっかりと身に付く感じがします。 一番良かった点は、アニメーションとトランジションの部分です。これまでウェブサイトで見ていた洗練されたインタラクションを自分で実装できるようになり、自信がつきました。レスポンシブウェブまで一度に学べるので、フロントエンド志望者なら必ず受講すべき必須コースだと思います。素晴らしい講義をありがとうございました!

    • devhoonie님의 프로필 이미지
      devhoonie

      受講レビュー 2

      平均評価 3.5

      2

      30% 受講後に作成

      現在、講義をセクション4まで受講しましたが、例と問題のコードが異なる場合(例えばセクション4のtransition and transformプロジェクト:テキスト移動効果の場合、問題とは異なり提供される例のファイルはテキスト移動効果ではなく画像拡大効果のStarterです)があり、また、提供されるStarterコードと解答が全く別の環境のように感じられる場合があります。 また、CSSの様々なプロパティを例単位に分けて説明している点は良いのですが、構成に比べて講義のクオリティが低い印象です。各セクションの講義は単にテキストをTTSで読み上げているだけで、むしろ講師の声を直接聞くことができれば、はるかに講義から真摯さを感じられると思います。

      • nhcodingstudio
        知識共有者

        devhoonie様、こんにちは。 貴重な受講レビュー、誠にありがとうございます。まず、例題と問題コードの不一致により、ご迷惑をおかけしましたことを心よりお詫び申し上げます。お話しいただいたセクション4のtransition and transformプロジェクトのように、実際の講義内容とStarterコードがずれている場合、迅速に確認し、一括で点検および修正作業を進めさせていただきます。学習の流れを妨げないよう、最優先で対応いたします。 また、CSSプロパティごとに例を分けた構成を肯定的に評価していただき、感謝申し上げます。講義の配信方法に関する率直なご意見も、深く心に留めます。現在、一部の講義がTTS音声のみで提供されている点が、学習への集中度合いに影響を与える可能性があるという点に、全面的に共感いたします。該当パートは、今後順次、講師音声に置き換えられるよう、内部で検討を重ね、アップデートを準備いたします。 より良い学習体験をご提供できるよう、継続的に改善してまいります。改めまして感謝申し上げますとともに、いつでも不便な点やご提案がございましたらお聞かせください。

      • nhcodingstudio
        知識共有者

        devhoonie様、こんにちは。 まず、サンプルと課題内容に不一致があった点につきまして、改めてお詫び申し上げます。該当箇所は修正完了いたしました。ご不便をおかけし、誠に申し訳ございませんでした。 加えて、HTML、CSSの授業を含む講座内容全般、ソフトウェア開発全般に関するご質問、または次のプロジェクトに関するお悩みなど、どのようなテーマでもご不明な点がございましたら、いつでもオープンチャットを通じてお問い合わせください。誠心誠意、ご回答させていただきます。 今後もdevhoonie様に実質的な助けとなるような、より充実した有益なコンテンツでお会いできるよう努めます。 ありがとうございます。 オープンチャット:https://open.kakao.com/o/gC10Fnoh

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

    ¥14,030

    24%

    ¥2,442

    nhcodingstudioの他の講座

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

    似ている講座

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