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

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

2017年8月20日(日) 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のことをよく知らない」という方に向けた講座を行うことにしました。

Sassとは

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

また、変数や1行コメントといった、プログラミング言語では当たり前の機能も

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で質問したり相談するときなど、ゆっくり話せるようにしています。

募集人数

12名〜22名程度を予定

受講料金

2万円(税込)

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

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

お申込み

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

1日で分かるSassとBEM講座お申し込み

お申込みはこちら。受講料は2万円です。
授業は 2017年8月20日(日) 14:00-19:00 の全5時間です。

※必ずPCのメールアドレスをご登録ください。ドコモやauなど携帯のメールアドレスでは重要な連絡が届かない場合があります。
※Hotmailは自動返信メールが届かないことがあるため、他のメールアドレスをご利用ください。

スキルや経験について

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

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