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

Emmet Live Styleでライブコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザの更新をしなくても、CSSをプレビューできる環境を導入しましょう!ライブコーディングへの第一歩!
講師:
08:15

字幕

このレッスンではSublime Text のパッケージ、Emmet に LiveStyle というパッケージを加えてリアルタイムに css を確認できるという機能を導入して行きたいと思います。それではまず html をブラウザーで開きます。そして html と css を両方とも選択してSublime Text で開きます。そうするとこのようにhtml と css が同時に開かれたかと思います。それではこちらのブラウザーでhtml を見てみましょう。まずパッケージをインストールする必要があるのでSublime Text でMac は Command+Shift+PWindows は Ctrl+Shift+P でコマンドプロンプトを開き、install という単語を打ち込んでInstall Package でEnter を押します。そしてパッケージのリストが出てきますのでこちらで livestyle という風に単語を入力すると1つだけパッケージが選ばれるのでこちらを Enter でインストールを開始します。インストールが終わったら説明文が出てきますが一度このメッセージは閉じてしまい、Sublime を再起動します。 それでは Sublime Text のメニューからQuit を選んで一度終了。そして Sublime Text のアイコンをクリックしてもう一度 Sublime Text を再起動します。再起動するとこれでインストールは完了しているはずです。次は Chrome 自体に拡張機能をインストールしたいと思います。まず公式サイトを開きましょう。リンクが貼られています。それでは公式サイトを開きました。公式サイトを開くとこのようなサイトが開いて、デモのムービーなども見ることができます。それでは1番下までスクロールをしてInstall というボタンを押しましょう。そうするとインストールのガイドのページなのですが既にパッケージのインストールは終わっているのでここでは Google Chrome extension だけを導入したいと思います。こちらにリンクが貼ってあるのでこの Chrome Webstore というリンクをクリックしましょう。クリックすると自動的にこの拡張機能のページに飛ぶので後はこの無料インストールのボタンをクリックするだけです。そして追加を押してあげます。そうするとこのように追加されましたと出ましたので後はこの画面、閉じてしまって構いません。 それでは一度 Chrome を再起動したいと思いますのでChrome のメニューから一度 Chrome を終了しておきましょう。そうしたらもう一度この html をChrome のアイコンにドラッグ&ドロップしてChrome をもう一度開いてあげます。そうしたら今度はデベロッパーツールを開いていきましょう。デベロッパーツールの開き方はChrome で「表示」そして「表示」の中の「開発管理」。その中の「デベロッパーツール」を選びます。デベロッパーツールを選ぶとこのように画面が下に出ると思います。その中で LiveStyle というメニューが増えます。もしも見えていない場合は少しウィンドウを広げてあげると見えるかと思いますこの LiveStyle を押します。そうするとここにチェックボックスがあります。Enable つまり LiveStyle を有効化しますというチェックです。チェックをすると既に読み込まれているファイルがある場合はここに css の名前が出ていると思います。つまりこのファイルは html と css繋がっているので自動的にここに出てきているということになります。それではこのデベロッパーツールが開いている状態でないと、この LiveStyle 使えませんのでデベロッパーツールは少しこのように縮めておきましょう。 縮めておきます。そうしたら Sublime Text でcss の方をフォーカスします。そして html はこのグレーの Practice の部分が見えるようにしておきましょう。それでは css を打ち替えていきます。例えば heightこちらを 300 にすると今一瞬で 300 に縮んだ、つまりブラウザーを更新しなくても反映されました。こちら 500 に戻しておきます。今度は padding です。padding いま 10 ですけれどもこちらを 30 、入力した瞬間にこちらの画面でpadding が反映されました。他にも backgroundeee ではなくて例えば ccc がいいということであれば少し濃いグレーに変わります。他にも h4これが font-weight bold が嫌だということであればnormal と打ち替えればこちらの文字が太字からノーマルに変わります。また、border についてもborder の太さが 10 という風にすると一瞬でブラウザーで反映されたかと思います。このようにブラウザーに行って更新を押さなくてもcss の結果が分かるので、非常にコーディングの効率が上がります。 それではブラウザー上でこちらの文章の上で右クリックから「要素の検証」を押してみましょう。そしてデベロッパーツールを見える状態にしておきます。そうするとこの p タグが選ばれていることが分かります。この p タグのスタイルシートはlive の css の26行目に書いてあるという風に分かります。こちらで言うと、ここのエリアですねデベロッパーツールでもcss のシミュレーションが可能でした。例えば color のチップをクリックしてこちらで色を変えることが可能でした。この色にしてみます。そして Enter を押すと、その時点でこのスタイルシートも書き変わります。line height についても2 ではなくて1.6 が良いということで入力をするとこちらの css も反映されています。これは LiveStyle を使っていないとデベロッパーツールの数値を覚えてcss に打ち込み直し、そして上書き保存という手間が発生してしまいます。この LiveStyle を使うことでより楽にブラウザーを使いながらcss をコーディングできるという風にできると思います。このレッスンではEmmet と LiveStyle によるライブコーディングを学びました。

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

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

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

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

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

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