inflearn logo
知識共有
inflearn logo

13の例題で学ぶCSS Flex & Gridの核心機能

理論は核心だけを素早く。文章ではなく、本物のコードで学びましょう!反復学習で自然に身につくFlexとGrid! 😎(HTML5独学白書、CSS3独学白書 著者直講)

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
Flex
Flex
HTML/CSS
HTML/CSS
Flex
Flex

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

4.9

5.0

대랭

8% 受講後に作成

基礎講義を聞いて続いて聞くのがいいです。

5.0

gangsugi

100% 受講後に作成

ある程度は知っていましたが、もしかして分からない部分が抜けたのかと一度聞いてみましたが参考になりました。

5.0

이종운

100% 受講後に作成

他の講義は退屈で理解できませんでした。 楽しく勉強してくれてありがとう

受講後に得られること

  • CSS Flex レイアウト

  • CSS Grid レイアウト

  • CSSメディアクエリの書き方

  • Font Awesome & Google Web Fonts の使い方

CSS、いよいよ実践だ!
複雑なFlex & Gridを、一気にマスターしましょう。

講義テーマ 📖

核心機能の基本を固める!

  • CSSのレイアウト専用機能、FlexとGridの核心理論をエッセンスだけ集めてスピーディーに!
  • 実習例題を一緒に作りながら、実際にレイアウトを作成する際にFlexとGridを使用する方法まで!

この講座、なぜ受講すべきなのでしょうか? 🚀

理論はわかっているのに、思い通りに作れません 😥

FlexとGridの機能は覚えるべきプロパティの数も多く、さらに見た目も似たようなものばかりです。そのため、実際に聞いたり見たりすればそれらのプロパティがどのような機能を持つかは分かるものの、いざ自分が思い描いたレイアウトをFlexやGridを使って作成する方法が分からないという方が多くいらっしゃいます。

基礎と実践プロジェクト制作の、その曖昧な中間のどこか!そこで迷っている方々。この講義は、そんな方にまさにぴったりの講義だと思います。実習例題に沿って進めていけば、すぐにコツを掴めるはずです。

えっ?私はウェブ開発者になりたいんですけど?

就職や転職を準備していたり、プログラミングに入門したばかりの友人と相談に乗っていると、「デザイン」を軽視している人がかなり多いです。開発者はHTMLやCSSを知らなくてもいいのではないか、という質問もよく受けます。

私は開発者を農家に例えたりします。開発がリンゴ作りなら、私が開発したサービスは消費者に販売するリンゴになりますよね?レイアウトを作成することは、リンゴをリンゴ箱に詰める過程と同じです。開発者も、最低限自分の商品を意図した通りにパッケージングできなければなりません!


講義の特徴 ✨

  • AからZまで!FlexとGridの機能を核心だけ素早く整理します。
  • 実習例題を通じて核心機能の基本を固めます。

この講義を終えた後には 📜

これを…全部覚えなければならないのですか? 😱

私がFlexとGridを教えながら最も多く受けた質問が、まさに「数多くのFlexとGridの機能をすべて覚えなければならないのか」ということでした。この講義を終える頃には、FlexとGridのレイアウトで自分の思い通りのものを作るために、すべての機能を覚えたり使ったりする必要はないということが、はっきりと分かるようになるはずです!

コア機能さえしっかり把握していれば、多くのコードを書かなくても、簡単かつシンプルに自分が望むレイアウトを作成することができます!


よくある質問 Q&A 💬

Q. 非専門家でも受講できる講義ですか?

A. はい!HTMLとCSSは、非専門家や中学生、高校生の皆さんも簡単に学ぶことができます。ただし、HTMLとCSSの基礎講義を先に受講していただく必要があります。基礎講義はYouTubeの「開発者イ・ドヘ」チャンネルで無料で提供しています!

HTML5 & CSS3 基礎文法オールインワン
素早く簡単に学ぶウェブの基礎

Q. コア機能だけに集中して実習する理由は何ですか?

A. 数多くの学生を教えてきた結果(?)、10個の機能を教えるためにそれぞれ1つずつ例題を見せるよりも、本当にその機能を扱うために必ず知っておくべき核心機能3つ以下に集中して、それぞれ3〜4個の例題を繰り返し学習させる方が、はるかに!本当にはるかに効果的でした。この講義で目標としていることも同様であるため、受講後すぐに思い描いたものを画面に反映させるための核心機能を、集中的に実習できるように授業を構成しました。

Q. 授業内容はどのレベルまで扱いますか?

A. 難易度を入門、基礎、中級、上級に分けるなら、基礎に該当する難易度です。


講師紹介 ✒️

イ・ドヘ

フルスタックエンジニア兼プログラミング講師として活動しています。

  • 『HTML5 独学白書』著者
  • 『CSS3 独学白書』著者
  • 『JavaScript独学白書』著者

実習例題をちょっぴり先取り 😎

著者直伝!
書籍を一緒にチェックしてみてください。

HTML5独学白書 (クリック)
CSS3独学白書 (クリック)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML & CSSの基礎文法の学習を終えたばかりの方々

  • Flex & Grid 実習例題を体験してみたい方へ

  • ポートフォリオ作成を控え、レイアウトの練習が必要な方へ

  • 複雑な Flex & Grid を一気にマスターしたい方へ

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

  • HTML基礎文法

  • CSSの基礎文法

こんにちは
erumcodingです。

4,664

受講生

179

受講レビュー

30

回答

4.9

講座評価

7

講座

イルームコーディング ErumCoding

一緒に夢をコーディングしましょう! 🚀

もっと見る

カリキュラム

全体

50件 ∙ (3時間 48分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

19件

4.9

19件の受講レビュー

  • coachmsoox2658님의 프로필 이미지
    coachmsoox2658

    受講レビュー 1

    平均評価 5.0

    5

    8% 受講後に作成

    基礎講義を聞いて続いて聞くのがいいです。

    • kkkh07129094님의 프로필 이미지
      kkkh07129094

      受講レビュー 11

      平均評価 5.0

      5

      80% 受講後に作成

      css簡単に学ぶのが好き

      • gangsugi5753님의 프로필 이미지
        gangsugi5753

        受講レビュー 23

        平均評価 5.0

        5

        100% 受講後に作成

        ある程度は知っていましたが、もしかして分からない部分が抜けたのかと一度聞いてみましたが参考になりました。

        • roykean19930688님의 프로필 이미지
          roykean19930688

          受講レビュー 35

          平均評価 5.0

          5

          100% 受講後に作成

          他の講義は退屈で理解できませんでした。 楽しく勉強してくれてありがとう

          • zd님의 프로필 이미지
            zd

            受講レビュー 7

            平均評価 5.0

            5

            100% 受講後に作成

            よく聞きました。

            erumcodingの他の講座

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

            似ている講座

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

            新規会員登録で25%OFF

            ¥3,270

            25%

            ¥4,360