[TIP 1]Vscodeベースのコメント

🔎 Emmet?

Emmtは、コードエディタツール(Code Editor Tool)を使用してコードを記述する際に、時間を効率的に短縮する拡張機能です.
Atom、vscode、Notepad++など多くの編集ツールでサポートされていますが、ない場合はEmmetプラグインを外部にインストールできます.
私が今使っているのはvscodeツールなので、これを基に説明します.

📚 Emmet構文

vscodeのショートカットキーはtabです.文法を書き終えてtabキーを押すと、すべてのコードを書かなくても生成しやすくなります.

タグの作成

div

div入力後tabを押す

<div></div>

生成
親ラベルに子ラベルを含む構造を作成することもできます.

div>ul>li

<div>
  <ul>
    <li></li>
  </ul>
</div>

サブタブ

親ラベルに複数のサブラベルを並列に配置するには

div>ul+ol

このように+を使います.

<div>
  <ul></ul>
  <ol></ol>
</div>

複数のタグを繰り返す

ul>li*5

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

태그 * (반복할 개수)

子ラベルから親ラベルへのアクセス

div>ul>li^ol

divラベルにulラベルを追加し、ulラベルにliラベルを追加してから、前のステップに戻り、ulの兄弟ラベルでolを表します.

<div>
   <ul>
     <li></li>
   </ul>
   <ol></ol>
</div>

クラス名の読み込み

div.class
.class

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

ラベルの後ろclassに記入しtabキーを押します.
.classに入力し、tabをクリックしてクラス名のdivラベルを入力します.

id名を入力

div#id

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

必要なラベルの後ろに#idを書いてtabキーを押します.

グループ化

div>(header>ul>li*2>a)+footer

ヘッダーに複数のサブタグを追加し、ヘッダーの横に兄弟タグのフッターを配置する場合は、()を使用してグループを表します.

<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer></footer>
</div>

テキスト入力

タグにテキストを入力することもできます.

p{hello}

<p>hello</p>

自動配賦数

数字を入れたい部分に自動的に$を入力します.

p.class${item $}*5

<p class="class1">item 1</p>
<p class="class2">item 2</p>
<p class="class3">item 3</p>
<p class="class4">item 4</p>
<p class="class5">item 5</p>

スタック用テキスト

プログラミング中に、テストが必要なときに一時的に入れるスタックテキストが必要になる場合があります.コメントは、これらのテキストを表すこともできます.

p>lorem
p>lorem4

直接loremを入力すると全文が表示され、loremの後ろの数字はLoremの後ろの単語数を表します.

p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae, blanditiis? Nulla totam mollitia accusantium, consequatur natus quasi, dolor quas eum modi amet minus ipsam reprehenderit labore veritatis maiores incidunt molestiae!</p>
<p>Lorem ipsum dolor sit amet.</p>