chevron_left

SublimeText入門

PREMIUM

スライド資料

会員登録して、全てのスライドを見よう

1 / 40

授業の概要

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連動と正しいディレクトリ管理

こんな人にオススメ

大規模サイトのフロントエンドを任されるコーダーを目指す人

チャプター

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