7/23(Tue)

今日の生放送

【CSS設計】BEMを使った破綻しにくいHTML, CSSの書き方

【CSS設計】BEMを使った破綻しにくいHTML, CSSの書き方 -前編-

第1回:2015年8月21日公開

60min

【CSS設計】BEMを使った破綻しにくいHTML, CSSの書き方 -前編-

おためし受講する(5分)

コース概要

「BEM」という設計を考慮したコーディングスキルを学びます。CSSを一箇所ちょっと修正したつもりが、意図しない部分にまで影響してしまった、クラス名が思いつかなかったり、開発者間で付け方が違ったりしてカオスになる、無駄な記述をしてしまい、CSSがどんどん膨れ上がってくるなどのトラブルを回避することに繋がる設計方法です。

◆この授業を受けるにあたって必要な知識

・HTML,5 CSS3の基礎(必須)
・OOCSSなどのCSS設計についてのざっくりした知識(推奨)

こんな人にオススメ

長期にわたって崩れないHTML,CSSを書きたい方・BEMについて深く理解したい方

担当の先生

パーソナリティ

  • 廣松 あすか

    廣松 あすか

    スクー放送部

参加したい受講生 : 1359

カテゴリー

タグ

おかえり、デザインの学び場へ「The Designers Lounge」
月額980円で、4,600本以上の授業が見放題

授業リスト

【CSS設計】BEMを使った破綻しにくいHTML, CSSの書き方 -前編-

2015年8月21日公開

60min.

CSS設計方法論の1つである「BEM」について、徹底的に解説します!
(今回は全2回ある内の1回目の授業です)

◆「BEMとかCSS設計なんて知ってるよ!」という方もぜひ

BEMは数あるアプローチの中でも、何かと誤解が多かったり使いどころが難しい方法論です。

・SMACSSなど、他のルールと併用しようとしてカオスなことになってませんか…?
・命名ルール(Block__Element_modifier(key_value))を正確に理解していますか…?
・実際の開発でBEMを使うメリット、デメリットについて把握していますか…?

今回の授業ではこうした疑問を解消してまいります!

◆「BEM?なにそれ美味しいの?」という方もぜひ

BEMの知識を身につけておくことで「長期にわたって破綻しないHTML,CSS」を書くことができます!
このスキルを使ってコーディングすることで…

・CSSを一箇所ちょっと修正したつもりが、意図しない部分にまで影響してしまった
・クラス名が思いつかなかったり、開発者間で付け方が違ったりしてカオスになる
・無駄な記述をしてしまい、CSSがどんどん膨れ上がってくる

などのトラブルを回避することが期待できます!

また、BEMをはじめとする設計を考慮したコーディングスキルは、現場で大変必要とされているスキルです。
今や設計ができないと、大規模で複雑なWebサイトやアプリケーションはコーディングできません!

◆この授業を受けるにあたって必要な知識

・HTML,5 CSS3の基礎(必須)
・OOCSSなどのCSS設計についてのざっくりした知識(推奨)

後編までの宿題

+ ひな形のデータ「homework」(http://bit.ly/1hr20P9)内のファイルに沿って以下3つをBEMでマークアップし、zipにしてメールで送ってください
1. ナビゲーション

2. カード
3. ボタン

+ できるとこまででOKです

+ 送り先:kadai@schoo.jp

+ 件名:【課題提出】BEMを使った破綻しにくいHTML, CSSの書き方

+ 本文:とくになし(質問とかあれば書いて頂いても構いません)

+ 締切:9/4 23:59まで

スライド資料

【CSS設計】BEMを使った破綻しにくいHTML, CSSの書き方 -後編-

2015年9月9日公開

60min.

CSS設計方法論の1つである「BEM」について、徹底的に解説します
(今回は全2回ある内の2回目の授業です)

■こんな方におすすめです
・BEMは少し知ってるけど、詳しくはない
・BEMを実務で使いたいけど、上手くいかない
・BEM知ってるけど、実務で使うメリットあるの?
・一緒に仕事してる人がBEMを使ってるので、覚えとかないとヤバい

■今回はこんな内容をやります
前編では基礎的な内容を解説しました。
今回の後編では、それを実務で使うことを見越した、実践的な内容を解説します。

・前回の授業のおさらい
・複雑なBlockを構築する方法
・自分のプロジェクトに合わせてBEMを改良する方法
・ディレクトリ構成の設計方法 など

■この授業を受けるにあたって必要な知識
・HTML,5 CSS3の基礎(必須)
・OOCSSなどのCSS設計についてのざっくりした知識(推奨)

前回からの宿題

+ ひな形のデータ「homework」(http://bit.ly/1hr20P9)内のファイルに沿って以下3つをBEMでマークアップし、zipにしてメールで送ってください
1. ナビゲーション

2. カード
3. ボタン

+ できるとこまででOKです

+ 送り先:kadai@schoo.jp

+ 件名:【課題提出】BEMを使った破綻しにくいHTML, CSSの書き方

+ 本文:とくになし(質問とかあれば書いて頂いても構いません)

+ 締切:9/4 23:59まで

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ