8/24(Sat)

今日の生放送

SublimeText入門

マルチデバイス対応コーディングのためのSublimeText【環境整備編】

第1回:2015年1月10日公開

70min

マルチデバイス対応コーディングのためのSublimeText【環境整備編】

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

コース概要

最新の開発環境をSublimeTextで整える

フロントエンドのパフォーマンスを上げタスクを自動化するGruntやYeomanなどを導入するフロントエンドデベロッパー環境が増えてきました。その第一歩となるのが、SublimeTextの導入です。SublimeTextの優れたプラグインを導入し、マルチデバイス対応サイト制作のためのフロントエンドのコーディング開発環境をSublimeTextで整えていくという授業です。
html4またはxhtml1.0のコーディングは分かるので、最新の環境を整えたい方におすすめの授業です。

※Subulime Textがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#2:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング(前編)」「#4:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング(後編)」の録画授業を受講されると、より理解が深まります。

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。
(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

こんな人にオススメ

スマホやタブレット対応のコーディングをしたいが仕組みがよくわからない方・HTML5が良くわからない方

担当の先生

パーソナリティ

  • 塩原 桜

    塩原 桜

    スクー放送部

  • 鈴木 満里乃

    鈴木 満里乃

    スクー放送部

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

参加したい受講生 : 3835

カテゴリー

タグ

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

授業リスト

マルチデバイス対応コーディングのためのSublimeText【環境整備編】

2015年1月10日公開

70min.

最新の開発環境をSublimeTextで整える

フロントエンドのパフォーマンスを上げタスクを自動化するGruntやYeomanなどを導入するフロントエンドデベロッパー環境が増えてきました。その第一歩となるのが、SublimeTextの導入です。SublimeTextの優れたプラグインを導入し、マルチデバイス対応サイト制作のためのフロントエンドのコーディング開発環境をSublimeTextで整えていくという授業です。
html4またはxhtml1.0のコーディングは分かるので、最新の環境を整えたい方におすすめの授業です。

※Subulime Textがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#2:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング(前編)」「#4:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング(後編)」の録画授業を受講されると、より理解が深まります。

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。
(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

スライド資料

コーディング時間を1/3にするSublimeTextだからできるemmet連動

2015年1月17日公開

70min.

コーディングを爆速にしてくれるemmetの導入

cssコーディングの効率化のためにsassなどコンパイルが必要な技術を使うことが多くなってきました。その導入として、コーディングを爆速にしてくれるemmetをSublimeTextに導入していきます。
emmetは以前はZen-Codingと言う物でした。HTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。このライブラリがSublimeTextのプラグインとして導入されて、コーディングは慣れれば約1/3の時間で出来るようになりました。これを覚えない手はありません!この授業でしっかり導入方法を、使用方法を学んでいきましょう。


※Subulime Textがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#2:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング(前編)」「#4:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング(後編)」の録画授業を受講されると、より理解が深まります。

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。
(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

 

スライド資料

SublimeTextだからできるFTP連動と正しいディレクトリ管理

2015年1月24日公開

70min.

SublimeTextを使用した完璧なディレクトリ管理を学ぶ

1回目・2回目で、SublimeTextを使用したフロントエンドコーディングの開発環境が整いました。
この授業ではローカル作業からネット上へファイルの更新・新規追加をしていく作業を学びます。
またSublimeTextを使用した完璧なディレクトリ管理を学んでいきます。

FFFTPやサイバーダックなどを使用している方、ディレクトリ管理がいまいちよくわかれず、先祖がえりを起してしまう方は必見です。


※Subulime Textがインストールされている事を前提に授業が進んでいきます。
photoshopを使用したWebデザイン制作未経験の方はhttp://schoo.jp/design/「#2:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング(前編)」「#4:簡単なWebサイト作りながら学ぶ、HTMLとCSSコーディング(後編)」の録画授業を受講されると、より理解が深まります。

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。
(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

 

 

スライド資料

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

2015年1月31日公開

60min.

フロントエンドの開発にはプログラムを制御・統合するビルドツール、処理を自動化し結果を出すタスクランナー、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連動と正しいディレクトリ管理

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

スライド資料

Sublime Text+Sassで爆速コーディング【インストール編】

2015年2月14日公開

60min.

cssはネストの構造を記述する事ができないため、うまく優先順位を考慮しなければ指定できなかったり、後で書いた記述に上書きされてしまったりします。CSSプリプロセッサ(CSS拡張メタ言語)を使えばhtmlのネスト構造のままスタイルを設定できるようになります。大規模なサイトになるほどネストの階層は深まって行きますが、そのままの構造でスタイルが当てられるのでセレクタが被る事がありません。また、ナビボタンに一つづつ違う画像を指定するなどの連番のクラス名をつける、4〜5個のベンダープレフィックスをつけるなどを、一発指定するという神業をやってのけます。

この授業はCSSプリプロセッサSassをSublimeTextに導入して操作する方法を学びます。


CSSプリプロセッサにはBootstrapで採用されているLessなどがありますが、Sassはcssに近いScss記法で親しみやすいため、最もユーザー数の多いCSSプリプロセッサです。
Rubyをインストールする必要があります。MacはRubyが標準装備されています。Windowsの方は、下記のサイトを参照にしてRubyのインストールをしてください。
http://www.rubylife.jp/install/install/index1.html

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

1)Sublimeのインストール

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

2) Sublimeの設定

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

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

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

スライド資料

Sublime Text+Sassで爆速コーディング【プラグイン編】

2015年2月21日公開

60min.

SassはJavaScriptのように関数を使って様々な処理を実行したり変数を使用する事ができます。変数を使用する事によって、1回の記述で数カ所のスタイルを指定する事ができます。また、条件分岐や繰り返し処理を行う事でページによって背景画像を変えたり、フォントサイズによって色を振り分けたりする事ができます。SublimeTextにSass用プラグインを導入して、プログラミング的な指定を楽々こなす手法を学びます。


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

1)Sublimeのインストール

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

2) Sublimeの設定

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

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

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

スライド資料

Sass/Compassで快適なcss自動コンパイル環境構築

2015年2月28日公開

80min.

CompassとはSassをさらに強力にしてくれるSublimeTextのパッケージで、スプライト自動作成、プロジェクトごとに設定ファイルを適用したり、ベンダーフィックスやクロスブラウザ対応を自動生成してくれる、すぐれたフレームワークです。また、SassとCompassを元に作られたオープンソースのライブラリはネット上で多数配布されています。4回目はSublimeTextにCompass用のパッケージをインストールして自動コンパイルを実現する手法を学びます。

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

1)Sublimeのインストール

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

2) Sublimeの設定

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

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

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

  • 自己紹介&アジェンダ
  • 03:53
  • compassのインストールとプロジェクト作成
  • 04:29
  • compassのプロジェクト作成①
  • 03:47
  • compassのプロジェクト作成②
  • 04:55
  • プロジェクトの中身をみてみよう
  • 06:58
  • コマンドラインでwachオプション設定をしよう
  • 02:03
  • compassでコンパイルしてみよう
  • 01:46
  • QKタイム:「sassは@import使える?」
  • 07:16
  • スプライト画像とは
  • 02:13
  • スプライト画像生成手順
  • 05:43
  • mainでclearをする
  • 06:36
  • 今回のまとめ
  • 02:34
  • Q:サイズが統一されてない背景画像もちゃんと計算して出るのでしょうか。
  • 00:52
  • Q:iconフォルダーの元画像は消してもいいんですか?
  • 00:44
  • Q:カルーセルに使うメイン画像にも使えるのですか?
  • 00:50
  • Q:画像のファイル形式は統一しなければいけないのですか?
  • 01:50
  • Q:スプライト画像はページ別にIMGフォルダを作った方がいいですか?
  • 02:35
  • Q:サーバー不可減のためにスプライトを利用すると思いますが、画像が巨大になって読み込みが遅くなる場合の対処法とかありますか?
  • 01:00
  • Q:他に田中先生が思うcompassのここがヤバイ!というポイントがあれば教えていただきたいです。
  • 01:36
  • Q:透明pngと非透明pngが混在するとどうなりますか?
  • 00:47
  • Q:使うときに画像を回転させたりもできるのでしょうか?
  • 03:35
  • Q:授業でやってるrubyのコマンドラインを使用するのと、Preprosなどのアプリでコンパイルするのと機能に違いはありますか。

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ