SublimeText入門

第4回|Sass導入に必須!SublimeTextで黒い画面(コマンドライン)と仲良くなる

おためし受講中
  • 授業で使用する教材

    教材はありません

「授業フィードバック」で、授業の感想を教えてください!

チュートリアルは、こちらの「その他のオプション」からいつでも確認いただけます。

コピーしました!

ここには授業中のやりとりが表示されます

生放送でのコメントが再生されています

【前半】授業
  • 自己紹介&アジェンダ
  • 00:00:13〜(02:16)
  • 今時のフロントエンドは環境は、サーバープログラミング言語でできている!?
  • 00:02:29〜(04:55)
  • 何故アジャイルが実現できるのか
  • 00:07:24〜(04:23)
  • SassはRubyの上で動いている
  • 00:11:47〜(01:05)
  • SassはRubyで動いている?
  • 00:12:52〜(02:12)
  • Sassとは何者!?
  • 00:15:04〜(03:56)
  • インデントで改装を表すSassの問題点
  • 00:19:00〜(04:38)
  • Sassをやるならちょっとだけ黒い画面を覚えよう!
  • 00:23:38〜(03:07)
  • Windowsで活用すべきプログラム、PowerSell
  • 00:26:45〜(05:00)
  • Macではパスを直接指定する
  • 00:31:45〜(01:37)
  • sublをコマンドラインで操作するシンボリックリンクを貼ろう
  • 00:33:22〜(03:38)
  • sublのパス指定はドラッグ&ドロップで行う
  • 00:37:00〜(03:00)
  • sassをコンパイルする
  • 00:40:00〜(04:11)
  • 黒い画面でSublimeTextを立ち上げよう
  • 00:44:11〜(01:13)
【後半】質疑応答
  • Q:制作の時にSassで制作し、実際に表示させるときにコンパイルしてCSSにするという発想でいいのでしょうか?
  • 00:45:24〜(00:53)
  • Q:MacユーザーはLessよりSassの方が手間が省けますか?
  • 00:46:17〜(02:42)
  • Q:変数以外に使える機能はありますか?
  • 00:48:59〜(01:22)
  • Q:scssも「サス」と読むのですか?
  • 00:50:21〜(00:33)
  • Q:PowerShellは、cmd.exeの上位互換と考えればいいですか?
  • 00:50:54〜(01:07)
  • Q:Sassの終了させる時は黒い画面は使いませんか?
  • 00:52:01〜(02:01)
  • Q:SassはCSS3も対応していますか?
  • 00:54:02〜(01:25)
  • Q:同じターミナル画面上で、サブライム2と3を入力しても大丈夫ですか?
  • 00:55:27〜(00:48)
  • Q:Sassを入れると何ができるのでしょうか?
  • 00:56:15〜

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    全7回 2015年1月31日公開
    Sass導入に必須!SublimeTextで黒い画面(コマンドライン)と仲良くなる

    フロントエンドの開発にはプログラムを制御・統合するビルドツール、処理を自動化し結果を出すタスクランナー、CSS拡張メタ言語からCSSをコンパイルするCSSプリプロセッサなどが導入されるようになり、それらの使用には「黒い画面」と呼ばれているコマンドラインが必要不可欠になってきました。

    1回目は、その中でも定番と言っていいほど導入の進んでいるSassを導入するためのコマンドラインを使った設定を学んでいきます。

    コマンドラインはMacでは「ターミナル」、Windowsには「コマンドプロンプト」がデフォルトで用意されています。Windowsではもう一つのコマンドラインツールであるPowerShellがあり、SublimeTextを中心に構築していくフロントエンド開発環境ではPowerShellを使用します。初めて名前を聞く人もいると思いますので、
    標準装備されているのを確認してください。

    Windws 7
    スタートメニュー>すべてのプロラム>「Windows PowerShell」と入力すると確認できます。
    Windws 8
    スタート画面>すべてのアプリ>「Windows システムツール」の項目にあります。

    ※Subulime Textがインストールされている事を前提に授業が進んでいきます。

    1)Sublimeのインストール

    下記のURLからダウンロードしてください。
    http://www.sublimetext.com/2

    2) Sublimeの設定

    下記の授業を見て、必要な設定をしておく事をお勧めします。
    マルチデバイス対応コーディングのためのSublimeText【環境整備編】

    3) 以下の授業を受講するとより理解が深まります。

    コーディング時間を1/3にするSublimeTextだからできるemmet連動
    SublimeTextだからできるFTP連動と正しいディレクトリ管理

    受講生代表

    • 塩原 桜

      塩原 桜

      スクー放送部

    教室画面の機能をご紹介します

    学習機能を活用して、効率よく学習しましょう!