HTML5,リストやテーブルを効率的に書く。裏ワザ!

使用するエディタは Visual Studio Code です。
拡張機能は emmetを使用します。
まず、基本となる型を書きます。
ひとつ前の記事でも書いたように 「!」+tabキーです

<!DOCTYPE html>
<html lang=“ja”>
<head>
    <meta charset=“UTF-8”>
  
    <title>Document</title>
</head>
<body>

</body>
</html>

はい、この形が作られました。


そして、リストやテーブルって
項目が少しなら書けますが、多いとコピー&ペーストでもとても手間ですよね・・・
Emmetという拡張機能を入れれば簡単にパッと出すことが可能です。

<!DOCTYPE html>
<html lang=“ja”>
<head>
    <meta charset=“UTF-8”>
  
    <title>Document</title>
</head>
<body>
table>tr>th+td
  
</body>
</html>

このように bodyの中に
table > tr > th + td 
と記述して tabを押します。

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

するとbodyの中に一瞬で テーブルが作られました。
便利です。。。


<!DOCTYPE html>
<html lang=“ja”>
<head>
    <meta charset=“UTF-8”>
  
    <title>Document</title>
</head>
<body>
ol>li*3
</body>
</html>

次に、リストを作ります。
これを入力してtabを押すと

<body>
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
</body>

うわあああお! すごい 出来上がりました。
ちなみに

<body>
ol>li
</body>

だけの記述だと

<body>

<ol>
    <li></li>
</ol>
</body>

こうなります。
つまり

外側 > 中側  というわけです。
そして *(欲しい数)をしてその分を表示します。

いやーすごい機能です
ありがとうございました。

コメント

スポンサーリンク
スポンサーリンク
タイトルとURLをコピーしました