chevron_left

SublimeText入門
PREMIUM
第2回

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

2015年1月17日 70min
コーディング時間を1/3にするSublimeTextだからできるemmet連動 play_arrow おためし受講

スライド資料

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

1 / 47

授業の概要

コーディングを爆速にしてくれる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/

 

こんな人にオススメ

HTML5のタグがうろ覚えな方・css3のプロパティが分らない方

担当の先生／パーソナリティ

チャプター

play_arrow
自己紹介＆アジェンダ
03:22
play_arrow
emmetとはなんでしょう？
04:55
play_arrow
SublimeTextにemmetを導入する
12:06
play_arrow
使用頻度の高いemmetのコマンド
08:10
play_arrow
コメントアウトの打ち方
05:19
play_arrow
アンカータグ内の属性の打ち方
04:22
play_arrow
ハンズオンタイム！
06:50
play_arrow
グローバルナビゲーションをemmetで書いてみよう
08:22
play_arrow
emmetのチートシート
04:19
play_arrow
Ｑ：チートシートにないものはショートカットがないと考えていいでしょうか？
00:45
play_arrow
Ｑ：emmetは他のコード補完系プラグインとバッティングすることはありますか？
01:11
play_arrow
Ｑ：バインディング重なるので、FindKeyConflictの使い方を知りたいです。
01:31
play_arrow
Ｑ：emmetで階層を上がる書き方をもう一度教えて下さい。
04:11
play_arrow
Ｑ：sublimeを立ち上げてからの導入がうまくいかなかったので、もう一度教えて頂けませんか？
02:49
play_arrow
レポート課題発表