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

子要素や兄弟要素を含めた入力

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
子要素や兄弟要素を1度の入力で展開します。
講師:
02:31

字幕

このレッスンでは子供の要素や兄弟の要素を Emmet でどのように 入力するのかを説明します。 今開いているのはまっさらな HTML ドキュメントですけれども body 要素の中に見出しを入れましょう。 h1 でクラスを設定します。 ドットですね。 そして headline としましょうか。 ここで Tab キーで見出しを入力します。 次に ul 要素を加えたいと思います。 ul 要素は文字通り ul 。 そして id を加えましょう。 #マークで list とします。 子要素を加えたい。 当然 li が入ってくる訳ですね。 その場合には閉じタグになる不等号ですね。 この後に li と入れれば結構です。 そして Tab キーを押すと li 要素が出来ました。 li 要素のタグの中にカーソルがありますから では a 要素も入れましょう。 a で Tab で a 要素が入ります。 href の中に、値設定のところに カーソルがありますので タグの後に移して じゃ img も入れましょう。 img と。 こういう風に入れても結構なんですけども 一度に入れたいと。 別にこれでも十分効率的だと思うんですが 一度に入れることも可能です。 その場合どうするかと言うと まず一旦消しまして h1 そしてドットの headline と いうのは同じです。 その後に兄弟としてという時は プラスの記号を付けます。 そこに ul が入るわけですね。 そして子供というのは先程の通りです。 li が入って a が入って img が入ると。 そしてこの行の最後に カーソルがあることを確認して Tab キーを押せば一気に展開できると いうことになります。 Dreamweaver で11行目の番号が 赤くなっていますけど src に何か入れないと怒るんで 適当な文字を入れておきます。 これで消えました。 このレッスンでは子供の要素や 兄弟の要素を どのように入力すればいいかと いうことについて説明しました。 兄弟の場合にはプラス記号 子要素は閉じタグの不等号を順番に つなげていけば良いということです。

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

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

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

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

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

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