강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Development

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)が別途添付されているので、理論学習後に理論を活用した応用例を作成することができます。

  • codingworks
3시간 만에 완강할 수 있는 강의 ⏰
HTML/CSS
Sass
Flex

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

こんなことが学べます

  • 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 パブリッシングの基本

こんにちは
です。

12,580

受講生

739

受講レビュー

2,110

回答

4.9

講座評価

23

講座

■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704

カリキュラム

全体

13件 ∙ (1時間 15分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

11件

4.5

11件の受講レビュー

  • ggamjige8888님의 프로필 이미지
    ggamjige8888

    受講レビュー 13

    平均評価 5.0

    5

    100% 受講後に作成

    • 코딩웍스(Coding Works)
      知識共有者

      수강평 감사드립니다

  • system님의 프로필 이미지
    system

    受講レビュー 20

    平均評価 4.8

    5

    100% 受講後に作成

  • 안정은님의 프로필 이미지
    안정은

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

  • 호누룰루님의 프로필 이미지
    호누룰루

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    좋은 강의 감사합니다 도움이 되었어요

  • 투티니ෆ님의 프로필 이미지
    투티니ෆ

    受講レビュー 2

    平均評価 5.0

    5

    46% 受講後に作成

    정말 재밌고 유익합니다! 다른 강의들 다 듣고 마지막에 듣는데, 이 강의도 완전히 습득해서 잘 취직이 되었으면 좋겠습니다 ㅎ

¥2,677

codingworksの他の講座

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

似ている講座

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