Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-01-16 15:32:47
30-Day Money-Back Guarantee
Development Web Development CSS

CSSを効率的に書く!フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~

登場してから10年余り、制作現場にも導入が進み、Web開発の現場では必須の技術となりつつある「Sass」。Sass(SCSS)を使えば効率的にCSSをコーディングできます。実務レベルで使えるSassを基礎から身につけよう!
Bestseller
Rating: 4.2 out of 54.2 (150 ratings)
1,149 students
Created by 宮崎 聡史
Last updated 1/2021
Japanese
30-Day Money-Back Guarantee

What you'll learn

  • Sassの基礎技術を身に付けることができます。
  • Sassの開発環境を用意し、Sassを使ったWebサイト制作が行えるようになります。
  • CSSを効率的に書くことができ、生産性を向上することができます。
  • CSSの品質管理、保守が楽になります。
  • モダンなWeb開発を行なっている現場で働くための技術が身につきます。
Curated for the Udemy for Business collection

Course content

11 sections • 58 lectures • 4h 58m total length

  • Preview02:56
  • Preview05:18
  • SassとSCSS
    05:06
  • 利用する技術・ツール
    02:18
  • Atomのインストール
    04:59
  • Node.js、npmのインストール
    08:17
  • Gulpのインストール
    05:52
  • はじめてのSass
    09:58
  • DreamWeaverの設定
    03:46
  • Preprosのインストール
    03:57

  • Preview05:20
  • 隣接セレクタ、間接セレクタ、直下セレクタ
    03:05
  • 親セレクタの参照
    04:41
  • プロパティのネスト
    03:54
  • メディアクエリのネスト
    04:31
  • @at-rootの使い方
    04:39
  • コメントの書き方
    02:23

  • 変数の基本
    05:19
  • 変数のスコープ
    04:55
  • 演算の基本
    07:36

  • ファイルの分割とパーシャル
    05:18
  • ネストインポート
    04:36
  • CSSのインポートとSassのインポート
    02:27
  • 基礎編のまとめ
    03:07

  • ミックスインの基本
    05:18
  • ミックスインへの引数の指定
    04:15
  • 複数の引数を指定するミックスイン
    04:52
  • 可変長引数
    06:55
  • ミックスインにコンテントブロックを渡す
    03:49
  • 継承の基本
    06:00
  • 複数継承と継承の連鎖
    04:02
  • ミックスインと継承の違いと使い分け
    05:13

  • 変数の型
    02:34
  • インターポレーション
    06:23
  • !defaultと!global
    05:37

  • 条件分岐
    05:45
  • 繰り返し処理
    06:32

  • 関数の使用
    03:15
  • 文字、数値処理関数
    03:36
  • 色処理関数
    03:09
  • 配列、マップ関数
    04:13
  • ユーザー定義関数
    07:09
  • デバッグ用ディレクティブ
    04:00

  • 総合フレームワーク
    05:39
  • 機能拡張系
    05:57
  • パーツ系
    01:49
  • レイアウト系
    02:00

  • 設定ファイルからGulp開発環境を作成する
    07:01
  • Sass Lint
    04:08
  • PostCSS
    06:46
  • 開発者ツールとソースマップ
    06:28
  • Sassを使った実際の開発(ネスト)
    09:08
  • Sassを使った実際の開発(変数と演算、関数)
    10:25
  • Sassを使った実際の開発(ミックスインと継承)
    10:25
  • Sassを使った実際の開発(制御ディレクティブ)
    10:45
  • Sassを使った実際の開発(レスポンシブ)
    08:35

Requirements

  • HTML5、CSS3の基礎知識
  • Javascriptの基礎知識

Description

【更新情報】
2021/1/17 Gulp 開発環境関連のレクチャーの動画、および添付資料を最新のバージョンに合わせて更新しました。


SassはCSSを拡張したメタ言語、CSSプリプロセッサであり、コードの再利用、変数、演算、関数、条件分岐などプログラミング要素をCSSに導入し、効率的で柔軟なコーディングを可能にした強力な言語です。

Sassが誕生してから10年余りが経ち、ある調査では開発者の60%以上がSassを使用しているという調査結果があるほど普及が進みました。この傾向は今後Sassを超える画期的な言語が開発されて普及するまで続くでしょう。CSSを生のまま書く現場は減っていき、当たり前のようにSassの技術が求められる時代になっています。

この講座では、CSS3の基本を習得済みの方が、ゼロからSassを学び、実践で使えるレベルまで習得することを目指しています。

プログラミングや黒い画面に苦手意識を持っている方でも大丈夫です。最初から全部の機能を使いこなす必要はありません。手順通りに、覚えた機能から少しずつ実戦投入していけばいいのです。

CSSを初めて覚えた頃を思い出して、楽しんで学んでいきましょう!

Who this course is for:

  • CSSは書けるが、Sassは初めてで興味のある方
  • 実際のサイト制作で使える、実務レベルのSassの技術を身に付けたい方
  • Sassをプロジェクトに導入したいと考えているフロントエンドエンジニアの方
  • 就職、転職の際に有利なスキルとして技術を身につけたい学生、社会人の方
  • 仕事でSassの技術を求められているデザイナー、コーダー、エンジニアの方

Instructor

宮崎 聡史
Webフロントエンドエンジニア
宮崎 聡史
  • 4.2 Instructor Rating
  • 205 Reviews
  • 1,459 Students
  • 2 Courses

Webフロントエンドエンジニア。

武蔵工業大学(現:東京都市大学)工学部機械工学科を卒業後、精密機械メーカーでサービスエンジニアとして電子通信機器のメンテナンス、サポート業務、Visual Basicによるアプリケーション開発などを行う。

2005年に退社。専門学校でWeb開発を半年間学び、少数精鋭のWeb制作会社に入社。Webサイト、Webアプリケーション、Adobe AIRを使ったデスクトップ・モバイルアプリケーションの開発などを行う。

フロントエンドエンジニア、アプリケーションエンジニアとして働いた後、2017年にフリーランスとして独立。
2019年にフィクセル株式会社にフルスタックエンジニアとしてジョイン。

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.