この講座は、動画で最新の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について日本語でわかりやすく提供することも目的の1つです。
そもそも、なぜSassを学ぶ必要があるのか
いくつかのアンケート統計を見ると、欧米だけでなく、日本でも80%程度のWeb制作者がSassなどのCSSプリプロセッサを使用しています。
出典: トレンドまるわかり!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を書く方法を学ぶことができます。
新しいCSSも学べる
実習ではflexboxやCSSグリッドレイアウトなど、最近使用されるようになった比較的新しいCSSプロパティも積極的に使用します。
その他この講座で学べること
- 現在Web制作者の間でもっともシェアが高いテキストエディターである「Microsoft Visual Studio Code」の使い方
- 素早くHTMLやCSSを記述するための「Emmet」拡張機能の使い方
気になる方は、体験レッスン動画を視聴できます。
この講座が気になる方は、以下のフォームにメールアドレスを入力していただければ講座の途中までの動画を「無料」で視聴可能です。
※動画は生放送ではなく、録画した動画を視聴いただけます。
Dart SassとBEM講座体験動画お申し込み
正式なお申し込みはこちらから
受講料は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講座本編へのお申込みはこちら。授業は動画(録画)です。