Emmetでコード入力を速めよう

Emmetをインストールする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Emmetのエディタへのインストール方法についてご説明します。
講師:
03:23

字幕

このレッスンでは、エディターへの Emmet のインストールの仕方について 説明します。 Emmet のサイトは URL が emmet.io です。 このトップページを下にスクロールすると ダウンロードのボタンがあって ダウンロードページに 移動することができます。 エディターによって、インストールの 仕方が違いますので お使いの Emmet を インストールしたエディターを選びます。 例えば Sublime Text であれば このボタンをクリックします。 すると(聞き取れない単語)ですけども 説明のページがすぐに表示されます。 例えばこの場合には、 How to install とありますが 標準のインストールの仕方 たった二行ですね。 では戻ります。今回は Brackets を 使ってそこにインストールしたいと思います。 Brackets の場合も簡単です。 説明が出ていますが 通常のインストレーションの場合には 三行です。まず Brackets を 立ち上げて ファイルメニュー から Extension Manager 日本語だとこのメニューの名前が 違います Emmet を(聞き取れない単語)から探して インストールのボタンを押せばいい つまりダウンロードそのものを ここでやる必要はないということです。 Brackets で真っ新のドキュメント sample.html を開きます。 先程の指示通り、インストールしましょう。 ファイルメニュー > 機能拡張マネージャー Emmet を探せと言われました。 ダイアログの中にいっぱい インストールできるものが ありますが、かなりリストが長いです。 この検索ボックスで emmet とすれば、 一個に絞られたので インストールボタンを押しましょう。 機能拡張をインストールしますよ というダイアログが出てくるので もう終わりました。閉じましょう。 こちらも閉じます。実際に使えるかどうか。 まず、Emmet というメニューが 加わりました。 大丈夫そうですね。 一つ試してみましょう。 キーボードから、エクスクラメーションマーク ビックリマークですね これを入れて Tab キーを押します。 HTML ドキュメントに 標準的に必要な 要素、タグが書き込まれる ということです。 もう一つ Adobe の Dreamweaver CC について ご紹介しておきましょう。 Dreamweaver CC 2015 最新のバージョンですと 実はアプリケーションに Emmet があらかじめ インストールされています。 ですからインストールの 作業さえ必要ありません。 試しに HTML ドキュメント 新規に開きます。 HTML でなしのまま 作成です。 もっとも最低限必要なものは Dreamweaver が入れてくれます。 でもここで一つ試しましょう。 ボディ要素で p とタイプして Tab キーを押しますと p 要素が入ります。これくらいなら 大したことは無いのですが Emmet の豊富な機能を使って 作業を少量化することができます。 このレッスンでは Emmet の エディターへのインストールの 仕方について説明しました。

Emmetでコード入力を速めよう

EmmetはHTMLやCSSのコーディングを強力に支援するプラグインです。Dreamweaverをはじめ、さまざまエディタにも対応しています。このコースではHTMLとCSSの基礎を学んだ方向けに、Emmetを使うさいの基本的な入力方法について解説します。このコースでEmmetを学習して、コーディングの効率を大幅にアップしましょう!

1時間02分 (19 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年04月25日
再生時間:1時間02分 (19 ビデオ)

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

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

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