「1日で分かるSassとBEM講座」を開催します

下記日程に、HTML・CSSの基礎は分かっている方向けの「1日で分かるSassとBEM講座」を開催します。

2018/5/26（土）14:00-19:00

開催の背景

レスポンシブWebデザインやスマートフォン対応のため、CSSは複雑で管理しにくいものになってきています。
そこで、多くのWeb制作者はSassのようなCSS拡張メタ言語を使用しています。

欧米のWeb制作者を対象にした2015年9月のアンケートでは85%の方が「SassなどのCSS拡張メタ言語を使用している」と回答しました。

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

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

日本のWeb制作者を対象にしたアンケートでも、68%の方がSassなどのCSS拡張メタ言語を使用していると回答しています。

従って、これから先Sassを知らないままWeb制作の仕事はやりづらくなっていくと思われます。
そこで、「HTML・CSSの基礎は分かっているがSassのことをよく知らない」という方に向けた講座を行うことにしました。

CSSの問題点

CSSだけを使用して複雑で大規模なWebサイトを制作することは、不可能ではありませんがとても大変です。

また、変数や1行コメントといった、プログラミング言語では当たり前の機能もCSSには搭載されていません。

Sassでできること

レスポンシブWebデザインでは、スマートフォン用の画面サイズとPC用の画面サイズで異なるスタイルを適用したいということがあります。

そのような時、CSSであれば「スマートフォン用のスタイルを記述した後、PC用のスタイルを記述する」という書き方をすることが多いかと思います。以下はCSSのコードの例です。

1
2
3
4
5
6
7
8
9
10
11

/* スマートフォン向け */
.main-visual {
    width: 100%;
}
 
/* タブレット・PC向け */
@media (min-width: 750px) {
    .main-visual {
        width: 40%;
    }
}

これをSass（SCSS）で書くと、たとえば以下のように1箇所にまとめることができます。

1
2
3
4
5
6

.main-visual {
    width: 100%;
    @include pc {
        width: 40%;
    }
}

“min-width: 750px” のような記述も毎回することなく、1箇所にまとめておけるため、たとえば「ブラウザーの幅 750px で表示を切り替えていたものを 768px に変更する」といった場合も、1箇所の変更で済みます。

あるいは、以下のようにたくさんの色が使われているページがあったとします。

サンプル画像 青

これを以下のように、ページ全体の色を替えたいとします。

サンプル画像 赤

CSSで制作した場合、たくさんの箇所の色を変更する必要がありますが、Sassを使用している場合 たった1箇所のカラーコードを変更するだけ で済みます。

BEMとは

BEMとは、一言で言うなら「class名の命名規則」の一種です。

多くのSassの入門書や講座は「Sassだけ」を教えているものが多いですが、私はそれは非常にもったいないと思います。
Sassは、BEMとあわせて使用することで分かりやすいHTMLとCSSを書き、長期的に運用しやすくなります。

この講座では、SassとBEMを組み合わせることで効率よくHTMLとCSSを書く方法についてもお話しします。

講師紹介

庄崎大祐

このブログを執筆している人です。「スマートフォン時代のWebコーディングスクール」などのHTML・CSSコーディングスクールや「WordPressカスタマイズ講座」などの講師をしています。

以下の本の執筆もしています。

以下のイベントで講演しています。どれも現役Web制作者向けのセミナーとして人気のあるものです。

  • CSS Nite（テーマ: Webデザインで使うPhotoshop）
  • WordCamp（テーマ: WordPressでブログをデザインするときに気をつけていること）

必要なもの・場所・料金等

  • ノートパソコン（Windows PC または MacBook）

必要なスキル

  • HTML・CSSでWebサイトの制作ができること

※HTML・CSSに自信が無い方は、先に「スマートフォン時代のWebコーディングスクール」の受講をご検討ください。

場所

渋谷駅より徒歩7分の Stocker.jp / Space にて行います。

住所: 東京都渋谷区桜丘町11-11 ライオンズマンション桜丘 403号室（Google マップ）

stocker space

スクール形式で最大29名座ることができます。
奥のスクリーンは、約150インチのワイドスクリーンです。

カフェスペース

これは、奥から入口側を撮影した写真です。入口側はカフェスペースとなっており、色々なドリンクが飲めるほか、Web関係の書籍を読んだり、講師に1対1で質問したり相談するときなど、ゆっくり話せるようにしています。

渋谷に行くことが難しい、日程が合わない場合は

渋谷までお越し頂くのが難しい場合、ご自宅にて動画+テキスト（Webブラウザーで見れる教科書）にて受講が可能です。受講料金は同じで、ご質問はメールで可能です。
ご興味ございましたら お問い合わせフォーム より「SassとBEM講座を動画受講したい」とお問い合わせください。

募集人数

10名〜22名程度を予定

受講料金

2万円（税込）

※ 受講料金は現金にて会場払いです。

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

お申込み

この講座のお申し込みは締めきりました。

ご興味ある方は、こちらをクリックしてメール登録 していただければ、次回開講の際お知らせします。

今すぐ受講したいという方は、お問い合わせページにて「SassとBEM講座の動画受講希望」とメッセージを頂ければご自宅で動画での受講も可能です。

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