WebデザイナーのためのSublime Text入門

コーディング支援「Emmet」の導入

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
コーディングの効率化を支援するパッケージ「Emmet」を導入します。
講師:
04:20

字幕

このレッスンではSublime Text にemmet というパッケージを導入する方法を学びます。emmet は HTML や CSS の入力をとても楽にするためのパッケージです。導入しておいて損はないので導入の方を進めていきましょう。それではこの HTML をブラウザーでまず開いておきます。そして同様に Sublime Text でもファイルを開いておきます。そうしたら導入の方法を学びます。まずこちらパッケージなのでコマンドプロンプトからインストールをしていきます。Mac は Command+Shift+PWindows は Ctrl+Shift+P でコマンドプロンプトを出したらinstall という風に単語を打ちこみ、Enter を押します。そしてパッケージのリストが出てくるのでここで emmet 、エメットという風に入力をするとEmmet というパッケージが1番上に出てくるかと思うのでこのまま Enter を押します。Enter を押すとEmmet のパッケージがインストール完了しました。それでは一度このエディター、Sublime Text を再起動してみましょう。一旦このメッセージはバッテンマークで閉じてしまい、メニュー上からSublime Text を終了。 そしてもう一度 Sublime Text をクリックして再起動しました。それではまず初期設定をしなければなりません。ユーザーのセッティングを開いてみましょう。まず Sublime Text でMac は Command+,Windows は Ctrl+, でこのようにユーザーのセッティングを開きます。そしてこの波括弧の上の行にカンマを打ち、Enter で改行したらこちらにある disable_format からtrue の位置までの2行分をコピーします。そしてこちらにペーストをします。そして最後の行のカンマは要らないのでこちらは取り除いておきます。それでは上書き保存をしましょう。この設定は日本語入力の時に起きるバグであったり元々 Tab キーで展開できるようになっているのですがTab キーはスニペットなどでも使う重要なキーなのでTab キーはEmmet では使えません、というようなセッティングを先にしておきます。それでは HTML のほうに戻って入力を試してみましょう。例えばこのファイル、一旦1行目から改行して少しスペースを空けておきます。そして例えば ! マークを1個作りました。それではショートカットキー、Windows Mac 共通です。 Ctrl を押しながら E を押しましょう。そうすると一瞬で HTML のひな形が入りました。また、body の中にh1 と括弧を打たずに入力しまして、ここで Ctrl+E を押すとこのように h1 タグが開始タグ終了タグセットで入ります。このような入力支援が他にも沢山あるので合わせて学んでいきたいと思います。今回は Emmet の導入について学びました。

WebデザイナーのためのSublime Text入門

Sublime Textは世界中で多くのプログラマーに愛されている大人気のテキストエディタです。このコースでは、Sublime Textを使うのが初めての方にもわかりやすいようにその使い方を丁寧に解説していきます。コースの後半では実際にSublime Textを使ってコーティングを行っていきます。

2時間16分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年06月18日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。