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

       
  •  

  • カテゴリー: HTML5
 この記事は約3分で読めます。
使用するエディタは 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>

こうなります。
つまり

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

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




 

       
   
コメントはまだありません

コメントを残す

jsファイルかvue呼び出す
HTML5
Canvasで超簡単に点線・破線を引く方法!JavaScript

こんにちは、 今回はCanvasで点線、破線を簡単に引く方法を ご紹介致します。 なんとリファレンス …

HTML5
Webフォント、Canvasに描写できない。超絶強引だけど描写する方法。

皆さんこんにちは、はせです。今回は、『超強引』にWebフォントがCanvasに描写されない対処法を書 …

HTML5
CSSやJavaScriptが反映されない時の対処法。キャッシュが原因かも。

皆さんこんにちは、はせです。HTMLやPHPその他諸々でCSSやJavaScriptが反映されないと …