inflearn logo
inflearn logo

コーディングは初めてなので 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アニメーション、レスポンシブ

HTMLの次はCSS!
CSSで目を引くウェブページを作りましょう ⭐

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

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

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

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

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

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

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

  • 本講義は、領進ドットコムの書籍『コーディングは初めてなので with ウェブパブリッシング』の著者が、書籍の内容に基づいて講義を行います。書籍と一緒にご覧いただくことで、より学習に役立つはずです。 từ Youngjin.com dựa trên nội dung của sách. Việc kết hợp học cùng với sách sẽ giúp ích cho bạn nhiều hơn trong quá trình học tập., based on the content of the book. It will be even more helpful for your learning if you follow along with the book.
  • 「コーディングは初めてなので 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は覚えることが多そうに見えますが、初心者でも大丈夫でしょうか?

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

したがって、初めて学ぶ方も無理なく学習していただけます。

add_shortcode('course','335725','list')
add_shortcode('course','335725','list')


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

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

https://inf.run/Gx3Ty

モバイルウェブ制作入門:FigmaデザインをJavaScriptで完璧に実装する

https://inf.run/uBnGj

 

講師紹介 ✒️

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

主な著書

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

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

お問い合わせ

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

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

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

 

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTMLを学習された方

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

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

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

  • HTML

  • フォトショップ

こんにちは
ezwebです。

2,711

受講生

58

受講レビュー

4

回答

4.9

講座評価

11

講座

■ [現在] 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% 受講後に作成

    • hahahayeji님의 프로필 이미지
      hahahayeji

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      • longde1291770911님의 프로필 이미지
        longde1291770911

        受講レビュー 1

        平均評価 5.0

        5

        61% 受講後に作成

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

        • ezweb
          知識共有者

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

      • wlghsp3420님의 프로필 이미지
        wlghsp3420

        受講レビュー 223

        平均評価 5.0

        5

        6% 受講後に作成

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

        ezwebの他の講座

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

        似ている講座

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

        無料