この講座は、動画で最新のDart Sassを学び、Sassを書いて理解し、理解度チェッククイズで覚えているか確認することでDart Sassへの理解を深めるための講座です。
この講座の受講をおすすめできる方は「HTMLやCSSの基礎はできるようになったが、SassやDart Sassを学んだことはない」という方です。
講座ではVisual Studio Codeエディターを使用し、新しいCSSレイアウトプロパティなども使用しますので、「自分のHTMLやCSSの知識は古いのではないか」「モダンなコーディング手法を取り入れたい」と思っている方にもおすすめできます。
講座の概要
| 開催テーマ | モダンなDartSassを基礎から学ぶ「Dart SassとBEM講座」 | |
|---|---|---|
| 対象者（以下のどちらの方も対象です） | HTML・CSSを学んだが、DartSassは未経験の方 | 昔Sassを使用したことがあるが、最近のDartSassは知らないという方 |
| 受講形式 | ご自宅などで動画で受講（録画された動画） | |
| 受講費用 | 19,800円（税別） お支払いは銀行振り込みまたはクレジットカード（PayPal）がご利用頂けます。 |
|
| 受講に必要なもの | Windows PCまたはMac 必要な性能: VSCode、Chrome、YouTubeが動作するもの。現在販売されているほとんどのPCでは問題なく動作します。 レンタルノートPC等でのご参加もOKです。 |
|
| 受講に必要な知識 | HTMLやCSSの基礎を学んだことがある方。 ※まだHTMLやCSSを学んだことがないという方、この機会にモダンなHTMLやCSSを学び直したい方は Web制作の基礎から学べる「Webコーディングスクール」 の動画受講をご検討ください。 「Webコーディングスクール」は、HTMLやCSSの基礎だけでなく、このDartSass講座の内容もすべて含まれています。 |
なぜDart Sassなのか
これまで使用されていたSassはRuby Sass、LibSassなどがありますがこれらは廃止され、今後はDart Sassに一本化されることが決まっています。
Dart Sassはこれまで使用されていたSassとは書き方が違うところも多いため、日本語の解説資料が必要とされていますが、本講座の公開時点では日本語のDart Sassの解説書は書店で売られていません。
この講座はDart Sassについて日本語でわかりやすく提供することも目的の１つです。
そもそも、なぜSassを学ぶ必要があるのか
いくつかのアンケート統計を見ると、欧米だけでなく、日本でも80%程度のWeb制作者がSassなどのCSSプリプロセッサを使用しています。
出典: トレンドまるわかり！2015年フロントエンドアンケート調査 | Yuhiisk （Sass + Less + Stylus + その他 = 約85%、使用しない = 約15%）
なぜ多くの方が使用しているかと言うと、素のCSSだけでは大規模な案件、つまりページ数の多いWebサイトを管理するのは難しいという事情があります。
また、１つのHTMLとCSSでPCやタブレットスマートフォンなどさまざまなデバイスに対応する「レスポンシブWebデザイン」と呼ばれる手法でWebサイトを作ろうとすると、CSSでは管理が煩雑になるためSassを使いたいという方が多いです。
Web制作会社で働く時に、周囲の方がSassを使用しているのに自分だけCSSというわけにもいきません。
BEMとは何か
「BEM」とは、世界中で広く使われているCSSの命名規則です。
CSSの命名規則をもっと噛み砕いて言うと「class名の付け方のルール」です。
class名の付け方に一貫したルールがないと、他の方と一緒にコーディングをしづらいですし、他の方が案件を引き継ぎづらくなります。
BEM以外にも命名規則はいくつかありますが、BEMの特徴として「30分で理解でき、他の人に教えやすい」ということが挙げられます。
多くのSassの入門書や講座は「Sassだけ」を教えているものが多いですが、私はそれは非常にもったいないと思います。
Sassは、BEMとあわせて使用することで分かりやすいHTMLとCSSを書き、長期的に運用しやすくなります。
この講座では、SassとBEMを組み合わせることで効率よくHTMLとCSSを書く方法を学ぶことができます。
Dart Sassについてさらに学ぶための新コンテンツを追加
2023年2月に、以下のコンテンツ（動画+理解力チェッククイズ）を追加しました。
2023年2月以前に「Dart SassとBEM講座」を受講された方も、追加料金なしでこちらの新コンテンツをご覧頂けます。
- Sassで計算する
- @useによる外部SCSSの読み込み
- @forwardによる外部SCSSの転送
「Sassで計算する」について
Sassの解説書やセミナー等では「Dart Sassで割り算をするためには、math.div() という特殊な書き方が必要」と説明しているものが多いですが、必ずしもそうではありません。もっと分かりやすく、直感的な書き方ができます。
「@use」と「@forward」について
従来のSassでは外部ファイルの読み込みに @import を使用していましたが、@import は廃止され、代わりに @use や @forward を使用することになりました。
それらの使い分けや、そもそもなぜ @import から @use や @forward に乗り換える必要が出てきたのか？ということも分かりやすくお伝えします。
新しいCSSも学べる
実習ではflexboxやCSSグリッドレイアウトなど、最近使用されるようになった比較的新しいCSSプロパティも積極的に使用します。
その他この講座で学べること
- 現在Web制作者の間でもっともシェアが高いテキストエディターである「Microsoft Visual Studio Code」の使い方
- 素早くHTMLやCSSを記述するための「Emmet」拡張機能の使い方
気になる方は、体験レッスン動画を視聴できます。
この講座が気になる方は、以下のフォームにメールアドレスを入力していただければ講座の途中までの動画を「無料」で視聴可能です。
※動画は生放送ではなく、録画した動画を視聴いただけます。
Dart SassとBEM講座体験動画お申し込み
正式なお申し込みはこちらから
受講料は19,800円（税別）
内容に含まれるものは以下の通りです。
- 5〜17分程度の動画約30本（動画体験・VSCode入門含む）
- 理解力チェッククイズ
- 実習に必要なファイル（完成データを含む）
具体的な内容は以下の通りです。
Visual Studio Codeの初期設定と使い方
- 基本的な使い方
- 便利な拡張機能の紹介
Dart Sassの概要と実習の準備
- スライド: Sassとは何か？
- 実習の準備
- 実習で使用するファイルの解説
実習
- サンプルページを制作しよう
- Sassファイルを書いてみよう
- ルールセットをネストしよう
- メディアクエリとFlexbox
- ここまでのおさらい
- Sassを使ったカラーテーマの変更
- 配色の練習のためのページを作ろう
- Sassで色を変更しよう
- スライド: CSSの命名規則とは
- BEMを使ってみよう 1
- BEMを使ってみよう 2
- @mixinの書き方 1
- @mixinの書き方 2
- @mixinの書き方 3
- Sassで計算する 1
- Sassで計算する 2
- Sassで計算する 3
- @useによる外部SCSSの読み込み 1
- @useによる外部SCSSの読み込み 2
- @useによる外部SCSSの読み込み 3
- @forwardによる外部SCSSの転送 1
- @forwardによる外部SCSSの転送 2
お申し込みではなくご質問のみある方は、以下のお申込みフォームではなく お問い合わせフォーム よりお願い致します。
Dart SassとBEM講座お申し込み
Dart SassとBEM講座本編へのお申込みはこちら。授業は動画（録画）です。