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

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

2019/11/10（日）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制作者200名〜300名を対象にしたアンケートでも、Sassなどを使用している方の割合は2016年には 63%、2017年には 68%、2018年には 74%と年々増加しています。

日本のWeb制作者でSassなどを使用している割合のグラフ

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

CSSの問題点

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

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

Sassでできること

近年は1つのHTML・CSSでスマートフォンからPCまで対応する「レスポンシブWebデザイン」という制作手法が主流になりつつありますが、その場合は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を書く方法を学ぶことができます。

SassとBEMを使用した旅館風Webページの制作

講座の最後には、SassとBEMを使用した作例として旅館風Webサイト制作を行います。

PC閲覧時のイメージ

▲旅館風Webページ・PC版制作例

スマートフォン閲覧時

ページ全体のイメージはこちらをクリックしてご覧ください。

▲旅館風Webページ・スマートフォン版制作例

講師紹介

庄崎大祐

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

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

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

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

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

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

必要なスキル

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

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

場所

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

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

stocker space

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

カフェスペース

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

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

渋谷までお越し頂くのが難しい場合、ご自宅にて動画+テキスト（Webブラウザーで見れる教科書）にて受講が可能です。
動画受講の場合、受講料金は銀行振り込みで2万円（税込）となり、ご質問はメールで可能です。

動画受講のお申し込みは、下記お申し込みフォームにてご質問欄に「動画受講希望」とお書きの上お申し込みください。

※動画受講は生放送ではなく録画した動画となります。通常は授業翌日から、期間制限なしでいつでも視聴頂けます。

ご興味ございましたら お問い合わせフォーム より「SassとBEM講座を動画受講したい」とお問い合わせください。

募集人数

8名〜20名程度を予定

受講料金

2万円（税込）

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

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

お申込み

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

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

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

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