模写修行メディア

CSSのコメントアウトの書き方を具体例も使って紹介!

ある程度の規模のサイトになると、CSSは膨大な量になります。

コード量が多いと、どこに何を書いてあるのかわからなくなることもあります。CSSのコメントを上手く使うことで、保守性を高い、分かりやすいコードにできます。

この記事では、CSSのコメントアウトの書き方を具体例も使って紹介します。

HTMLのコメントアウトの書き方を具体例も使って紹介!

HTMLのコメントアウトの書き方については、上の記事をご覧ください。

コメントアウトとは?

コメントアウトとはコード上に残すメモです。プログラム・ブラウザ上の表示・SEOには、影響を与えません。

制作をしていると、自分が書いたコードでも、しばらく期間を空けて見ると、『なんだっけ、これ?』と思うことはよくあります。そんな時に、コメントとして、コードの説明があれば、理解の手助けになります。

複数人で制作するときにも、他の人にもわかるように、コメントを入れることはスムーズに制作を進める上で大切です。

  • 制作の効率化(可読性アップ)
  • 保守性アップ

これらの点において、コメントはとても有効です。

CSSのコメントアウトの書き方

  • 1行のコメントアウト
  • 複数行のコメントアウト

これら2つのパターンに分けて、コメントアウトの書き方を紹介します。

注意!
この記事で紹介するのは、CSSのコメントアウトの書き方です。各言語によって、コメントアウトの書き方は違うので注意してください。

1行のコメントアウト

p {
    /* ここにコメントを入れる */
    color: red;
}

1行コメントも複数行のコメントも、上のように/**/で囲います。

p {
    /* color: red; */
}

このようにプロパティと値をコメントにすることもできます。


SCSSを使う場合は、下のように書くこともできます。

p {
    // color: red;
}

複数行のコメントアウト

p {
    /*
        複数行のコメントを入れる時も
        同じように書くよ!
    */
    color: red;
}
/* p {
    color: red;
} */

複数行でも同じように、/**/で囲われた部分は、コメントになります。

CSSのコメントアウトは具体的にどんな時に使う?

実際にどんな時にコメントアウトを使うか紹介します。

コードを分類(カテゴリ分け)する

/* ========================
about
======================== */
.about{
    ...
}
.about-title{
    ...
}

/* ========================
service
======================== */
.service {
    ...
}

上のようにコードを分類すると、とてもわかりやすくなります。SCSSなどを使わずに、1つのCSSファイルにコードを書く場合は特に、必ず入れておいた方が良いです。

注意書きを残す

/* youtubeのアスペクトを保持しながらレスポンシブ */
.youtube {
    position: relative;
    padding-top: 56.25%; /* アスペクト比 16:9 */
}

.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

ぱっと見て何をやっているか分かりにくいコードには、注意書きとしてコメントを入れると良いです。

使用例を残す

/*
ex)
<li class="hoge>
    <a class="link-arrow">メニュー01</a>
</li>
*/
.link-arrow{
    position: relative;
}
.link-arrow::before{
    ...
}

ページをまたいで使い回すコードなどは、分かりにくければ使用例を残すと良いです。

制作時のメモを残す

p {
    /* TODO: 後日変更必要。 */
    color: red;
}

.hoge {
    /* FIXME: Safariで意図しない重なり順になっている。 */
    z-index: 10;
}

制作時のメモを残すこともあります。後述しますが、このTODOFIXMEを使ったコメントは、アノテーションコメントと呼ばれるものです。

一時的にコメントにする

/* p {
    color: red;
} */

制作の都合上、一時的にコメントにすることもあります。

後で反映させるものを予め作っておいてコメントにしているケースもありますが、公開時はなるべく不必要なコメントは残さない方が良いです。

CSSのコメントアウトの注意点

コメントアウトする際の注意点を紹介します。

入れ子に出来ない

/* 🙅‍♂️ 入れ子に出来ない */

/* p {
    color: red;
    /* padding: 8px 24px; */
} */

コメントの中にコメントを入れる(入れ子にする)ことはできません。

ディベロッパーツールから見られてしまう

ディベロッパーツールからコメントは見れる

コメントはディベロッパーツールから見れてしまいます。

パスワードなど重要な情報はコメントとして残さないことはもちろん、見られて恥ずかしいような内容なども残さないように注意が必要です。

コメントを書きすぎない

コメントが多いと可読性が失われます。分かりやすくするためにコメントで、逆に分かりにくくなってしまったら本末転倒です。

また、あまり気にしなくて良いことではありますが、コメントが多いと若干ファイルサイズは大きくなります。

サイト公開時に不必要なコメントは消す

『CSSのコメントアウトは具体的にどんな時に使う?』で、コメントを使う5つの場面を紹介しました。

  • コードを分類(カテゴリ分け)する
  • 注意書きを残す
  • 使用例を残す
  • 制作時のメモを残す
  • 一時的にコメントにする

このうち、後半2つはサイト公開時には消しておいた方が良いです。

アノテーションコメントを使うと便利!

アノテーションコメントを使うと、コメントにメタデータを付加できます。

p {
    /* TODO: 後日変更必要。 */
    color: red;
}

.hoge {
    /* FIXME: Safariで意図しない重なり順になっている。 */
    z-index: 10;
}

TODOFIXMEがメタデータです。要はコメントを役割ごとに分類(カテゴリ分け)しているようなものです。

Visual Studio Codeではプラグインを入れることで、アノテーションコメントを一覧で見ることができるのでとても便利です。

TODOFIXME以外にもいくつかあるので、参考サイトを載せておきます。

プログラミングではよく使いますが、コーディングで使っている方は、もしかしたら少ないかもしれません。個人的にはTODOをたまに使う程度です。

Visual Studio CodeのブラグインTodo Treeが便利!

Visual Studio CodeのブラグインTodo Tree

Visual Studio CodeのブラグインTodo Treeを入れると、上のようにTODOFIXMEをハイライトしてくれます。

また、左のメニューから一覧で見ることもできるので、対応漏れも防げます。

HTML以外の言語でも使えます。デフォルトでは、TODOFIXMEしか対応していないので、カスタマイズする際は設定ファイルを修正する必要があります。興味がある方は調べてみてください。

CSSのコメントアウトのショートカットキー

PCショートカットキー
MacCtrl + /
Windows⌘(コマンド) + /

コメントにしたい箇所をドラックして、上のショートカットキーを押すことでコメントアウト出来ます。

よく使うので絶対に覚えておきたいショートカットキーの1つです。

Emmetを使って効率よくコメントを入れる方法

Emmetとは、HTML・CSSを書く時に使える、入力補完機能です。Visual Studio Codeでは標準で備わっています。

例えば、p20と入力して、tabキーを押してみてください。padding: 20px;が表示されたはずです。

他にもたくさんできることがあるので、詳しくはCheat Sheetをご覧ください。


Emmetを使って効率的にコメントを入れることが出来ます。

cmと入力して、tabキーを押すと、下のように空のコメントができます。

/*  */

前述したショートカットキーやEmmetは積極的に使うと良いです。

CSSの保守性を高めるならCSS設計とSCSSの勉強は必須!

コメントを入れることで、分かりやすくすることは可能ですが、限界があります。

CSSの保守性を高めるなら、CSS設計とSCSSの勉強は必須です。CSS設計に関する記事も上げているので、興味がある方はぜひご覧ください。

【実務向け】CSS の class 名の決め方(命名規則)はどうすればいいか?について解説【初心者向け】模写修行流CSS設計を紹介!

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材