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

Emmetとは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLやCSSを効率的に入力できるツールEmmetについて簡単にご紹介します。
講師:
03:07

字幕

このレッスンでは Emmet が どういうツールなのかということを 簡単にご紹介します。 Emmet は html や css を 効率的に入力するためのツールです。 サイトはこちらの emmet.io ということで 様々なエディターに向けて ツールが公開されています。 ダウンロードのページに行くと それぞれのエディターの名前がありますので お使いのエディターを選んで そのエディター向けの Emmet の ツールを設定することができます。 さて、今 DreamWeraver で sample.html というファイルを開いています。 けれども html というのは名ばかりで 本当に空っぽです。 けれども DreamWeaverCC 2015 には Emmet がインストールされていますので 直ちに Emmet を使うことができます。 どのように入力するかと いうことを簡単に見ます。 ここは大体、こんなツールなんだな ということがお分かり頂ければ結構ですので それぞれの入力するコードが どういう意味か あまり細かく考えないで結構です。 ではまずは「!」エクスクラメーション ビックリマークですね。 これを打って、キーボードから Tab キーを押します。 そうすると html に基本的に必要な テンプレートとなるタグが入ります。 そして title の所が現在 ハイライトしていますから ここに「タイトル」と 入れます。 それから Emmet 残念ながら 欧米向けのバージョンですので en となってますけど、 ここは ja に置き換えましょう。 そして body に入力をしてみます。 大体の流れをご覧ください。 h1 要素で見出しを入れたいと思います。 「見出し」とテキストを入れます。 そしてその次に UL 要素、リストですね。 これを加えます。 その子供に li 要素を3つ含めたいと思います。 li 要素には a 要素を含めて その中に子供のテキストを入れます。 「項目」とあって、更に 連番を加えたい、という こういう記号を入れるんですけど そしてキーボードから Tab キーを入れると 直ちに展開されて 見出しが h1 ul 要素がその次に入って 各 li 要素には a 要素が含まれ 項目 1 2 3 と連番と入ったと これがあっという間にできてしまう 入力できてしまうというのが Emmet の強力な所です。 一応保存しまして ブラウザーで確認します。 Chrome で html ドキュメントを開きました。 特にスタイルシートをあてていないので デフォルトのままですけど このように簡単に入力することができる ということです。 このレッスンでは html や css を 効率的に入力できるツール Emmet について簡単に ご紹介をしました。

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

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

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

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

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

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