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

2018/10/21（日）14:00-19:00

開催の背景

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

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

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

日本のWeb制作者200名〜300名を対象にしたアンケートでも、Sassなどを使用している方の割合は2016年には 63%、2017年には 68%、2018年には 74%と年々増加しています。

従って、これから先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デザイン入門講座
• 神速Photoshop [Webデザイン編]

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

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

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

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

必要なスキル

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

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

場所

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

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

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

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

募集人数

10名〜22名程度を予定

受講料金

2万円（税込）

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

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

お申込み

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