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

要素の入力とクラス・idの指定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
基本的な要素の入力と、クラスやidの加え方についてご説明します。
講師:
03:23

字幕

このレッスンでは、Emmet を使って 基本的な要素を入力し、 さらにそれらに class や id を 加えてみたいと思います。 今 Dreamweaver CC で 新規のドキュメントを作り、 html ファイルとして保存してあります。 ではこの body に入力をしていきましょう。 まずはタイトルを入力したいと思いますが、 h1 要素ですね。 h1 とタイプして キーボードから Tab キーを押すと h1 要素ができあがり、 その中にテキストが 入力できるようになります。 例えば「見出し」とかですね。 ではまた行の最後にポインタを移して、 p 要素の場合は文字通り p です。 そして Tab を打ちます。 これで p 要素ができますので、 またテキストを入力します。 もう一つぐらい、 div 要素。 これも div とタイプして Tab を打てば結構です。 さてこれらの要素に class ですとか id をつけたいという場合、 その場合の入力の仕方です。 h1 要素で class を付けたいというときは、 CSS と同じように ドット(.)を打ちます。 そして例えば headline と。 そして Tab キーを打つと、 class に headline と付きます。 今度は p 要素の方にも id を付けてみましょう。 p 要素を消して id の場合これも CSS と同じです。 ハッシュマークですね、 井桁と言われたりしますけれども、 その後に caption とか打って Tab を打てば入力ができます。 さてこのとき 注意しなければならないことがあります。 ちょっと取り消していきましょう。 Command もしくは Ctrl+Z で取り消しまして、 やっぱりここ caption を id でなく class にしようということで ドットを打ってここで Tab キーを打つと 今 p. の後にカーソルがあります。 そうするとこうなってしまうんですね。 カーソルの後については展開をしません。 ですからドットだけ付いているので class を入れてくださいというふうに 言われてしまうわけです。 これをまた取り消しましょう。 そして id にしておきます。 必ず行の最後にカーソルを置いてから Tab キーですね。 あと div 要素の場合なんですけれども、 div 要素で class id を 付けたいという場合です。 div 要素の場合には、何も入れずに class あるいは id を入れて構いません。 special とかですね。 そして Tab キーを押すと、 何も付いていない場合には div 要素というふうに デフォルトになっています。 id の場合も同様ですね。 id の場合には井桁、ハッシュマーク。 必ずポインタは最後に持っていって そして Tab キーということで、 div 要素に id が付きます。 このレッスンでは、Emmet を使って 基本的な要素を入力し、 それらに class や id を加える やり方についてご説明しました。

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

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

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

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

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

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