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

要素の階層を操作する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素をひとつ上の階層に加えたり、親子要素をひとつにまとめる方法についてご説明します。
講師:
03:29

字幕

このレッスンでは 要素を1つ上の階層に加えたり 親子要素を1つに纏める 方法について説明します。 今まっさらな HTML ドキュメントを 開いていますけれども body に Emmet で要素を加えます。 まず h1 ですね。 そして「見出し」とします。 同じ階層に「+」で p 要素を加え その子に img の要素を入れましょう。 これで展開します。Tab キーです。 そしてこの下に p 要素を 加えたいとします。 これを一気に入れたいと思うんですけれども ちょっと Dreamweaver が怒ってますね。 src ソースがないと怒られるので ではダミーと言うか プレースホルダ を 入れておきましょう。 http の // placehold.jp として 大きさは 150 x 150 位でいいでしょう。 png とすると 早速入りました。 では この下に一気に入れる 方法について説明します。 まず h1 はいいですね。 そして「見出し」として その下に p 要素を加え 子供に img ここはもうプレースホルダを 怒られないうちに入れておきましょう。 コピーします。 コピーして [ ] の中に入れました。 さて次に p を1個上に上げたい訳ですね。 その場合にはキャレットと言いますけれど 山形の印です。 そして p と入れて Tab キーを打ちます。 そうすると上と同じように入りましたね。 スクロールしてみると 同じように入力されています。 もう1つ方法を紹介しましょう。 h1 の 「見出し」の 同じ階層 + ですね。 p の子供の img で [ ] で プレースホルダのソースを コピーして加えます。 この p と img 「親子を一緒に扱ってください」と いうのが算数の式と一緒ですね。 ( ) でくくる こうすると p と その子の img が 一緒になります。 その後で+ という風にすれば 子の img でなくて p の同じ要素に P 要素が加えられます。 展開しましょう。Tab キーです。 では 一旦保存して ブラウザで確かめましょう。 「ブラウザでプレビュー」です。 同じように「見出し」 画像 あとテキストを加えたいので p 要素の方が見えてきませんけれども ちゃんと入りました。 このレッスンでは要素の階層を操作する 2つの方法について説明しました。 1つは 1つ上の階層にという場合は +でなくキャレット(山形)を 使うということです。 それからもう1つ、親子の要素を 1つに纏めて扱うという場合には ( ) でくくればいいという事でした。

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

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

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

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

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

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