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

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

★図

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

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

なぜDart Sassなのか

これまで使用されていたSassはRuby Sass、LibSassなどがありますがこれらは廃止され、今後はDart Sassに一本化されることが決まっています。

Dart Sassはこれまで使用されていたSassとは書き方が違うところも多いため、日本語の解説資料が必要とされていますが、本講座の公開時点では日本語のDart Sassの解説書は書店で売られていません。

この講座はDart Sassについて日本語でわかりやすく提供することも目的の１つです。

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

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

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

出典: トレンドまるわかり！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を書く方法を学ぶことができます。

新しいCSSも学べる

実習ではflexboxやCSSグリッドレイアウトなど、最近使用されるようになった比較的新しいCSSプロパティも積極的に使用します。

その他この講座で学べること

  • 現在Web制作者の間でもっともシェアが高いテキストエディターである「Microsoft Visual Studio Code」の使い方
  • 素早くHTMLやCSSを記述するための「Emmet」拡張機能の使い方

気になる方は、体験レッスン動画を視聴できます。

この講座が気になる方は、以下のフォームにメールアドレスを入力していただければ講座の途中までの動画を「無料」で視聴可能です。
※動画は生放送ではなく、録画した動画を視聴いただけます。

Dart SassとBEM講座体験動画お申し込み

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

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

受講料は19,800円（税別）

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

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

  • 5〜17分程度の動画約22本（動画体験・VSCode入門含む）
  • 理解力チェッククイズ
  • 実習に必要なファイル

具体的な内容は以下の通りです。

Visual Studio Codeの初期設定と使い方

  • 基本的な使い方
  • 便利な拡張機能の紹介

Dart Sassの概要と実習の準備

  • スライド: Sassとは何か？
  • 実習の準備
  • 実習で使用するファイルの解説

実習

  • サンプルページを制作しよう
  • Sassファイルを書いてみよう
  • ルールセットをネストしよう
  • メディアクエリとFlexbox
  • ここまでのおさらい
  • Sassを使ったカラーテーマの変更
  • 配色の練習のためのページを作ろう
  • Sassで色を変更しよう
  • スライド: CSSの命名規則とは
  • BEMを使ってみよう 1
  • BEMを使ってみよう 2
  • @mixinの書き方 1
  • @mixinの書き方 2
  • @mixinの書き方 3

お申し込みではなくご質問のみある方は、以下のお申込みフォームではなく お問い合わせフォーム よりお願い致します。

Dart SassとBEM講座お申し込み

Dart SassとBEM講座本編へのお申込みはこちら。授業は動画（録画）です。

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

スキルや経験について

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

If you like this article click the Facebook “Like” button to share it with your friends!