「Dart SassとBEM講座」を動画で受講できます

この講座は、動画で最新のDart Sassを学び、Sassを書いて理解し、理解度チェッククイズで覚えているか確認することでDart Sassへの理解を深めるための講座です。

Dart SassとBEM講座の概要

この講座の受講をおすすめできる方は「HTMLやCSSの基礎はできるようになったが、SassやDart Sassを学んだことはない」という方です。

講座ではVisual Studio Codeエディターを使用し、新しいCSSレイアウトプロパティなども使用しますので、「自分のHTMLやCSSの知識は古いのではないか」「モダンなコーディング手法を取り入れたい」と思っている方にもおすすめできます。

講座の概要

開催テーマ モダンなDartSassを基礎から学ぶ「Dart SassとBEM講座」
対象者(以下のどちらの方も対象です) HTML・CSSを学んだが、DartSassは未経験の方 昔Sassを使用したことがあるが、最近のDartSassは知らないという方
受講形式 ご自宅などで動画で受講(録画された動画)
受講費用 21,780円(税込)
お支払いは銀行振り込みまたはクレジットカード(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について日本語でわかりやすく提供することも目的の1つです。

Webコーディングスクール 体験レッスン受付中

そもそも、なぜSassを学ぶ必要があるのか

いくつかのアンケート統計を見ると、欧米だけでなく、日本でも80%程度のWeb制作者がSassなどのCSSプリプロセッサを使用しています。

85%の方がSassなどを利用すると回答

出典: トレンドまるわかり!2015年フロントエンドアンケート調査 | Yuhiisk (Sass + Less + Stylus + その他 = 約85%、使用しない = 約15%)

なぜ多くの方が使用しているかと言うと、素のCSSだけでは大規模な案件、つまりページ数の多いWebサイトを管理するのは難しいという事情があります。

また、1つの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講座体験動画お申し込み

※必ずパソコンのメールアドレスをご登録ください。ドコモなど携帯キャリアのメールアドレスはメールが届かない場合があります。
※outlook.com や hotmail.com などMicrosoftのメールサービスはメールが届かない場合があるため、別のメールアドレスをご利用ください。

正式なお申し込みはこちらから


受講料は21,780円(税込)

特定商取引法に基づく表示

内容に含まれるものは以下の通りです。

  • 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講座本編へのお申込みはこちら。授業は動画(録画)です。

※必ずPCのメールアドレスをご登録ください。ドコモやauなど携帯のメールアドレスでは重要な連絡が届かない場合があります。
※outlook.com や hotmail.com などMicrosoftのメールサービスはメールが届かない場合があるため、別のメールアドレスをご利用ください。

スキルや経験について

※3つのうち1つを選択してください。
※HTMLとCSSを使ってWebサイトを制作したことがない方は、この講座を受講される前に 「スマートフォン時代のWebコーディングスクール」 の受講をおすすめします。HTMLやCSSがよく分からない状態での受講はご遠慮ください。

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index