CSS設計・Sass研修【コンポーネント設計を身に付ける】

Sassの基礎的な技術の理解、実践を通してコンポーネント設計の考え方を習得する

本研修では、Sassの基礎的なコードを学んで実際に書くことで、CSSで重要な考えであるコンポーネント設計を、フロントエンド開発に携わるエンジニアが身に付けます。宣言型スタイル言語であるCSSは他言語に比べて設計手法が定着していません。Sassでの開発を通してより良い設計手法に基づいた開発のできるエンジニアを育成します。

リスキルIT研修3つの特徴

すべての研修が料金一律

すべての研修が料金一律

「もっと研修を」をコンセプトとしたリスキルでは、研修を実施しやすい環境づくりのために、明瞭価格で研修をご提供しています。

実践的で高品質な研修

実践的で高品質な研修

講師陣は豊富なビジネス経験と講師経験を併せ持っており、一社研修での講師満足度は5段階中、平均4.75という高水準を実現しています。

安心の研修準備フルサポート

安心の研修準備フルサポート

研修日の運用のみではなく、研修準備のサポートも受けることができます。例えば、研修で使う教材・備品は一式郵送で手元に届きます。そのため、研修の準備時間を減らしながらも良質な研修が実施できます。

CSS設計・Sass研修はオンライン研修に対応しています

研修コード:100355   更新日:

CSS設計・Sass研修の狙い

本研修は、現場で使えるSass開発を学び正しい設計を意識して開発できるエンジニアを育成することが狙いです。

本研修の対象

基本的な研修対象は以下のとおりです。研修により調整できるため、まずはお問い合わせください

フロントエンジニア、CSSを書く機会のあるエンジニア

CSS設計・Sass研修を実施すると

  1. Sassの基礎を学習して、正しい記法で見やすいコードを書けるようになる
  2. CSSとの違いを体験して、Sassを学ぶメリットを実感できるようになる
  3. Webpackの基本操作を身に付けて、Sassの実践的な使い方ができるようになる

リスキル CSS設計・Sass研修の概要

本研修では、Sassの基礎を学びながらその都度実際にコードを書くことで即戦力の技術を習得するのはもちろん、同じテーマへの複数のアプローチを知ることでその後の応用学習にも対応できる知識を身に付けます。

また各々がただ自由に書くのではなく、決められた設計手法に従って開発を行うことで、Sassに限らずCSS関連の技術で共通して重要な設計手法の考え方を養うことができます。ワークでは、反面教師としてバッドプラクティスを学ぶ「このコードのどこが問題か」や、Sassの記法と設計手法を同時に学べる「それぞれの設計手法にそって開発」を取り入れることで、即実務で使用することができます。

設計手法の考え方を理解し、正しいコードが書けるように集中的にトレーニングします。

本研修 3つの特徴

1. 基本的なSass開発と応用力のある知識を習得する

Sassの書き方を学ぶだけでは、単にその場しのぎの技術になりかねません。同じ結果でもそこに至るアプローチは複数あり、その中のバッドプラクティスも知ることで正しいコードを本質から理解できその後の応用に繋がります。

2. 設計手法の本質を理解し、あらゆる現場で広く使える考え方を養う

先人たちが試行錯誤を経て作り上げた設計手法はそれぞれに優れた点がありますが、すべてに使用できる万能な設計手法はありません。したがって自分に必要な手法を適宜使い分ける必要があります。そのためには本質の理解が欠かせません。

3. 他のエンジニアが見ても分かりやすいコードが書ける

正しい設計手法に則ったコードを書いていけば、担当者が変わっても引き継ぎやすく拡張・メンテナンスが容易になります。

想定研修時間

6時間 (変更が可能です)

CSS設計・Sass研修カリキュラム

下記、研修カリキュラムを元に、他研修を組み合わせてのアレンジにも対応しています。別途料金はかかりませんのでご安心ください。

1. CSS設計の問題点とその対処 【ゴール】CSS設計で何が問題となるのか、それにどう対処するのかを学ぶ
  • CSSの基本
  • CSSの問題点
  • CSSの破綻例
  • CSSセレクタの基本
  • セレクタの正しい使い方
  • ワーク:「このコードのどこが問題か」(例示されたコードの問題点を考える)
2. コンポーネント設計の重要性と注意点 【ゴール】CSSの問題点を解消するコンポーネント設計の考え方を学ぶ
  • コンポーネントとは
  • コンポーネント設計の利点
  • コンポーネント設計の様々なアイデア(OOCSS、SMACSS、BEM、MCSS)
  • Rule of three (早まった最適化はしない)
  • 開放/閉鎖の原則
  • 過剰な再利用はしない
  • 単一責任の原則
3. Sassの基本 【ゴール】Sassの記法を学ぶ
  • 変数、@mixins
  • ネスティング
  • 部分テンプレート、@import
  • Extend
  • 演算
  • ワーク:「CSSをSassで書き換える」(用意されたCSSコードをSassで書き直すことでSassの記法と利便性を学ぶ)
4. Sassでコンポーネント設計 【ゴール】代表的なコンポーネント設計をSassで実現
  • OOCSS、SMACSS、BEM、MCSSそれぞれの設計をSassで実現することで学ぶ
  • ワーク:「それぞれの設計手法にそって開発」
  • (それぞれの設計手法に基づいた課題を与え、Sassを使って開発)
5. webpackを学ぶ 【ゴール】モジュールバンドラを学ぶ
  • モジュールバンドラを学ぶ
  • webpackとは
  • webpackの様々な機能
  • ワーク:「webpackを使ってみる」(作ったSassファイルを使ってwebpackの機能を学ぶ)

研修金額

料金一律の明瞭価格で一社研修を実施することができます。想定研修時間と概算人数の情報のみで見積りをすぐにお送りします。

  • 後からの人数変更も無料で対応しています
  • 研修のアレンジにも追加料金はかかりません
  • オンライン研修でも追加料金無し。急遽変更でも料金変わらず対応可能です

CSS設計・Sass研修参加者の必須条件

特になし

研修提供地域

日本全国およびオンラインで研修を提供中
北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県

CSS設計・Sass研修のよくあるご質問

よくあるご質問の一覧>
オンラインCSS設計・Sass研修 詳細>

関連研修情報

当ページの研修はCSS設計・Sass研修の一社研修です。その他の研修や関連研修は下記より確認ください。

研修情報まとめページ

公開講座

  • 現在予定されている公開講座はありません

リスキルの研修は様々な企業様にご利用頂いています

研修実績

TOPへ

研修のお問い合わせはこちら

リスキルの社員研修に関する
お見積り、お問い合わせはこちらから

お電話はこちら

0120-299-194

0120-299-194

電話受付:月〜金 9:00-19:00(土日祝も研修実施)