inflearn logo
inflearn logo

SCSS(SASS) FLEX GRID コア理論(PDF) 教材及び掻甚䟋題

SCSS(SASS) FLEX GRID 핵심理論(PDF)ず掻甚䟋は、SCSS(SASS)、FLEX、GRIDの䜿甚に関する栞心的理論を分かりやすくたずめたPDF教材です。䞭䞊玚の出版スキルを目指しおいる方にずっお、SCSS(SASS)、FLEX、GRIDに察する理解床ず掻甚胜力は必須です。たた、出版業界ぞの就職や転職に倧きな競争力になるず思いたす。SCSS(SASS) FLEX GRID 핵심理論(PDF)だけでなく、理論掻甚䟋完成版(html、scss、css)が別途添付されおいるので、理論孊習埌に理論を掻甚した応甚䟋を䜜成するこずができたす。

難易床 初玚

受講期間 12か月

HTML/CSS
HTML/CSS
Sass
Sass
Flex
Flex
HTML/CSS
HTML/CSS
Sass
Sass
Flex
Flex
날개 달늰 동전

講座 を玹介しお、成長ず収益を埗たしょう

날개 달늰 동전

マヌケティングパヌトナヌズ

講座 を玹介しお、成長ず収益を埗たしょう

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

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

4.6

5.0

투티니ෆ

46% 受講埌に䜜成

本圓に面癜くおお埗です他の講矩を聞いお最埌に聞いおいたすが、この講矩も完党に習埗しおよく就職になっおほしいです。

5.0

webp001

100% 受講埌に䜜成

川のいいねㅎㅎ圹に立ちたす

5.0

swtm

92% 受講埌に䜜成

ずおも楜しく芋おいたす

受講埌に埗られるこず

  • SCSS(SASS) の必須の栞心理論

  • FLEX 必需の栞心理論

  • GRID の必須の栞心理論

  • CSS(SASS) FLEX GRID 핵심理論(PDF) 理論を掻甚した䟋完成版

䞀段階跳び䞊がるりェブパブリッシング
コヌディングワヌクスでコアを敎理しおみおください。

SCSS(SASS) + FLEX + GRID?

䞭䞊玚以䞊のパブリッシング胜力を備えるために
SASS + FLEX + GRIDに粟通しおいる必芁がありたす。

💡映像コンテンツではなく、教材PDFダりンロヌドコンテンツです。

  • SCSSSASSコア理論PDFず掻甚䟋
  • FLEXコア理論PDFず掻甚䟋
  • GRIDコア理論PDFず掻甚䟋
  • 䞭䞊玚パブリッシングスキルのためのコア理論曞PDF教材ずサンプルファむルダりンロヌドコンテンツ
  • 印刷しお本で芋おも遜色のない高画質PDF教材

💡 SCSS(SASS) FLEX GRID コア理論(PDF)講矩コンテンツ構成

  • SCSSSASSコア理論倉数、ネスト、@minxin、条件文 - 67ペヌゞ
  • FLEXコア理論芪芁玠子芁玠䜿甚属性 - 36ペヌゞ
  • GRIDコア理論゜ヌト、グリッドテンプレヌト、repeat、minmax - 66ペヌゞ
  • GRID掻甚実践䟋Holly Grailレむアりト、メディアク゚リ - 19ペヌゞ
  • SCSS+FLEX+GRID 掻甚䟋 html ファむル - 233 個
  • ダりンロヌドファむル総容量27メガ

💡 SCSS(SASS) FLEX GRID コア理論PDF教材の利点

  • PDFでコアだけが䜜られおいるので、玙本よりもはるかに効率的な孊習が可胜です。
  • 垂䞭教材でSCSSSASS、FLEX、GRID理論を扱う本はほずんどありたせん。
  • コヌディングワヌクスがすべおの講矩゜ヌスを盎接補䜜しお䜜ったので理解しやすく説明されたした。


📚 SCSS(SASS) コア理論教材(PDF) 授業内容

第01ç« SCSSSASSの玹介ず蚭定

  • SCSSSASSを䜿甚する理由ずSASSずSCSSの違い[動画参照]
  • コンパむルCompileずCSSプリプロセッサPreprocessorずは [映像参照]
  • SCSSラむブHTMLプレビュヌ蚭定 with Visual Studio Code [ビデオノヌト]
  • ビゞュアルスタゞオコヌドでLive Sass Complierを䜿甚する[ビデオノヌト]
  • Visual Studio CodeのLive Sass Compilerでmapファむルを生成しない
  • Visual Studio Code の Live Sass Compiler で Vendor Prefixes しない
  • Live Sass Compilerで4぀の方法でCSSフォヌマットを蚭定する
  • Live Sass CompilerでコンパむルされたCSS空行を取り陀く

Chapter 02) SCSS コア理論

  • ビゞュアルスタゞオコヌドでSCSSを始めよう
  • セレクタの入れ子(Nesting)ずはコメント(Comments)
  • ネスト (Nesting) - 芪セレクタ参照 (&)
  • 冗長セレクタ (Duplicate Siblings Selector)
  • ネスト - 芪芁玠参照特殊セレクタ
  • ネスト (Nesting) - ネストを倖す @at-root
  • ネスト (Nesting) - CSS 属性を短瞮圢ずしお䜿甚する
  • 倉数(Variables)の䜿甚
  • 倖郚ファむルSCSSにむンポヌト@Import
  • SCSSで挔算を䜿甚する - 算術挔算子、比范挔算子、論理挔算子
  • グルヌプ再利甚宣蚀 @mixin
  • 宣蚀された@mixinを䜿甚@include、@mixinぞのパラメヌタ、匕数
  • セレクタのスタむルを取埗する@extend
  • プレヌスホルダヌセレクタヌ
  • @mixinず@includeを䜿甚するずきにコヌドの重耇を枛らすコンテンツブロック@content
  • 条件文if
  • 耇数条件文 @if, @else if, @else
  • 繰り返しステヌトメント
  • 繰り返し文@each
  • デヌタ型

第03ç«  SCSS理論の掻甚䟋

  • 条件文@ifを䜿甚しおモバむルでパディングを調敎する
  • 条件文@ifを利甚しお仮想クラスafterに文字列を出力する
  • 䞻芁なCSSセレクタ、䞻芁な仮想クラスを掻甚する
  • @importでreset.scssに接続する
  • @mixinを入れ子にしおテキストをフォヌマットする
  • @mixin配列Arrayに匕数を䜿甚し、@includeで匕数を返す
  • よく䜿う゚フェクトを@mixinし、@includeで再利甚
  • 特定のセレクタCSSプロパティを取埗する@extendを䜿甚しおCSSデザむンを再利甚する
  • プレヌスホヌルドセレクタでCSSセレクタを接続遞択子に敎理する
  • @mixinでパラメヌタを利甚しおさたざたなBorder Radiusを䜜成する
  • セレクタネストNestingキヌワヌドを䜿甚しおhtmlレむアりト構造を䜜成する

⚡ SCSS(SASS) 教材孊習前 [必須事項]

次の内容をぜひご確認ください

1本SCSSSASS講矩PDF教材は、Rubyなど呜什方匏の授業内容ではありたせん。
2すべおの蚭定ず実践はVS CodeずLive Sass Compiler Extensionを䜿甚したす。 Rubyのむンストヌルず蚭定、呜什に関する内容はたったくありたせん。
3)関数(function)ず組み蟌み関数(built-in function)の内容は扱いたせん。


📚 FLEX コア理論教材(PDF) 授業内容

Chapter 01) 芪芁玠に曞き蟌む属性

  • display: flex
  • justify-content
  • align-items
  • flex-direction
  • フレックスラップ
  • align-content

Chapter 02) 子芁玠に曞き蟌む属性

  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • order
  • align-self
  • 子芁玠を䜿甚するマヌゞン属性

Chapter 03) Flex 適甚䟋

  • レむアりト1垂盎䞭倮氎平䞭倮のネストで䜿甚する
  • レむアりト2 - 芪子でネストされたdivを氎平に配眮する
  • レむアりト(3) – 䞊郚ナビゲヌションの䜜成
  • レむアりト(4) – セマンティックタグレスポンシブレむアりト


📚GRIDコア理論教材PDF授業内容

Chapter 01) GRID コア理論 – 芪芁玠(Container)に䜿う属性(1)

  • [必読]グリッドグリッド氎平、垂盎、テンプレヌトを理解する
  • display: grid / display: inline-grid
  • grid-template-columns
  • grid-template-rows
  • grid-column-gap/grid-row-gap/grid-gap
  • [必須] Grid゜ヌト属性の理解
  • justify-items
  • align-items
  • justify-content
  • align-content

Chapter 02) GRID コア理論 – 子芁玠(Grid Item)に䜿う属性

  • justify-self/align-self
  • [必読] グリッド属性のための必須抂念 (line Number)
  • grid-column-start/grid-column-end/grid-column
  • grid-row-start / grid-row-end / grid-row grid-column + grid-row
  • grid-area
  • z-index
  • grid-row
  • order

Chapter 03) GRID コア理論 – 芪芁玠属性 + 子芁玠属性

  • grid-template-areas ず grid-area #01
  • grid-template-areas ず grid-area ず grid-row
  • grid-template-areas ず grid-area #02
  • grid-template-areas ず grid-area #03, #04, #05
  • 芪芁玠に.item 9個を配眮する #01 – バッチ䞀括適甚
  • 芪芁玠に.item 9個を配眮する #02 – バッチ䞀括適甚
  • 芪芁玠に.item 9個を配眮する #03 – バッチ䞀括適甚
  • 芪芁玠に.item 9個を配眮する #04 – 配眮個別適甚
  • 芪芁玠に.item 9個を配眮する #05 – 配眮個別適甚
  • grid-template-columns, grid-template-areas, grid-area

Chapter 04) GRID コア理論 – 芪芁玠(Container)に曞き蟌む属性(2)

  • repeat数、サむズ
  • minmax最小倀、最倧倀
  • min-content 自動的に最小幅調敎
  • repeat, minmax, min-content 重耇を掻甚
  • auto-fill、auto-fitを䜿甚しおいない堎合
  • auto-fillを䜿甚した堎合
  • auto-fillずauto-fitの違い
  • grid-auto-flow



💬PDF教材孊習前必須事項

Q. 映像コンテンツはSCSSの䜿い方 むンストヌル映像のみありたすか

本講矩は電車本PDFコンテンツです。 Visual Studio Code で Live Sass Compiler をむンストヌルする内容 SCSS コア理論パヌトに詳しく蚘茉されおいたすが、どうしおもなじみのない郚分なので、映像で圹立぀ようにこの郚分は映像で補䜜されたした。 Visual Studio CodeでLive Sass Compilerをむンストヌルできないず、次の内容をたったく続くこずができないため、本ずビデオでぜひ蚭定するこずができるようにする目的です。

Q. Flexコア理論教材ずGridコア理論教材は他の講矩に含たれおいたせんか

はい。フレックスコア理論教材ずグリッドコア理論教材は、その講矩の受講生に提䟛されたす。今回のSCSS(SASS) FLEX GRID 栞心理論(PDF)は映像ではなく栞心理論教材だけで孊習される方のために䜜られた講矩です。 Flex講矩ずGrid講矩を受講された方は該圓教材が含たれおいるので重耇しおSCSS(SASS) FLEX GRIDコア理論(PDF)講矩を受講する際にぜひ参考にしおください。


❀コヌディングワヌクスの受講生に来たパブリッシャヌ合栌ニュヌス


▲囜費支揎パブリッシング過皋 私に4ヶ月半ほど孊んだ孊生ですが、就職したずカトクが来たした。


▲コヌディングワヌクス個人ポヌトフォリオ制䜜オフラむン講矩受講生の面接就職結果カトクを受けたした。 (2023.4.24)

❀コヌディングワヌクスの受講生がパブリッシャヌ就職埌に送っおくれたメヌル

 

先生こんにちは:)

先生 Inflearn 講矩を聞いた孊生キム・オゞョンです。
今倏のプラむベヌトポヌトフォリオに関しおアドバむスを埗ようずメヌル送信した孊生です。
芚えおいたすか😊😊

盞違ではなく、
先生にアドバむスを埗たポヌトフォリオでパブリッシャヌ就職成功したずいうニュヌスを䌝えようずメヌルを送りたす

でも
人に茉せたポヌトフォリオを芋お䌚瀟偎から先に連絡が来お、ズヌムで面接を芋お合栌したした
䌚瀟偎では垌望幎俞を合わせおデザむン、開発業務をしない本圓にパブリッシャヌ仕事だけができる䌚瀟に入るようになりたした。

キャリア職のパブリッシャヌを求める䌚瀟でしたが、新入瀟員に連絡が来お、なぜ私に連絡を䞎えたのかず聞いおみたした。
他の人のポヌトフォリオもたくさん芋たしたが、私のポヌトフォリオで芋た「機胜定矩曞」が目立っお連絡をいただきたした

これはみな先生の講矩のおかげだず思いたす。
先生の講矩を聞かなかったら、私もちょうど普通のポヌトフォリオになりたしたが、先生が蚀っおくれた蜂蜜のヒントで就職に成功するこずができたした

実際にはお䌚いできたせんが、
ポヌトフォリオを䜜る䞭、先生の講矩を芋ながらずおも頌りにしお信じお頑匵りたした

孊園で長い時間の授業を聞きながら積み重ねた実力より先生の講矩を聞いおポヌトフォリオを䜜った3ヶ月間の実力がすごく䞊昇したこずが感じられたす

切に欲しかったし、
先生がおっしゃっおいた通り信じおいたら、本圓に良い結果が出たした。

本圓にありがずうございたした

コロナに泚意しおください。
たた良い講矩で䌚いたいです:)


先生こんにちは〜Inflearn受講生OOOです〜メヌルアドレスは他の受講生の回答芋おわかりたした..😊😊

ありがずうご挚拶お願いしたす

これたで先生講矩受講しお2週間ほど履歎曞を芋ながら苊劎しおしたいたした。
䌚瀟䞀面面接に合栌しお出勀するこずにしたした。 本圓にありがずうございたした。

実は私が幎霢が32歳だから心配が倚かったです。
しかし、この䌚瀟の人事担圓者が、本人は孊園出身は悪いず蚀っおいたしたよ😊😊
私が入瀟するこずにした䌚瀟は小さいですが、開発者もあり、りェブデザむナヌもいたす。
3ヶ月間教育させ、実務に投入する食事だったんです。
距離も少しあり、幎俞も䜎かったけど..䞀生懞呜孊んで幎俞を䞊げおみようよ 😊😊

その間、本圓にありがずうございたした。質問の回答もよくしおくれおこんなにオンラむンで講矩をしお就職になるからずおも䞍思議ですね。

これからも先生の講矩を聞きながら実力を増やしながら勉匷したす。ファむティング

🙋🏻‍♂質問する前に必ず読んでください〜

孊習しながら質問がある堎合は質問しおください。ご質問の際にはいけない内容ずコヌド、ブラりザ結果画面のキャプチャを投皿しおください。コヌドの堎合は、HTML、CSS、JSのコヌドをすべおアップロヌドしおください。

質問文にコヌドなしでグロヌだけ問題を説明すれば、本圓に簡単ではないず正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコヌドずブラりザのキャプチャをアップロヌドしおください〜」ず返信する必芁があり、最終的に解決策を埗るのに面倒で時間がかかりたす。


▲該圓の講矩コミュニティのよくある質問の芋方をたず確認しおください〜

⚡効果的な孊習のためにぜひコヌディングワヌクスパブリッシングYouTubeを参照しおください。

コヌディングワヌクスパブリッシングYouTubeチャンネルで理論映像講矩ず䞊行しおください。もちろん、すべおの理論映像がYouTubeチャンネルにあるわけではありたせんが、重芁な理論映像はほずんどありたせん。映像が倚いので、映像を探す方法は以䞋の䟋のように怜玢するこずをお勧めしたす。

コヌディングワヌクスパブリッシングYouTubeチャンネル https: //www.youtube.com/codingworks

👚🏌‍🏫知識共有者の玹介

コヌディングワヌクス

■[珟圚]フリヌランサヌフロント゚ンドパブリッシャヌ
■[珟圚] HTML+CSS+JQUERY パブリッシングYouTubeチャンネル「コヌディングワヌクス」運営
■グリヌンコンピュヌタアカデミヌりェブパブリッシング講垫
■ダヌゞョりンコンピュヌタアカデミヌWebパブリッシングむンストラクタヌ
■もうコンピュヌタアカデミヌWebパブリッシング講垫
■フロント゚ンドパブリッシャヌ、フロント゚ンドパブリッシング専門講垫
■UI/UX Webデザむンポヌトフォリオ講矩
■りェブデザむン機胜士実技資栌講座講矩
■むヌゞヌ゚デュヌフロント゚ンドUI/UXデザむンパブリッシング
🌏コヌディングワヌクスパブリッシングYouTubeチャンネル - https://www.youtube.com/codingworks
🌏 コヌディングワヌクス Inflearn ブログ - https://www.inflearn.com/users/@codingworks/blogs

scss, sass, flex, grid, html, css, html/css, website, りェブパブリッシャヌ, パブリッシャヌ就職, りェブサむト, コヌディング, coding, jquery, javascript, ゞェむコヌリヌ, JavaScript, レむアりト, むンタラクティブりェブ, interactive web, webデザむン、りェブデザむン、ポヌトフォリオ、パブリッシング、レスポンシブりェブ、りェブデザむン機胜士実技詊隓、ブヌトストラップ、ブヌトストラップ、cssフレヌムワヌク、フレヌムワヌク

こんな方に
おすすめです

孊習察象は
誰でしょう

  • SCSS(SASS) FLEX GRID の基本理論を孊習したい方

  • 䞭䞊玚の出版を目指しおいる方

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

  • HTML+CSS パブリッシングの基本

こんにちは
codingworksです。

12,959

受講生

775

受講レビュヌ

2,119

回答

4.9

講座評䟡

23

講座

■ [珟圚] 囜費パブリッシングフロント゚ンド講垫
■ [珟圚] フリヌランス フロント゚ンドパブリッシャヌ
■ [珟圚] HTML+CSS+JQUERY パブリッシング YouTubeチャンネル「コヌディングワヌクス」運営
■ グリヌンコンピュヌタアカデミヌ りェブパブリッシング講垫
■ ザ・ゞョりンコンピュヌタアカデミヌ りェブパブリッシング講垫
■ むれンコンピュヌタアカデミヌ りェブパブリッシング講垫
■ フロント゚ンドパブリッシャヌ、フロント゚ンドパブリッシング専門講垫
■ UI/UX りェブデザむンポヌトフォリオ講矩
■ りェブデザむン技胜士実技資栌クラス講矩
■ むヌゞヌ゚デュ フロント゚ンド UI/UX デザむンおよびパブリッシング

 

🌏コヌディングワヌクス Inflearn 講矩䞀芧 - https://www.inflearn.com/users/@codingworks
🌏Inflearn コヌディングワヌクス 講矩孊習順序孊習ロヌドマップ - https://www.inflearn.com/blogs/2351
🌏コヌディングワヌクス Inflearn パブリッシングブログ - https://www.inflearn.com/users/@codingworks/blogs
🌏コヌディングワヌクス パブリッシング YouTube チャンネル - https://www.youtube.com/codingworks
🟣Inflearn In-focus コヌディングワヌクス むンタビュヌを芋る : https://www.inflearn.com/pages/infocus-8-20230704

もっず芋る

カリキュラム

党䜓

13件 ∙ (1時間 15分)

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

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

受講レビュヌ

党䜓

12ä»¶

4.6

12件の受講レビュヌ

  • ggamjige88889907님의 프로필 읎믞지
    ggamjige88889907

    受講レビュヌ 15

    ∙

    平均評䟡 5.0

    5

    100% 受講埌に䜜成

    • codingworks
      知識共有者

      受講レビュヌありがずうございたす。

  • wlskek6391님의 프로필 읎믞지
    wlskek6391

    受講レビュヌ 2

    ∙

    平均評䟡 5.0

    5

    100% 受講埌に䜜成

    良い講矩ありがずうございたした。

    • codingworks
      知識共有者

      受講しおくれおありがずう〜

  • teacher0061856님의 프로필 읎믞지
    teacher0061856

    受講レビュヌ 3

    ∙

    平均評䟡 5.0

    5

    100% 受講埌に䜜成

    • codingworks
      知識共有者

      受講評䟡ありがずうございたす

  • happyvirus77778679님의 프로필 읎믞지
    happyvirus77778679

    受講レビュヌ 32

    ∙

    平均評䟡 5.0

    5

    62% 受講埌に䜜成

    • codingworks
      知識共有者

      受講の感想ありがずうございたす。

  • junmibubu4757님의 프로필 읎믞지
    junmibubu4757

    受講レビュヌ 20

    ∙

    平均評䟡 4.8

    5

    100% 受講埌に䜜成

    • codingworks
      知識共有者

      受講評䟡ありがずうございたす

codingworksの他の講座

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

䌌おいる講座

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

ï¿¥2,797