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

AutoFileNameを使ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像ファイルなどの外部ファイルを効率良く呼び出すためのパッケージを導入しましょう。
講師:
06:58

字幕

このレッスンではSublime Text のパッケージである、AutoFileName の導入を学びます。AutoFileName は画像の名前や css の名前をSublime Text 上ですぐに入力できるという支援をしてくれるパッケージです。それではまずこのbegin というフォルダーをそのまま Sublime Text にドラッグ&ドロップします。そしてサイドバーを表示するショートカット、Mac は Command+KBWindows は Ctrl+KBそしてサイドバーを出しておきます。また、index.html をクリックして開いておきましょう。そしてこの begin のフォルダーの中に入り、こちらの index.html をドラッグ&ドロップでChrome に落とします。ではまずパッケージのインストールから始めていきましょう。Sublime Text でコマンドプロンプトを開きます。Mac は Command+Shift+PWindows はCtrl+Shift+P です。それでは install という単語を打ち込んでPackage Control: Install Package を選んで Enter を押します。 そしてパッケージの一覧が出てくるので今度はこの欄に AutoFile という風に打ってあげるともうすでに AutoFileName というのが選ばれているようです。なのでこちらで Enter を押します。Enter を押すとインストールが終わります。インストールが終わったら今度は Practice という所にhtml を打っていきたいと思います。こちらの22行目。こちらで改行しておきましょう。実はこのフォルダーにはimages フォルダーとcss フォルダーがそれぞれ入っています。そして images フォルダーの中にイメージが3枚入っているのでこちらを表示したいと思います。まず p タグを打ちましょう。こちらは Emmet の展開で入力したいと思います。p そして子要素の括弧、そして imgと入力したら展開のショートカットCtrl+E を押します。そうすると p タグとimg タグが入り、このように css, images など今自分がいる所のファイル構成を表示してくれています。これが AutoFileName の機能です。この状態でカーソルキー上下でフォルダーを選ぶことが可能です。今回は images フォルダーの写真を入れたいのでimages という所をEnter で選ぶと、自動的に3つのファイル名を取得してくれています。 後は選ぶだけです。では sky という名前のファイルをEnter で選んでしまいましょう。そうすると自動的にsky.jpg というのが入りしかも高さと幅も自動的に入れてくれました。同様にこの p タグと img のセットをもう1個作っていきましょう。pimg と入力したら、展開。そして矢印の下を押してimages を選び、例えばファイルが100個ありましたと、そういう状態でmorning で始まることが分かっていれば実は m と一単語打つだけで絞り込み、つまりフィルタリングがされるようになっています。また、town だからt を打つこともあるのですが実は ow という風に打って途中のファイル名からでもサーチすることが可能です。また、カーソルが外れてしまってこの候補が出ないという場合ももう一度カーソルをこのスラッシュの後ろにもっていけばすぐに候補が出るようになっています。なので今回は画像を矢印キーで選びたいと思いますがsky の次は morning をEnter で選んでみました。そしてもう1セット作りたいと思いますので、pimgCtrl+E で展開。そして images フォルダーを選んで最後は town 選びたいのでto と打ってみました。 そうすると選択肢が絞り込まれます。そして Enter を押してこのように画像を入れてあげました。では上書き保存をしましてブラウザーの方を更新してみましょう。このように3枚の写真が入りました。この入力の利点は既にフォルダーにあるファイル、リストしか出てこないので打ち間違いが起きないということです。また、正確なサイズも入れてくれるというのがメリットです。また、この AutoFileName は画像だけではなくて JavaScript やCSS などの外部ファイル全般に有効です。今度は CSS を入力してみましょう。7行目の style.css の後ろで改行をしてlink と打ち込んだらCtrl+E で展開をします。そうするとスタイルシートの在処を聞かれます。css フォルダーが選ばれていることを確認して Enter 、そして style.css が入っているのでEnter で選んであげます。ここまでファイル名は1文字も打ち込んでいません。それでは Command+SCtrl+S で保存をしたら、ブラウザーにフォーカスして更新です。そうするとこのようにボーダーが入りました。これはあらかじめstyle.css に入っているものが反映されたということになっています。 AutoFileName を利用してできるだけ正確に早く外部ファイルを入力していきましょう。このレッスンではSublime Text のパッケージ、AutoFileName について学びました。

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

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

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

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

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

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