コーディングは初めてなので with ウェブパブリッシング - CSS

CSSの基礎からアニメーション、レスポンシブまで学習します。 実践的な例題を通じて学習内容を復習しながら、確実に基礎を固めます。

難易度 入門

受講期間 無制限

HTML/CSS
HTML/CSS
HTML/CSS
HTML/CSS
Thumbnail

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

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

5.0

5.0

아라레

6% 受講後に作成

良い講義ありがとうございます。

5.0

hesshes

39% 受講後に作成

入門者に簡潔で簡単に説明

5.0

longde129177

61% 受講後に作成

詳しく説明してくださるので、すんなり頭に入ってきます。

受講後に得られること

  • CSSセレクター

  • CSS フォント・テキストスタイル

  • CSS レイアウト - float, position

  • CSSレイアウト - flexbox

  • CSSアニメーション、レスポンシブ

"今もらわないと損!YouTube登録だけで受講料が半額"

구독 & 좋아요 & 댓글 이벤트

簡単なミッションを完了して、50%割引クーポンを今すぐ受け取りましょう。期間限定で提供される過去最大級の特典を、今すぐ手に入れてください!

YouTubeチャンネル登録&コメント認証イベントに参加する : https://forms.gle/wcD2wRVeaG7B7fSj7

HTMLの次はCSS!
CSSで際立つウェブページを作りましょう ⭐

코딩은 처음이라 with 웹퍼블리싱

Web文書の完成度を高めるCSS 🎨

CSSはウェブ文書において外観を担当します。HTML要素から対象を選択し、選択した対象の色、背景、位置、アニメーションなどを設定することで、見た目が良く使い勝手も良いウェブ文書を作ることができます。

この講座は<コーディングは初めてなので with ウェブパブリッシング - HTML基礎>に続く講座で、HTMLの学習が完了していることを前提に、ウェブページのデザイン設定に必要な必須テクニックを学習します。

CSSはHTML要素からスタイルの対象を正確に選択することが優先です。今回の講義ではCSS選択子を確実に学習できます。レスポンシブの基礎をしっかりと習得して、さまざまな幅のデバイスで最適化されて表示されるウェブページを実装します。transitionおよびanimation、transform属性を活用してアニメーションを実装する方法まで学んでみましょう。

講義を受講した後、皆さんはCSSセレクターを通じて望む要素を正確に選択し、選択した要素のスタイルを自由自在に設定できるようになります!

✔️ 本の著者による直講義をぜひご覧ください!

  • 本講義は、領進ドットコムの書籍<コーディングは初めてなので with ウェブパブリッシング>の著者が、書籍の内容に基づいて講義を行います。書籍と一緒にご覧いただくと、学習により役立つはずです。
  • 'コーディングは初めてなので with ウェブパブリッシング - HTML基礎' 講座を受講した後、本講座を続けて学習してください。
  • 補習が必要な場合は、著者のYouTubeチャンネルで追加講義をご覧ください。

このような方におすすめです 🙋‍♀️

HTMLの基礎はあるけれど
CSSの基礎が不足している方

レスポンシブ、アニメーションの実装が
難しい方

Flexを活用した柔軟な
レイアウトを学びたい方


講義の特徴 ✨

CSSスタイル設定に必要なプロパティ
一つずつ学習します!

数年間の講義経歴をもとに
分かりやすく解説いたします!

シンプルな例題で
基本を確実に固めます!

Flexboxによる
効率的なレイアウトを学びます!


こんなことを学びます 📚

1) CSSセレクタを確実に学習します。CSSの始まりは、対象を正確に選択することから始まります。


2) 書体関連のスタイルを学習します。


3) レイアウトに関連する必須属性を学習します。


4) 背景関連の属性をすべて学習します。

 


5) Flexibleレイアウトの核心であるflexを学習し、より多様なレイアウトを簡単に実装します。


6) アニメーションの基礎を学習します。


7) レスポンシブの基礎を確実に学習し、実習します。

デスクトップ画面

タブレット画面

モバイル画面


8) 前の講義で作成したHTMLウェブページを、CSSを活用して実装します。


よくある質問 💬

Q1. HTMLを全く知りませんが、この講義を受講しても大丈夫でしょうか?

はい、大丈夫です。
この講義はCSSの学習に必要な最小限のHTML構造だけを簡単に確認し、すぐにスタイリングへと進みます。
HTMLの文法を深く知らなくても、タグの構造を理解できるレベルであれば、十分に付いていくことができます。

Q2. CSSを学べば、実際にどのようなものが作れるようになりますか?

この講義を受講すると、次のような作業が可能になります。

文字・色・余白・整列などの基本スタイリング
カードUI、ボタン、レイアウト構成
簡単なレスポンシブ画面構成の基礎理解

 

つまり、デザインされた画面をウェブページとして「見えるようにする段階」まで到達することができます。

Q3. CSSは覚えることが多そうに見えますが、初心者でも大丈夫でしょうか?

この講座は暗記中心ではなく理解中心で構成されています。
属性をむやみに羅列するのではなく、
      なぜこの属性が必要なのか
      いつ使用するのか
      似たような属性をどのように区別するのかを基準に説明します。

したがって、初めて学ぶ方も無理なく学習することができます。


次のステップに挑戦してみてください。

Figma参照 - レスポンシブショッピングモールウェブサイト制作完全ガイド

https://inf.run/Gx3Ty

モバイルウェブ制作入門:Figmaデザイン完璧実装ガイド with Javascript

https://inf.run/uBnGj

 

講師紹介 ✒️

こんにちは。rock's easyweb YouTubeチャンネル運営者のキム・ドンジュ講師です。

主な著書

  • ウェブデザイン&ウェブパブリッシングのためのFigma完全活用書 - BJ Public出版社

  • コーディングは初めてなので with ウェブパブリッシング - ヨンジン・ドットコム

お問い合わせ

オフライン講義の情報や追加動画などをご確認いただけます。

コミュニケーション窓口(アンケート、1:1オープンチャット)✒️

受講生の皆様はお知らせ欄で紹介されているGoogleフォーム1:1オープンチャットを通じて、いつでも意見や質問をすることができます。

 

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTMLを学習された方

  • レスポンシブ対応の実装が苦手な方

  • アニメーションの基礎が不足している方

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

  • HTML

  • フォトショップ

こんにちは
ezwebです。

2,824

受講生

63

受講レビュー

4

回答

4.9

講座評価

14

講座

■ [現在] ESTSOFT KDT フロントエンド講師
■ グリーンコンピュータアート学院 ウェブパブリッシング、フロントエンド講師
■ ウェブパブリッシングYouTubeチャンネル「Rock's Easyweb」運営
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ ハンビッコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UXウェブデザインポートフォリオ講義


[ 書籍 ]
2021.07.19 刊行 / ウェブデザイン&ウェブパブリッシングのためのFigma完璧活用書 / BJ Public

2022.08.25 出版 / コーディングは初めて with ウェブパブリッシング / ヨンジン出版社

2023.10 出刊 /2024 SDエデュ ユ・ソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画

2024.11 重版 /2025 SDエデュ ユーソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画

2025.11 重版 /2026 SDエデュ ユ先生のウェブデザイン技能士実技家庭教師ノート / 時代考試企画

 

[ 受賞歴 ]
2022.08 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2021.06 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2018.06 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2017.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2016.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2015.10 グリーンコンピュータアカデミー 新村支店 - 優秀講師

 

 

 

もっと見る

カリキュラム

全体

33件 ∙ (9時間 12分)

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

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

受講レビュー

全体

21件

5.0

21件の受講レビュー

  • hesshes2407님의 프로필 이미지
    hesshes2407

    受講レビュー 2

    平均評価 5.0

    5

    39% 受講後に作成

    入門者に簡潔で簡単に説明

    • ezweb
      知識共有者

      Figma デザイン参照コーディング講座が新しくオープンしました。この講座もぜひご覧ください ^^ https://inf.run/CZ1az

  • thddl52642022님의 프로필 이미지
    thddl52642022

    受講レビュー 4

    平均評価 5.0

    5

    33% 受講後に作成

    • wlghsp3420님의 프로필 이미지
      wlghsp3420

      受講レビュー 224

      平均評価 5.0

      5

      6% 受講後に作成

      良い講義ありがとうございます。

      • hahahayeji님의 프로필 이미지
        hahahayeji

        受講レビュー 1

        平均評価 5.0

        5

        100% 受講後に作成

        • longde1291770911님의 프로필 이미지
          longde1291770911

          受講レビュー 1

          平均評価 5.0

          5

          61% 受講後に作成

          詳しく説明してくださるので、すんなり頭に入ってきます。

          • ezweb
            知識共有者

            貴重な受講レビューをありがとうございます。

        ezwebの他の講座

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

        似ている講座

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

        無料