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

スニペットの使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スニペットはコードの切れ端という意味です。よくつかうコードをスニペットとして登録することで、効率良くコーディングが可能になります。
講師:
06:43

字幕

このレッスンではSublime Text におけるスニペットの使い方を学びます。スニペットとはコードの切れ端という意味でよく使うコードを登録しておくといつでもすぐに呼び出せるという機能になります。それではレッスンのファイルをブラウザーで開いていきます。同様にこの HTML をSublime Text でも開いておきます。後はウィンドウを調整して1つずつ見ていきましょう。まずスニペットの登録方法からです。登録方法はSublime Text にフォーカスをしてTool というメニューの中からNew Snippet というのを選びます。こちらをクリックしてみましょう。クリックをするとこのようにスニペットを登録する画面になります。スニペットも1つのファイルとして扱うのでこれを記入して保存するという流れになります。そしてこちらの黄色いエリアの3行目の部分がこちらは何行でもいいのですがこのエリアに入力をしたものが呼び出される方になります。そして他にもオプションがあるのですが今回はこの tabTrigger というオプションを使いたいと思うのでこちらにカーソルを合わせコメントアウトのショートカット。Mac は Command+/Windows は Ctrl+/ でコメントを解除しておきます。 この tabTrigger が何かというと今回は hello という文字を打ったらTab を押すとこの黄色い行が呼び出されるという風に辞書みたいに繋げることができる機能です。それではこちらを使って新しいスニペットを登録しておきましょう。まずブラウザーの方からこの行 img タグの部分をコピーします。コピーして3行目を全てクリア、そしてペーストをしておきます。そうするとこの1行が登録されました。そしてこの行を呼び出すための辞書、tabTrigger を登録しておきます。今回は placeholder という機能を付けたいのでplace というようなtabTrigger にしてみました。そしてこれを上書き保存します。Mac は Command+SWindows は Ctrl+S で保存のダイアログが開きます。そしてここにファイル名を入力しますがtabTrigger で入力しておくといいと思います。place と同じように打ってスニペットは .sublime-snippetという拡張子になっています。必ずこの sublime-snippet と入力をします。そして保存する場所はユーザーフォルダーにデフォルトでなっていると思うのでこちらは User と出るのを一応確認してSave をします。 そうするとこの sublime のスニペットが使える様になっているのでこの HTML にplaceholder を表示したいと思います。それでは15行目にカーソルを合わせてplace と半角英数で打ちます。そして Tab キーを1回押してみましょう。そうすると Tab キーで先程のスニペットが呼び出されました。そしてすでに width にフォーカスがあるのでこのまま数字を打ち込みます。300 そしてまたTab キーを押します。そしてもう一度 200 などと数字を打ちます。そしてこちらを上書き保存をしてブラウザーにフォーカスして更新をしてみましょう。更新のショートカットはMac は Command+RWindows は Ctrl+R です。そうするとこのように仮の画像が呼び出されました。placeholder はまだ画像ができていないけれども仮の場所を押さえておきたいという時に使えるものです。今回は 300 x 200 を呼び出しましたがこちらは placehold.it というウェブサービスから引っ張ってきています。この数字を例えば 400 x 100 にして上書き保存、ブラウザーを更新すればこのように自在にサイズを変えることができるので是非ウェブデザインの方に活用してみてください。 では次のスニペットを登録してみましょう。今度はこのスニペットを別名で保存してしまいましょう。File Save As... を選びます。Save As で別名に保存です。そしてこの place という名前を今度は jqjQuery のスニペットを作っていきます。そして Save をします。そして tabTriggerショートカットキーは jq としてそして呼び出されるコードの方はこちらの2つ目のおすすめスニペット。これをコピーして、3行目をクリア。そしてペーストをします。そしてこちらを上書き保存。これでもう使える様になっているのでHTML に行って例えば jQuery を使いたいけれども公式サイトから一々コピーしたりダウンロードするのが少し手間である、そんな時はこの body の閉じタグの上でjq とキーを打ってあげてTab キーを1回押す。これで jQuery のコードデリバリーネットワークからすぐに jQuery のライブラリを読みだすことができ、すぐに jQuery を試すことができます。このスニペットは使い方によって無限の可能性を秘めてあるので是非皆さんも色んなコードを登録して呼び出せるような仕組みを作っていきましょう。 このレッスンではスニペットについて学びました。

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

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

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

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

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

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