おためし受講中

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

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

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


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

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

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

https://github.com/seito2014/css_architecture_sample

 

 

学生代表

  • 塩原 桜

    塩原 桜

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    06:32  (00:13 ~ )
    CSS設計とは
    02:02  (06:45 ~ )
    CSS設計の3大メソッド:OOCSS
    10:51  (08:47 ~ )
    CSS設計の3大メソッド:BEMとは
    07:13  (19:38 ~ )
    CSS設計の3大メソッド:SMACSS
    09:18  (26:51 ~ )
    クラス名について考えてみる:例1)ちょい複雑なhtml
    12:46  (36:09 ~ )
    クラス名について考えてみる:例2)シンプルなhtml
    05:43  (48:55 ~ )
    設計で必要な3つのこと:スタイルガイド
    04:22  (54:38 ~ )
    設計で必要な3つのこと:ディレクトリ構成
    04:12  (59:00 ~ )
    設計で必要な3つのこと:設計指針
    03:47  (1:03:12 ~ )
    実践で気をつけたい4つのポイント
    05:31  (1:06:59 ~ )
    マジやばい使えるツール×5
    07:40  (1:12:30 ~ )
    実際に設計してみた
    16:18  (1:20:10 ~ )
    【後半】質疑応答
    Q:BEMの命名規則を画像名に使用したりしますか?
    01:12  (1:36:28 ~ )
    Q:スタイルガイドを初めて使用する場合、どれがおすすめですか?
    00:58  (1:37:40 ~ )
    Q:いろんなreset.cssがありますが、おすすめなreset.cssなどはありますか?
    01:02  (1:38:38 ~ )
    Q:堀口先生オススメのテキストエディターは何ですか?
    01:18  (1:39:40 ~ )
    Q:堀口先生はクライアントワークでCSSフレームワークを使われますか?
    01:12  (1:40:58 ~ )
    Q:CSS設計を学ぶのにオススメのサイトとかありますか?
    01:29  (1:42:10 ~ )
    Q:archive.html内にid指定がなく、全てclassになっているのはなぜですか?
    02:34  (1:43:39 ~ )
    Q:堀口先生は就職する時に何作品WEBサイトなど作りましたか?
    01:14  (1:46:13 ~ )
    Q:LIGではコーディング手法のルールはどのように決めているのですか?
    01:15  (1:47:27 ~ )
    Q:classが多いことで考えられるペナルティといいますか、デメリットはありますか?
    01:42  (1:48:42 ~ )
    Q:cssはひとつひとつ読み込むのとメインcssでimportで読み込むのはどちらが良いですか?
    01:22  (1:50:24 ~ )
    Q:reset.cssのように多くのサイトで使い回すご自身のテンプレート的なcssはお持ちですか?
      (1:51:46 ~ )