HTMLをショートカットを使って書く

今回はHTMLを書くときのショートカットについての備忘録です。

ショートカットを使うことのメリットは以下の点です。

• コードの間違いが減る。
• 作業速度が格段に上がる。

というわけで、これから自分の作業速度を早くしていきたいので、学んだショートカットについて書き残しておきます。

ショートカット一覧

クラスやIDを持ったタグを生成する。

.class
→<div class="class"></div>

#container
→<div id="container"></div>

span.cls
→<span class="cls"></span>

クラスやIDをつけた入れ子をを生成する

#container>.cls
<div id="container">
    <div class="cls"></div>
</div>

.cls>.on
<div class="cls">
    <div class="on"></div>
</div>

入れ子の中身を複製する

#container>.cls*6
→<div id="container">
        <div class="cls"></div>
        <div class="cls"></div>
        <div class="cls"></div>
        <div class="cls"></div>
        <div class="cls"></div>
        <div class="cls"></div>
</div>

#container>.cls-$*6
<div id="container">
        <div class="cls-1"></div>
        <div class="cls-2"></div>
        <div class="cls-3"></div>
        <div class="cls-4"></div>
        <div class="cls-5"></div>
        <div class="cls-6"></div>
</div>

#container>.cls-$$*6
<div id="container">
        <div class="cls-01"></div>
        <div class="cls-02"></div>
        <div class="cls-03"></div>
        <div class="cls-04"></div>
        <div class="cls-05"></div>
        <div class="cls-06"></div>
</div>

これらのショートカットはほんの一部だと思うので、これからどんどんショートカットを覚えていって作業速度を上げていこうと思います。