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

Emmetサイトのドキュメンテーションを利用する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Emmetサイトには省略コードの早見表や、あいまい検索を試すページがあります。
講師:
03:56

字幕

このレッスンでは Emmet のサイトの ドキュメンテーションから 省略コードの早見表と曖昧検索の ページの2つをご紹介します。 今 Emmet のサイトを開いています。 emmet.io ですね。 その中でコードが沢山ありますので 省略コード、種類が沢山あって 覚えるのが大変です。 よく使っていくものからどんどん 使っているうちに パターンも分かってはくるんですけど これが調べたいという場合があります。 その時には Emmet のサイトの ドキュメンテーションを利用します。 英語での解説ですので 英語が苦手な方にはなかなか 接しづらいかもしれません。 そういう場合にお勧めするのが Cheat Sheet です。 これが省略コードの早見表と いうことになっています。 どんなコードを入れれば どのように展開されるか まず先頭は基本的な記号の使い方 実際のサンプルも出ています。 そしてスクロールして行くと 今度は HTML のタグの省略コードです。 勿論 沢山あります。 そして CSS という風になっています。 残念ながら 例えば HTML に飛びたい css に飛びたいというリンクが どうもなさそうです。 そういう場合には検索を使いましょう。 「検索」でこのページ内です。 例えばディスプレイについて 調べたいと思ったら display とタイプして Enter キーを入れれば ディスプレイのプロパティの 入れ方が出てきます。 そうすると例えば display: none; に 設定したいときには d:n という省略コードを 入れればいいということですね。 値を基本的にはコロンで指定をします。 でもコロンで指定をしなくても 入力できる場合があります。 Emmet のコード入力のパターンには いくつかバリエーションがあります。 それを試すのが このドキュメンテーションの中の Fuzzy search というページです。 先程の d:n をタイプして Tab キーを押すと このフィールドで実際に どういう風に展開されるか 或いは されないか 失敗してしまうか ということが試せます。 ディスプレイについては d-n でも display:none; になります。 或いは実は dn でも Tab で display:none; と 展開されてしまうんですね。 ルール通りでいくと例えば ここに例がありますけど overflow:hidden; の場合には ov が省略コードで 値は : で h です。 これで ov:h Tab キーで展開されますね。 けれどもそれ以外の 本当はルールに従っていないんですが 他の省略コードとかぶらない範囲で いくつかバリエーションが 用意されています。 例えば ov-h ですからコロンの場合に ハイフンを使ってもいい場合が多いです。 ov-h ですね。 更にはハイフンが無くてもいいと 言っています。 ovh もっと言うと oh でも大丈夫ということですね。 試しましょう。 oh と これはかなりバリエーションが多い パターンですので 勿論 プロパティによって きっちりルール通りでなければ いけないものもありますし 或いはこの overflow のように 色々なパターンがあって 非常に短くできるというものもあります。 このレッスンでは Emmet のサイトの ドキュメンテーションの中から比較的 簡単に使いやすいページ情報として Cheat Sheet 早見表ですね。 それから色々省略コードが試せる Fuzzy search の2つを紹介しました。

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

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

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

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

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

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