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

Goto-CSS-Declarationの使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLのクラス・ID属性からCSSセレクタに一瞬でジャンプできるパッケージをご紹介します。
講師:
05:27

字幕

このレッスンではSublime Text にGoto CSS Declarationというパッケージを導入します。これは HTML から指定したクラスやID の宣言に対して対応する CSS にすぐに飛べるすぐに選ぶことができるというような機能を導入します。それでは begin のフォルダーをSublime Text にドラッグ&ドロップします。そして Command+KBWindows の方は Ctrl+KB でサイドバーを表示しておきましょう。そして begin のフォルダーの中を開いたらindex.html が入っていますのでこちらをブラウザーで開いておきます。それではパッケージをインストールしていきましょう。コマンドプロンプト、Mac は Command+Shift+PWindows はCtrl+Shift+P です。そして install という単語を打ち込みPackage Control のInstall Package を選択します。選択したらインストールできるパッケージのリストが出てくるのでここで Gotoそしてハイフンまで打ち込むとGoto-CSS-Declarationというパッケージが選ばれますのでこちらで Enter を押してインストールを進めましょう。 インストールが完了しました。完了したら index.html のファイルを開きましょう。同様に CSS のファイルも開きたいと思いますがstyle.css の方をダブルクリックで開きましょう。そして画面を分割したいと思うのでSublime Text のウィンドウを広げてView Layout Columns:2 を選びます。そして HTML が左側、style.css をドラッグして右側に移動しましょう。これで左が HTML 、CSS が右側という状態になっています。それでは HTML のid="result" という所にカーソルを置きました。ここで Command 押しながら右を押すと一瞬で id result が定義されている72行目に css が移動したと思います。Windows の場合はショートカットが異なります。Windows の場合はPreferences という所からKey Bindings というショートカットを設定するファイルを開いて以下のファイルをコピー&ペーストしていただくことでCtrl+Alt+.Ctrl+Alt+, で設定を変えることができます。ただ、この Ctrl+Alt などは自分の好きなショートカットに変えることができるので他のショートカットとカチ合わないように設定していただければ何でも構いません。 それは Mac も然りです。初期設定ではCommand+Right Arrowそして Command+Left Arrow で設定されています。例えば div class="pracitice"こちらの中にカーソルを置いてCommand+Right Arrow を1回押すとPractice の h3 にカーソルが移動。もう1回Command+Right Arrow を押すとdt の方に移動。そして左を押すとまた h3 のほうに戻るという風に右と左で操作が可能です。CSS は場合によっては1000行にもなるのでこの機能を使うとすぐに CSS を選び出すことができて非常に便利です。それではこの Practice の p を探し出してみましょう。クラスや id がないと残念ながら飛ぶことができないのでこの場合は親である Practice を手掛かりにすれば大丈夫ですね。例えば CSS が1番上になっていたとしてもPractice にカーソルを合わせてCommand+Right ArrowPractice を選んであげてそして Practice の p を選択します。そしてこの中に例えばcolor: #fc0;などと入力をして上書き保存をしてブラウザーを更新。 そうするとこのように文字色が変化しました。この機能を使うと非常に楽にcss の特定ができるのでコーディングに役に立つと思います。このレッスンではGoto CSS Declaration の導入について学びました。

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

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

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

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

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

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