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

/

Web Development

13の例で学ぶCSS Flex&Gridのコア機能

理論は核心だけ速く。私たちの記事ではなく、本物のコードで学びましょう!繰り返し学習で自然に馴染むFlexとGrid! 😎(HTML5独学ホワイトペーパー、CSS3独学ホワイトペーパー著者直講)

  • erumcoding
HTML/CSS
Flex

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

こんなことが学べます

  • CSS Flexレイアウト

  • CSS Gridレイアウト

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

  • フォントアサム& Google Webフォントの使い方

CSS、今は本番です!
複雑なFlex&Grid、一発で終わりましょう。

講義のテーマ 📖

コア機能の基本機を固める!

  • CSSのレイアウト専用機能、FlexとGridの核心理論をエキスマン集めて素早く!
  • 練習の例に従って作成し、実際にレイアウトを作成するときにFlexとGridを使用する方法まで!

この講義、なぜ聞くべきですか? 🚀

理論は知っていますが、思ったように作ることはできません😥

FlexとGrid機能は覚えておくべき属性の数も多く、さらに生じたものも同様です。だから、いつも聞いたりすると、これらの属性が何をするのかは分かりますが、私が思ったレイアウトをFlexとGridを使って作成する方法がわからないという方が多いです。

基礎と本番プロジェクト制作その曖昧な中どこか!そこで迷っている方々。この講義はこんな方にぴったりの講義だと思います。実習例に従うと、すぐに感覚をつかむことができるでしょう。

はい?私はWeb開発者になりたいですか?

就職や離職を準備していたり、ちょうどプログラミングに入門した友達を相談してみると、「デザイン」を見落としている友達がかなり多いです。開発者は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&amp; CSS基礎文法の勉強を終えたばかりの方

  • Flex&amp; Gridの実践例を体験したい方

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

  • 複雑なFlex&amp; Grid 一部屋で終わりたい方

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

  • HTML基礎文法

  • CSS基礎文法

こんにちは
です。

4,437

受講生

161

受講レビュー

30

回答

4.9

講座評価

7

講座

이룸코딩 ErumCoding

함께 꿈을 코딩해요! 🚀

カリキュラム

全体

50件 ∙ (3時間 48分)

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

受講レビュー

全体

18件

4.9

18件の受講レビュー

  • 대랭님의 프로필 이미지
    대랭

    受講レビュー 1

    平均評価 5.0

    5

    8% 受講後に作成

    기초 강의듣고 이어듣기좋아요 이거 듣고 들을 다음 난이도 부분도 있으면 좋겠네요

    • gangsugi님의 프로필 이미지
      gangsugi

      受講レビュー 21

      平均評価 5.0

      5

      100% 受講後に作成

      어느정도는 알고 있었지만 혹시라도 모르는부분이 빠졌을까 해서 한번 들어봤는데 도움이 되었습니다. 설명도 차근차근하게 해주셔서 지루하지않고 재미있게 들었습니다. 좋은 강의였어요^^

      • 이종운님의 프로필 이미지
        이종운

        受講レビュー 34

        平均評価 5.0

        5

        100% 受講後に作成

        다른 강의들은 지루하고 이해도 안되서 웹개발자 포기할까 고민도 많이했는데 선생님 덕분에 즐겁게 공부해서 감사합니다

        • kkkh0712님의 프로필 이미지
          kkkh0712

          受講レビュー 11

          平均評価 5.0

          5

          80% 受講後に作成

          css 쉽게 배우기 좋아요

          • boxman님의 프로필 이미지
            boxman

            受講レビュー 6

            平均評価 5.0

            5

            100% 受講後に作成

            잘 들었습니다.

            ¥4,036

            erumcodingの他の講座

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

            似ている講座

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