2017年7月26日に弊社のプライバシーポリシーが改定されました。引き続きLynda.jp日本版をご利用になることによりこれらの文書に同意されたものとみなされますので、事前にご確認ください。

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

Emmetとは

LinkedInラーニングの無料トライアルを今すぐ試そう

無料で視聴する すべての加入プランを見る
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 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
プラン加入者限定
発売日:2016年04月25日

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

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

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