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

定番パッケージを使ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Sublime Textをちょっと便利にする定番パッケージをご紹介します。
講師:
06:51

字幕

このレッスンでは Sublime Text の定番パッケージを導入していきましょう。縁の下の力持ち的なパッケージをご紹介します。それではレッスンファイルの中にフォルダーが入っているのでこのフォルダーをSublime Text で開きます。サイドバーがもし表示されていない場合はView メニューの Side Bar からサイドバーを表示してみてください。それでは次にstandard フォルダーの中のstandard1.html をChrome で開いておきます。それでは定番パッケージを1つずつ導入してみましょう。まずパッケージの導入方法はコマンドプロンプトを開くところから始まります。それでは Sublime Text に行きMac の場合は Command+Shift+PWindows の場合はCtrl+Shift+P です。それでは install という単語を打ちましてこの Install Package が選ばれている状態でEnter を押します。そうするとこのように、インストールできるパッケージの一覧が出てくるのでここから1つずつインストールをしていきます。では convert という風に単語を打ちます。 そうすると今 ConvertToUTF8 というパッケージが選ばれているのでこちらを Enter でインストールしていきます。このパッケージは元々 Sublime Text はUTF8 の文字コードにしか対応していませんが日本語の Shift JIS などに対応するためにこのパッケージを導入します。文字化けが起きなくなるのでまず最初に導入をしておきましょう。そしてこのようにパッケージをインストールするとメッセージが出るものがありますがこちらは特に気にせず閉じてしまって構いません。では引き続きコマンドプロンプトを開いてinstall を選び今度は bracket という風に単語を打ちます。そうすると BracketHighlighter という方が発見されるのでそちらの方を Enter でインストールします。このパッケージはHTML の開始タグと終了タグを分かり易くするためのパッケージです。一度 Sublime Text を終了して再起動してみましょう。それでは Sublime Text のメニューからQuit ということで終了してみます。そしてもう一度 Sublime Text を起動します。 Sublime Text は終了前のファイルの状態を覚えていて特に保存しなくても、このようにまたフォルダーが開かれた状態で復元されました。それでは standard1.html を開きました。そして例えばこの h1 という返しタグの中にカーソルを置くとこのように白い囲みが現れています。例えば div id="result"こちらもクリックをするとこの開始タグはここの終了タグで閉じています。という風に各タグの違いが分かるようになっています。それでは次のパッケージをインストールしてみましょう。コマンドプロンプトを開いて installそしてインストールするパッケージの名前はadvance という風に入力をします。そうすると AdvancedNewFile というのが選ばれるのでこちらを Enter でインストールしていきます。そしてこのようにメッセージが出ますがこちらは閉じてしまって大丈夫です。このパッケージは通常 File から新規で作っていくファイルをより強力に作るためのパッケージです。それではコマンドプロンプトを開いて anfそして New File というものが選ばれていることを確認してEnter で実行すると、下にこのようにファイルの名前を入れて下さいというものが出ます。 普通ファイルはフォルダーを作ってからファイルを作っていくような過程でいきますがこの場合 css/style.cssという風に入力をしてEnter を押すと、フォルダーも同時に作成をしてくれるという便利なパッケージになります。それでは次のパッケージをインストールしてみましょう。コマンドプロンプト、そして install です。そして sync という風に単語を打つと、SyncedSideBar というパッケージが選ばれてますのでこちらを Enter でインストールしていきます。この SyncedSideBar は現在開いているファイルをハイライトしてくれるためのパッケージです。例えばこの standard1 から 3 までを全て開いてみましょう。ダブルクリックで開くことができます。例えばこのタブ上で 1 を選ぶと、自動的に 1 にハイライトが入っています。そして 2 を選ぶと2 のファイルが開いている、そしてこの style.css をクリックするとフォルダーが開いてちゃんとstyle.css がハイライトしていることが分かります。このようにファイルが増えてくると非常にありがたいパッケージになります。 そして最後のパッケージはIMESupport というパッケージになります。これは Windows 限定のパッケージでWindows の場合日本語を入力するとインライン入力ができない、つまり左上に日本語が出てしまうという問題がありました。それを修正するためのパッケージですのでこちらをインストールしておくことをお勧めします。このレッスンではSublime Text にまずインストールしておくべき定番のパッケージをご紹介しました。

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

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

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

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

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

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