CSS設計を学んで、拡張性と保守性に強いCSSを書こう!基礎〜実践導入

CSSを「綺麗に書く」手法とは?

CSSは簡単に書く事ができる言語として認識されていますが、その簡単さゆえに、書く事はできても実は「綺麗に書く」ことが難しい言語でもあります。
綺麗に書く事ができないと、複数人のチームでCSSを記述することや、長期に渡ってWebページを運用することが難しくなってきます。


そこで今回は、ここ数年注目されている「CSSを設計する手法」を丁寧に解説していきたいと思います。
授業ではCSS設計とは何か、といった初歩から始め、CSS設計で有名な「SMACSS」「OOCSS」「BEM」の内容や、スタイルガイド、Sassを取り入れた手法、またそれらを実務導入する際の実践的な話までを解説します。

※この授業は、HTMLの基礎・CSSの基礎を学んだ方を前提に進行します。

※授業中に使うサンプルデータ(参考)

https://github.com/seito2014/css_architecture_sample

CSS設計を学んで、拡張性と保守性に強いCSSを書こう!基礎〜実践導入
2015年1月24日公開
02:00:00
  • 自己紹介&アジェンダ
  • 06:32
  • CSS設計とは
  • 02:02
  • CSS設計の3大メソッド:OOCSS
  • 10:51
  • CSS設計の3大メソッド:BEMとは
  • 07:13
  • CSS設計の3大メソッド:SMACSS
  • 09:18
  • クラス名について考えてみる:例1)ちょい複雑なhtml
  • 12:46
  • クラス名について考えてみる:例2)シンプルなhtml
  • 05:43
  • 設計で必要な3つのこと:スタイルガイド
  • 04:22
  • 設計で必要な3つのこと:ディレクトリ構成
  • 04:12
  • 設計で必要な3つのこと:設計指針
  • 03:47
  • 実践で気をつけたい4つのポイント
  • 05:31
  • マジやばい使えるツール×5
  • 07:40
  • 実際に設計してみた
  • 16:18
  • Q:BEMの命名規則を画像名に使用したりしますか?
  • 01:12
  • Q:スタイルガイドを初めて使用する場合、どれがおすすめですか?
  • 00:58
  • Q:いろんなreset.cssがありますが、おすすめなreset.cssなどはありますか?
  • 01:02
  • Q:堀口先生オススメのテキストエディターは何ですか?
  • 01:18
  • Q:堀口先生はクライアントワークでCSSフレームワークを使われますか?
  • 01:12
  • Q:CSS設計を学ぶのにオススメのサイトとかありますか?
  • 01:29
  • Q:archive.html内にid指定がなく、全てclassになっているのはなぜですか?
  • 02:34
  • Q:堀口先生は就職する時に何作品WEBサイトなど作りましたか?
  • 01:14
  • Q:LIGではコーディング手法のルールはどのように決めているのですか?
  • 01:15
  • Q:classが多いことで考えられるペナルティといいますか、デメリットはありますか?
  • 01:42
  • Q:cssはひとつひとつ読み込むのとメインcssでimportで読み込むのはどちらが良いですか?
  • 01:22
  • Q:reset.cssのように多くのサイトで使い回すご自身のテンプレート的なcssはお持ちですか?
開く
今日から使えるHTML5/CSS3/JSのシンプルテクニック15選
2015年2月21日公開
01:30:00
  • 自己紹介&アジェンダ
  • 03:29
  • 今回使用するソフトの紹介:CODEPEN
  • 01:39
  • オシャレCSS編:transformを使って要素を変形させるワザ
  • 04:58
  • オシャレCSS編:transitionを使い、cssだけで簡単なアニメーションを行うワザ
  • 05:22
  • オシャレCSS編:keyframesを使ってcssだけで複雑なアニメーションを行うワザ
  • 09:35
  • オシャレCSS編:矢印アイコンをcssだけで表現するワザ
  • 08:19
  • オシャレCSS編:アイコンをアニメーションさせるワザ
  • 02:42
  • オシャレCSS編:cssプロパティ
  • 05:33
  • 地味だけど使えるワザ編:今どきの、要素を上下中央寄せにするワザ
  • 03:59
  • 地味だけど使えるワザ編:「flexbox」で要素を自由自在に整列させるワザ
  • 02:44
  • 地味だけど使えるワザ編:Windowsでwebfontをちょっとマシに見せるワザ
  • 01:33
  • 地味だけど使えるワザ編:アイコンとテキストが1pxズレてる…!とかいうときに5秒で揃えるワザ
  • 02:04
  • 地味だけど使えるワザ編:text-indent:-9999pxの上位互換的なワザ
  • 01:58
  • 地味だけど使えるワザ編:デバイスごとに快適な閲覧してもらうために設定すべきviewportのワザ
  • 01:14
  • JSで無理やりごにょごにょ編:select要素をデザインするワザ
  • 04:58
  • JSで無理やりごにょごにょ編:input[type=
  • 01:15
  • JSで無理やりごにょごにょ編:ユーザーエージェントを利用してブラウザ&OSハックするワザ
  • 06:55
  • まとめ
  • 01:47
  • Q:スマホサイト等にcss3を多様すると表示が重くなってしまいますか?
  • 01:04
  • Q:この矢印は<span>タグを空にして作られていますが、SEO的にはどうなのでしょうか?
  • 00:59
  • Q:回数指定もできるのでしょうか?
  • 01:23
  • Q:IE9以前で同じような動きはできないと思いますが、注意書きとかどうしたらよいですか?
  • 02:21
  • Q:translateとpositionの使い分けについて。
  • 01:41
  • Q:特定のブラウザやデバイスのみに特定のcssを指定する場合はどのようにしますか。
  • 00:59
  • Q:contentでのロゴ置換えはIEとか使えますか?
  • 01:14
  • Q:animationを行った場合、他の要素はどうなりますか?
  • 00:57
  • Q:縦に長いウェブサイトで、スクロールバーの動きに(たぶん)反応してアニメーションが起きるサイトがありますが、あれはCSSだけでなくJSも使われているのでしょうか?
開く
こんな人にオススメ
WEBデザイナー(中級)

CSSは書けるけど設計は「何それ?」な方・実務での導入でつまづいている人

スライド資料
授業で使用するファイル

※授業以外での利用は禁止します。

担当の先生
受講生代表
  • 塩原 桜

    塩原 桜

    スクー放送部

  • 鈴木 満里乃

    鈴木 満里乃

    スクー放送部

受けたいランキング
新着の生放送授業
関連授業

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×