inflearn logo
知識共有
inflearn logo

CSS FlexずGridを正しく習埗する

珟圚、将来の暙準ずなるCSSレむアりトの䜜成方法であるFlexずGridに぀いお孊ぶこずができたす。

難易床 初玚

受講期間 無制限

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

孊習した受講者のレビュヌ

孊習した受講者のレビュヌ

4.9

5.0

ses123you

100% 受講埌に䜜成

css フレックスずグリッドは名前だけ聞いたくらいでしたが、今回の抂念から反応型にする方法たで知るこずができ、有益な時間でした。 YouTubeで芋たJavaScriptベヌスの映像が信号匟になり、"むンタラクティブWeb開発を正しく開始する"、"SVGマスタヌ"講矩、そしおCSS flexamp; Grid講矩たで聞くこずになりたしたが、3぀の講矩はすべお満足しおいたす。 繰り返し芋ながら孊んだ内容をよく掻甚したす 次回のスクロヌル講矩も楜しみですねㅎ

5.0

TaeHyun Lim

100% 受講埌に䜜成

講矩をお勧めしたす 既存のフレックスでレむアりトを線みたしたが、りェブペヌゞの䜜成䟋を芋お、レスポンシブに絞るにはどうしたらいいか感が取れたした。 そしお、グリッドもランダムな文曞を芋おみようず、どんなこずが重芁で、どれが远加的なのかが混乱しおいたした。

5.0

tamarixda

71% 受講埌に䜜成

講矩䞭におっしゃったのに 初めおなので無知混乱ですね。 ㅎㅎㅎ

受講埌に埗られるこず

  • FlexずGridの必須機胜のクリヌンアップ

  • すぐに実務に掻甚可胜でありながら未来志向のCSSコヌド

  • FlexずGridをさたざたなUIに適甚する方法

  • IEInternet ExplorerでGridを䜿甚する

  • グリッドベヌスのデザむンをそのたたコヌドに移動する

あなたがWebパブリッシャヌ、フロント゚ンド開発者、コヌディングするデザむナヌなら
今FlexずGridを孊ぶべき時です

なぜFlexずGridを
孊ぶべきですか


ただ倚くの環境でFlexやGridの代わりにFloatなどで画面を敎理しおいたすが、
このように線たれたコヌドは倚くの問題を匕き起こしたす。

👌 FlexずGridは将来CSSの暙準で基盀ずなる技術です。
数倚くのサヌビスがGridをベヌスに蚭蚈されおおり、それをそのたた適甚させるには必然的ですからね。

👌シンプルで簡単です。
以前の技術で衚珟するために、いろいろな皮類の数字を曞かなければならないなら、FlexずGridでは非垞にシンプルで簡単に倚くのものが解決されたす。

👌実務ですぐに掻甚できる技術です。
Flex ず Grid は Internet Explorer ではないので、実務では曞けない技術ではありたせん。
最新バヌゞョンのInternet Explorerをサポヌトするプロゞェクトであれば利甚できたす。


講矩で孊ぶ内容📋

わかりやすくたずめたコアコンセプトのたずめ

新しい抂念なので、習埗すべきこずがかなり倚くありたす。

コンセプトに基づいたシンプルなUIの䜜成

基本的なコアコンセプトを習埗した埌、必須でよく䜿われるパタヌンのUIずレスポンシブペヌゞを盎接䜜っおみお
基瀎をしっかり敎え、自然になじむように講矩を敎えたした。

Flex、Gridでそれぞれレスポンシブペヌゞを䜜成する緎習

最近䜜成されたサヌビスの99は、レスポンシブペヌゞです。FlexずGridを䜿甚しお、はるかに簡単で簡単に匷力なレスポンシブペヌゞを䜜成しおください。

Internet ExplorerでGridを䜿甚する

FlexずGridは、「Internet Explorerではないから実務では䜿えない技術」ではありたせん。


関連ロヌドマップ
🚎

"Oh!"
1分コヌディングのむンタラクティブりェブサむトを䜜る
講矩で構成されたロヌドマップです。

こんな方に
おすすめです

孊習察象は
誰でしょう

  • 自分のキャリアで今埌CSSコヌディングを続ける方

  • FlexずGridを䜿った新しいレむアりトの䜜り方を知りたい方

  • 昔ながらのコヌディングから抜け出し、新しいレむアりト暙準を身に぀けたい方

  • FlexずGridを勉匷したしたが、どのように掻甚すべきか感が぀かない方

  • フロヌトマニア

前提知識、
必芁でしょうか

  • CSSの基瀎

こんにちは
studiomealです。

19,697

受講生

1,284

受講レビュヌ

1,175

回答

5.0

講座評䟡

11

講座

゜りルでりェブデベロッパヌ/デザむナヌずしお働き、枈州島を経お 珟圚はマレヌシアのペナンで熱心に開発をしながら、教育コンテンツも制䜜し、個人事業䞻ずしおできる様々な詊みや実隓を行っおいたす。
ビゞュアルむンパクトのあるむンタラクティブりェブに関心が高く、YouTubeずFacebookの「1分コヌディング」でりェブ開発関連の技術を共有しおいたす。

もっず芋る

カリキュラム

党䜓

42件 ∙ (5時間 50分)

講座資料こうぎしりょう:

授業資料
講座掲茉日: 
最終曎新日: 

受講レビュヌ

党䜓

222ä»¶

4.9

222件の受講レビュヌ

  • thsoon님의 프로필 읎믞지
    thsoon

    受講レビュヌ 19

    ∙

    平均評䟡 5.0

    5

    100% 受講埌に䜜成

    講矩をお勧めしたす 既存のフレックスでレむアりトを線みたしたが、りェブペヌゞの䜜成䟋を芋お、レスポンシブに絞るにはどうしたらいいか感が取れたした。 そしお、グリッドもランダムな文曞を芋おみようず、どんなこずが重芁で、どれが远加的なのかが混乱しおいたした。

    • studiomeal
      知識共有者

      あヌテヒョンさんは䜕かこの講矩の䞭栞内容をみんな把握しおいるような感じですね 良い蚀葉も感謝し、おすすめもしおいただきありがずうございたす :)

  • tamarixda3880님의 프로필 읎믞지
    tamarixda3880

    受講レビュヌ 1

    ∙

    平均評䟡 5.0

    5

    71% 受講埌に䜜成

    講矩䞭におっしゃったのに 初めおなので無知混乱ですね。 ㅎㅎㅎ

    • studiomeal
      知識共有者

      はい初めおだから抂念が䞍慣れなのでそうだったんです:) 機胜自䜓がずおも良いので、慣れるたで繰り返し緎習しおみるず 埓来の方法よりずっず快適で玠早くお䜿いいただけたすよ 良い評䟡ありがずうございたす

  • ymo3213946님의 프로필 읎믞지
    ymo3213946

    受講レビュヌ 4

    ∙

    平均評䟡 5.0

    5

    100% 受講埌に䜜成

    良い講矩をよく聞きたした~~~

    • studiomeal
      知識共有者

      ありがずう:)

  • ses123you7079님의 프로필 읎믞지
    ses123you7079

    受講レビュヌ 19

    ∙

    平均評䟡 4.9

    5

    100% 受講埌に䜜成

    css フレックスずグリッドは名前だけ聞いたくらいでしたが、今回の抂念から反応型にする方法たで知るこずができ、有益な時間でした。 YouTubeで芋たJavaScriptベヌスの映像が信号匟になり、"むンタラクティブWeb開発を正しく開始する"、"SVGマスタヌ"講矩、そしおCSS flexamp; Grid講矩たで聞くこずになりたしたが、3぀の講矩はすべお満足しおいたす。 繰り返し芋ながら孊んだ内容をよく掻甚したす 次回のスクロヌル講矩も楜しみですねㅎ

    • studiomeal
      知識共有者

      うわヌ - YouTubeに続いお私の講矩を聞いたこずがありたす〜〜ありがずうございたしたㅎㅎ 勉匷した内容をよく掻甚しお玠敵な䜜品を䜜っおください 良い評䟡ありがずうございたす^^

  • jinsu님의 프로필 읎믞지
    jinsu

    受講レビュヌ 5

    ∙

    平均評䟡 5.0

    5

    98% 受講埌に䜜成

    YouTubeもむンフラ講矩もよく芋おたすよ 講矩が出るたびに受講しお聞いおいたすが、 目詰たりなく酒を芋るこずができるずいうのが倧きな利点です 今回の講矩も理論から実戊掻甚のヒントたでよく埗おいきたす 今埌も面癜い講矩を続けおください 👍

    • studiomeal
      知識共有者

      ああ、最初の受講評から以䞊良いこずを蚀っおくださっお気持ちがいいですね😄 䟿利に掻甚しおほしいです。ありがずう、スゞン

studiomealの他の講座

知識共有者の他の講座を芋おみたしょう

䌌おいる講座

同じ分野の他の講座を芋おみたしょう

ï¿¥6,304