プリプロセッサでお気楽サクサクCSS Sass (SCSS) 入門

フロントエンドエンジニアの佐藤あゆみ氏が解説する、CSSを楽に書き管理できるプリプロセッサ、Sass (SCSS) の導入と基本を学ぶ講座。

こんなことを学びます

ウェブページが高度化・複雑化すれば、伴ってCSSは冗長になるもの。
何度も同じ記述を繰り返したり、記述後の管理や再編集に手間取ったり。
そのような不合理性で、ウェブクリエイターは疲弊していました。

そこで登場したのが、CSSを合理的に記述し編集・管理するプリプロセッシングです。
CSSプリプロセッサを導入すると、楽に速くCSSを編集して管理することが可能になります。

今、CSSプリプロセッサで一番人気なのが、Sass。
Syntactically Awesome Style Sheetsのイニシャリズムで、「構文的にスゴいスタイルシート」の略語です。
そのSassの機能を、よりCSSに近い文法で記述できるようにした記法が、SCSS。

この講座では、ウェブクリエイター、フロントエンドエンジニアとして活躍している佐藤あゆみ氏を招き、初学者でも確実にその環境と導入から基本的な記法、日常のコーディング業務での応用実践まで包括的に学べます。

Sassを利用するば、すぐにでもCSSコーディングの負担は大きく軽減するでしょう。

もちろん習得後は、SassのなしでのCSSコーディングには戻れません。

※ この講座は、HTMLとCSSの基礎を習得している方を対象としており、HTMLやCSSの書き方そのものは解説しません。


● この講座で学べること
○ Sass (SCSS) の基本的な記述方法と扱い方
○ Visual Studio Code、Atom、Adobe DreamweaverでのSassの導入方法
○ Sass (SCSS) でのCSSの管理方法
○ Sass (SCSS) の実践的なコーディング方法


● この講座で得られること
○ Sass(SCSS)の書き方と扱い方の知識
○ 日頃のCSSコーディングの時間が短縮
○ ミスタイプによるエラーやバグの減少
○ 容易なCSSのセレクタ管理
○ BEMやRSCSSなどのCSS設計の導入準備(この講座では、BEMやRSCSSの解説は行いません)
○ ソースコードエディタ(Visual Studio Code,Atom,Dreamweaver)でSassをコンパイルできる環境
※ 学習教材や資料がある場合は、お持ち帰りいただけます。
※ 講座内で利用するデモなどのサンプルファイルがある場合は、ダウンロード可能です。
※ 各種受講証明書への署名・発行に対応します。

● この講座の特徴
○ ハンズオン講座ながら、手ぶらの聴講のみでもご参加可能なハイブリッド・ハンズオン形式です。
○ 実践的な知識や方法を、要点をまとめて、わかりやすく解説します。
○ 操作の解説は、デモンストレーションで実演して解説します。
○ 講義後に、質疑応答の時間を設けます。

● 協賛企業・ブランド
PentaPROgram < https://pentaprogram.tokyo/ >

#bauya
続きを読む

日程・開催時間を選ぶ

受付中 早割5%OFF

3月4日(水)

18:45 - 20:45

東京 / 銀座・大手町

予約締切日時

3月03日(火) 18:45 まで

参加人数

0/10人

開催場所

東京メトロ東西線 竹橋駅 徒歩2分
ちよだプラットフォームスクウェア ミーティングルーム001 東京都千代田区神田錦町3‐21 ちよだプラットフォームスクウェア 地下1階

価格(税込)

¥3,800

¥3,610

早割5%OFF

(早割残り3席)

  • 受付中 早割5%OFF

    3月4日(水)

    18:45 - 20:45

    東京 /銀座・大手町

    選択中 選択
  • 参加できる日程がありませんか?
    先生に開催リクエストを送ってみましょう!
    開催リクエストする
受けたい
18人が受けたい登録しています

この講座の先生

佐藤 あゆみのプロフィール写真
ウェブクリエイター,フロントエンドエンジニア

佐藤 あゆみ

PentaPROgram(ペンタプログラム) 代表 

2014年12月より、屋号「PentaPROgram(ペンタプログラム)」にてフリーランスとして独立。ウェブ専業ではない多様な業界の実情を見ながら、中小企業で「ウェブ担/パソコン担当さん」として業務を続けてきた経験を活かし、その後の運用を見据えたECサイトやコーポレートサイトの構築、技術サポートを行う。
2018年、初心者のためのウェブサイト高速化をテーマとして、ismおよびCSS Niteにて講演。 

書籍「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」(技術評論社)出版。 

https://pentaprogram.tokyo/ 

Twitter: @PentaPROgram

この講座の主催団体

BAU-YA

プロとプロを目指すクリエイターの学び舎、BAU-YA(バウ舎)。
アートやデザイン、ITやウェブなどの、トップクリエイターや著名講師による『いま、伝えたいこと』を、そのまま講座にして催します。


■ BAU-YAにある『技術系講座』と『知識系講座』の2つのスタイル

『技術系講座』は、ふんだんに実演デモを駆使するハイブリッド・ハンズオン講座。

制作の現場で必須のテクニックを学べます。

一緒に実習しながらでも、または聴講のみでも、どちらでも参加できるスタイル。
使用する学習サンプルは、受講後でもダウンロードして何度でも練習いただけます。

『知識系講座』はふんだんに図解で解説する座学講座。
業界人として必須の教養や情報を学べます。
スライドや資料などを見ながら、じっくり学ぶスタイル。
提示されるスライドや資料は、受講後でもダウンロードして何度でも復習いただけます。


■ BAU-YAが招聘する実力派講師陣

クリエイティブ業界の最前線で活躍している、経験豊富なク... もっと見る >>

主催団体に質問する 教室ページをみる
  • 当日の流れとタイムスケジュール

    ■ 開場時間
    開演15分前から

    ■ 所要時間
    約1.5–2時間程度(途中参加、途中退出も可能です)

    ■ 講座の流れ(予定)
    1. オープニング(BAU-YAおよび講座について説明,登壇者紹介など 約5分)
    2. 講義(約35–50分)
    3. 休憩(約5分)
    4. 講義(約35–50分)
    5. 質疑応答(約5分)
    6. エンディング(約5分)
    ※ 講義時間や時間割は、変更する可能性があります。
    ※ 予定よりも早く終了、または長引く可能性があります。
    • こんな方を対象としています

      □ 速く楽にCSSのコーディングをしたい方
      □ CSSを合理的に記述し管理したい方
      □ 現代的なCSSのコーディング手法を身につけたい方
      □ ステップアップしたい初心者のウェブコーダーやウェブデザイナーの方
      □ きっかけがなかったり、導入につまづいたりしてSassに手を出せなかった方
    • 受講料の説明

      参加費に、場所代や教材費などはすべて含まれています。
      参加費の他に、一切費用はかかりません。
      ※ 領収書はストリートアカデミーから発行・印刷することができます。 < https://support.street-academy.com/hc/ja/articles/201345225 >
    • 受講する際は以下をお読み下さい

      ■ ご持参いただくもの


      □ ハンズオン受講の方は、コンピュータをご持参ください。
      □ Visual Studio Code,Atom,Adobe Dreamweaverのうち、ご自身が使い慣れたソースコードエディタ

      ※ 聴講のみのご参加も可能です。
      ※ OSは問いません。
      ※ コンピュータの動作やソフトウェアなどの動作不良に関するサポートは行いません。
      □ 電源を使われる方は、電源タップをご持参ください。

      □ メモを取るための筆記用具やデバイスはご持参ください。

      ■ その他
      □ 講義中の録音などの一切の収録行為を禁じます。



      □ 講座内で配布する資料やファイルなどの一切の二次利用や再配布、無断転載などを禁じます。
      □ お名刺をお持ちでしたら、講座終了後に、登壇者や主宰者とご交換ください。
    ※ストアカでは全講座に保険が適用されます。詳しくはストアカ補償制度をご覧ください。

    レビュー

    • 5
    • 楽しかった!( 3 )
    • 勉強になった!( 4 )
    • 行く価値あり!( 4 )
  • M2

    男性 40代

    この講座は「Sassの仕組みと基本が学べる講座」でした

    Sassは何度か利用したことがあるのですが、時々普通にCSSを書くこともあり、どちらが良いのか悩むこともありました。

    講座では、Sassの基本とメリットがしっかり学べたので、今後もSassを使っていきたいと思います。

  • W1

    女性 30代

    この講座は「SASSの扉を自力で開く勇気が持てなかった初心者がはじめの一歩を踏み出せる講座」でした

    「あちこちで耳にするSASS。手をつけたほうが良いのはわかるけど他にも勉強しなきゃいけないことがあるし、なんか難しそうで腰が重い。」

    そんな初心者も、座っているだけでスラスラSASSの概要を理解できる講座だと思います。

    とても丁寧なPDF資料で軽快に進んで行きます。
    (スピードは初心者でもちょうど良いかんじ)

    200ページ近い資料は、中身がぎっしりというよりはSASSへの苦手意識をなくしてくれるような、やわらかいもので初心者にはとてもよかったと思います。

    実務でこの機能はあまり使わない、逆に絶対必須、など力の入れ具合もあわせて説明してくれるのがよかったです。

    「メディアクエリをミックスインにする」の項目のところで、特に説明がなくmap-get関数が使われており、講義後に読み返したら理解できず自力で調べました。
    が、そこは2時間弱という講義の限界かなと思います。自分で調べるきっかけになったのでよかったと思っています。

    突き詰めれば細かい知識はいろいろ必要だけど、まずは重要度の高いSASSの基本知識をかいつまんでわかりやすく理解できる、良い講座だと思いました。

    自分はこの講義でSASSへの苦手意識を少し克服できました。
    「実践で使えるようになるには具体的にどう勉強していけばよいか」という疑問は引き続き残っていますが、「SASSの教科書」もあわせて使いながらSASSでLPコーディングしてみたいと思います。

  • M3

    その他 40代

    この講座は「めっちゃやる気になれる!講座」でした

    Sassって何だろう?でもなんだかこれを知ってるとコーディングが楽になりそうな気配がする…という入門者レベルでPCも持たずに受講しました。
    結果、これスゴイ楽になってミスも減りそう〜やってみた〜い!という気持ちになった素敵な講座です。
    他の受講生さんは私よりは遥かにレベルが上とお見受けしましたが、こんな入門者でも理解が出来るよう噛み砕いて解りやすくご説明いただけた講義でした。
    ありがとうございました。

  • M3

    男性 30代

    この講座は「Sassで出来ること、便利になること、全体像や学習ロードマップを知ることができる講座」でした

    Sassについて「どうやら便利らしい」くらいの前提知識で参加しました。
    Sassの全体像やつまずきポイント、どうやって学習を進めていくのがおすすめかなどを知ることができました。業務でのSass導入を検討されている方、これから勉強していこうという方にオススメの講座です。

  • M2

    男性 40代

    この講座は「すごく、勉強になった講座」でした

    まだ、Sassは勉強を始めたばかりなので、「Udemy」の講座で言ってた‼️ぐらいのレベルですが、最低これだけ覚えておけば、仕事になる!とか、参考になることを生で聞けたのでよかったです。ありがとうございました。

  • この主催団体の他の講座

    関連講座

    この講座を見た人は、こんな講座も見ています

    お探しの講座が見つかりませんでしたか?