エメットクラッシュコース!

11823 ワード
html emmet tutorial テキストリンク
クリエイターの皆さん、

Emmet で生産性を高めましょう!

もともと、Emmet は非常に人気のある拡張機能で、現在では VS Code やその他のコード エディターに統合されています.非常に便利なショートカット拡張機能です.

最も便利なショートカットを学びましょう!

ビデオ バージョンをご覧になりたい場合は、こちら :



1. クラスで div を作成します。



最初で最もよく使われるショートカットはドットです.クラスでdivをすばやく作成できます.たとえば、.box と書き、キーボードで Tab/Enter を押すと、次のコード行が作成されます.

.箱

<div class="box"></div>


デフォルトでは、div が必要であると想定されます.
div.box と書いてから、Tab/Enter を押すこともできます.これは同じことを行います.しかし、これは、クラスを持つ別のタグを作成することもできることを意味します.たとえば、li.box は以下を作成します.

リボックス

<li class="box"></li>


また、インスタンス div.box.square.circle を記述してから、Tab/Enter キーを押して、複数のクラスを持つ div を作成することもできます.

div.box.square.circle

<div class="box square circle"></div>


2. ID を持つ div を作成します。



Emmet で ID を使用して div を作成する方法は、ドットの代わりにハッシュタグを使用するだけでよく似ています. #myElement と書き、Tab/Enter を押すと、次の div が作成されます.

#myElement

<div id="myElement"></div>


たとえば、次のように記述して、クラスと id を混在させることもできます.

div#id.box

<div id="id" class="box"></div>


3. 同時に複数の div を作成する方法は?



同じクラス名の div を以前よりも何倍も速く作成するには、たとえば .box*6 と書くだけで、クラス名が「box」の 6 つの div が作成されます.

.ボックス*6

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>


4.テキストコンテンツを追加できます！



タグの内容がすでにわかっている場合は、中括弧の間に単純に記述できます.たとえば、h1{Hello World} と記述し、Tab/Enter キーを押すと、次のように作成されます.

h1{ハローワールド}

<h1>Hello World</h1>


5. インデックスを取得します。



インデックスを作成するには、h1{$}*6 と入力して Tab/Enter キーを押すと、次のようになります.

h1{$}*6

<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>


6. クラスでインデックスをいじってみましょう!



p.txt-${$}*6 と入力して Tab/Enter キーを押すと、同じクラスのインデックスが作成されます.

p.txt-${$}*6

<p class="txt-1">1</p>
<p class="txt-2">2</p>
<p class="txt-3">3</p>
<p class="txt-4">4</p>
<p class="txt-5">5</p>
<p class="txt-6">6</p>


ドル記号は毎回インデックスを象徴します.

7. ネストされた要素を作成します。



.parent>.child と書き、Tab/Enter を押してネストされた要素を作成します.

.親>.子

<div class="parent">
      <div class="child"></div>
</div>


リストやフォームなどを作りたいときにとても便利です!

複雑なネストされた例を一緒に作成しましょう. 6 つの li 要素が含まれる ul リストを含むコンテナーを作成するとします.これらの要素はすべて同じクラス名になります.まずはご自身でお試しください!

<div class="container">
      <ul class="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
      </ul>
</div>


解決策は次のとおりです..container>ul.list>li.item*6 と入力し、Tab/Enter キーを押します.

8. (入れ子ではなく) 同じレベルで何かを作成します。



+ 記号を使用して、同じレベルで 2 つの div を作成します..box1+.box2 は以下を作成します.

.box1+.box2

<div class="box1"></div>
<div class="box2"></div>


9. レベルアップ！



たとえば、ネストされた要素の後に単純な div を作成する場合に便利です.そのためには、次のように ^ を使用する必要があります.

.container>子^.container2

<div class="container">
     <div class="child"></div>
</div>
<div class="container2"></div>


10. グループ分けもできる！



コンテナー内に li 要素を含むリストが必要であるが、その後に段落を追加したいとします.したがって、次のようにすることができます.

.container>(ul>li*6)^p

<div class="container">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
</div>
<p></p>


11. 完全な Doctype をすばやく作成します。



非常に迅速に Doctype を作成するには、必要なキーが 1 つだけで、それが感嘆符です!タイプ !そして、Tab/Enter を押して出来上がり!

! + タブ/入力

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>

    </body>
    </html>


12.その名前で要素を作成してください！



要素の名前を書いてからタブ/エンターを押すだけで、その要素が作成されます.
一部の要素には属性が付属しており、必要に応じて変更できます.たとえば、input と入力して Tab/Enter を押すと、次のコードが表示されます.

<input type="text">


textarea、form、img、a などについても同様です.

<textarea name="" id="" cols="30" rows="10"></textarea>
<form action=""></form>
<img src="" alt="">
<a href=""></a>


ご覧のとおり、コーディング時間の貴重な秒数を大幅に短縮できます!

これが完全な crash course です.

私のYoutubeチャンネルを見てみましょう:

また近いうちにお会いしましょう!

エンツォ.
AWS EC 2でのMySQLサーバの導入方法
シーザー(Caesar)パスワードとマッピング(Affine)パスワード