おためし受講中

WebデザイナーのためのSass/Compass入門

HTML/CSSコーディングを取り巻くWeb開発環境は日々進化しています。Sass/LESS/StylusなどのCSSプリプロセッサと呼ばれるCSSをより便利に速く記述できるフレームワークが登場し、Webデザイナーにもプログラミング的な知識を求められるようになってきました。

この授業ではその中でもSassとその拡張フレームワークであるCompassを取り上げて解説します。Sass/Compassを使えば、面倒な記述、タイピングを少なくすることができ、コーディング速度を高めることができます。また、急なデザイン仕様の変更にも変数や継承と言ったSassの機能を使えば柔軟に対応することができます。

ただSassを使用するにあたって、いわゆる『黒い画面』、ターミナルを使って通常のCSSにコンパイル(変換)する作業を伴ったり、変数、ミックスイン、継承といったプログラミング的な概念も必要になってきます。

なにごとも新しいものを取り入れることは苦労を伴いますが、私自身、転職を機にWebデザイナーからWebデベロッパーに職種が変わりました。その時に戸惑いながらも自分なりのペースでSass/Compassを導入していった経験をこの授業を通して共有できれば幸いです。

WebデザイナーのためのSass/Compass入門(全1回)

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    02:24  (00:18 ~ )
    なぜSassを使うのか?
    06:23  (02:42 ~ )
    質問:黒い画面を日常的に使っている人
    03:40  (09:05 ~ )
    SassのDemo
    03:36  (12:45 ~ )
    好きなエディタって何ですか?
    03:09  (16:21 ~ )
    PreprosのDemo
    04:20  (19:30 ~ )
    Sass/Compassの機能
    15:33  (23:50 ~ )
    まとめ
    04:37  (39:23 ~ )
    【後半】質疑応答
    Q:Sassって電子書籍は無いのですか?
    00:49  (44:48 ~ )
    Q:Windows環境でSassを使うのは難しいですか?
    01:02  (45:37 ~ )
    Q:Sassは何の略ですか?
    00:37  (46:39 ~ )
    Q:これから学ぶのにSassにすべきか、LESSにすべきか迷っています。双方のメリット・でメリットってありますか?
    01:58  (47:16 ~ )
    Q:CompassはSass関連以外の機能もあると聞いた事があるのですが、オススメの機能とかありますか?
    00:36  (49:14 ~ )
    Q:社内にSassを使わないスタッフがいる場合は、どのように共同作業しているのでしょうか?
    02:28  (49:50 ~ )
    Q:Sassを使う事によって不都合な事がありますか?
    01:01  (52:18 ~ )
    Q:Sassをコンパイルして出来たCSSファイルはレポジトリに入れてしまうと、コンフリクトしてしまうかと思うのですが、その辺りはどうしていますか?
    01:41  (53:19 ~ )
    パフォーマンスの向上が期待できるテクニックってどのようなものがありますか?
    00:57  (55:00 ~ )
    Q:Sassを扱う時にオススメのSublime textのプラグインを教えて下さい
    00:55  (55:57 ~ )
    Q:既存のCSSをSassで書き直そうと考えた場合、頑張って書き直すしか無いのでしょうか?
    01:53  (56:52 ~ )
    課題発表
      (58:45 ~ )