コメントアウト

HTML・CSS・SCSS・プログラムなどでのコメントアウト方法と使い方の統一。

非表示要素をコメントアウトしたり、更新の際に伝えたいことなどのメモで使う。

HTML

<!--コメントアウト-->

【短い文をコメントアウトする場合】
その部分だけをコメントアウトする。
<ul>
    <!--<li>テキスト1</li>-->
    <li>テキスト2</li>
</ul>

【長い文や要素をコメントアウトする場合】
コメントアウトもインデントを揃えて、分かりやすくする。
<ul>
    <!--
    <li>テキスト1</li>
    <li>テキスト2</li>
    -->
</ul>

【入れ子には出来ない】
<ul>
    <!--
    <!--<li>テキスト1</li>-->
    <li>テキスト2</li>
    -->
</ul>

HTMLのコメントアウトはブラウザのソースを確認すると表示される。

CSS

/*コメントアウト*/

【短い文をコメントアウトする場合】
その部分だけをコメントアウトする。
a{
    padding: 10px;
    display: block;
    /*font-size: 10px;*/
}

【長い文や要素をコメントアウトする場合】
コメントアウトもインデントを揃えて、分かりやすくする。
コメントを添えると尚良し。
a{
    /* 未使用要素
    padding: 10px;
    display: block;
    font-size: 10px;
    */
}

【入れ子には出来ない】
a{
    /* 未使用要素
    padding: 10px;
    display: block;
    /*font-size: 10px;*/
    */
}

CSSのコメントアウトはブラウザのソースを確認すると表示される。

SCSS

CSSとほぼ同じ仕様だが、一般的なプログラミングのコメントアウトも使える。コメントアウトを入れ子に出来るパターンもある。

基本的には/**/は複数行の場合に使用し、//は1行の時に使用する事が多い。

/*コメントアウト*/
//コメントアウト

【短い文をコメントアウトする場合】
その部分だけをコメントアウトする。
a{
    padding: 10px;
    display: block;
    /*font-size: 10px;*/
}

1行だけコメントアウトする場合。短い文であればこちらを推奨。
a{
    padding: 10px;
    display: block;
    //font-size: 10px;
    font-weight: 700; //font-weightは残しつつ、横のコメントだけ消すことも可
}

【長い文や要素をコメントアウトする場合】
コメントアウトもインデントを揃えて、分かりやすくする。
コメントを添えると尚良し。
a{
    /* 未使用要素
    padding: 10px;
    display: block;
    font-size: 10px;
    */
}

【入れ子には出来ない】
a{
    /* 未使用要素
    padding: 10px;
    display: block;
    /*font-size: 10px;*/
    */
}

【//は入れ子に出来る】
a{
    /* 未使用要素
    padding: 10px;
    display: block;
    //font-size: 10px;
    */
}

「/**/」「//」コメントアウトはSCSSをコンパイルしてもCSSに吐き出されない。

Vue.js（HTML上にて）

<div v-if="false">
    <p>
        まるっと表示させない<br>
        まるっと表示させない<br>
        まるっと表示させない<br>
        まるっと表示させない
    </p>
</div>

Vue.jsを使っている時は「v-if="false"」を付与すると、インスペクタでも表示させなく出来る。
通常の<!---->だとソースが見られてしまうので、隠したい場合に有効。